Completar el Marcado de Open Graph en artículos de Datalife Engine

En Datalife engine viene el Marcado de Open Graph predeterminado para compartir en Facebook en los artículos o historia completa.

La mayor parte del contenido se comparte en Facebook en forma de URL, por lo que es importante que marques tu sitio web mediante etiquetas de Open Graph, con el fin de controlar cómo se muestra tu contenido en Facebook.

En la salida de la noticia o articulo en nuestros CMS viene el siguiente Marcado de Open Graph: Mas información Protocol Open Graph para Facebook:

<meta property="og:site_name" content="Nombre de tu sitio web">
<meta property="og:type" content="article">
<meta property="og:title" content="Titulo del articulo">
<meta property="og:url" content="url del articulo">
<meta name="news_keywords" content="Palabras claves">
<meta property="og:image" content="url de la imagen">
<meta property="og:description" content="Descripción del articulo">

Pero al compartir en la plataforma de facebook no se visualiza correctamente el articulo como debería ser.

El error esta en que falta etiquetas en el marcado en la sesión de imagen.

Propiedad inferida: Las propiedades "og:image" proporcionadas aún no están disponibles, ya que las nuevas imágenes se procesan de forma asíncrona. Para asegurarte de que se incluya una imagen cuando se compartan las nuevas URL, especifica sus dimensiones mediante las etiquetas "og:image:width" y "og:image:height"

Para poder agregar estas etiquetas faltantes vamos a /engine/modules/show.full.php

y buscamos:

$social_tags['site_name'] = $config['home_title'];
$social_tags['type'] = 'article';
$social_tags['title'] = str_replace("&amp;amp;", "&amp;", htmlspecialchars( $row['title'], ENT_QUOTES, $config['charset'] ) );
$social_tags['url'] = $full_link;

Debajo agregaremos:

$social_tags['image:alt'] = str_replace("&amp;amp;", "&amp;", htmlspecialchars( $row['title'], ENT_QUOTES, $config['charset'] ) );
$social_tags['image:type'] = 'image/webp';
$social_tags['image:width'] = '1200';
$social_tags['image:height'] = '800';

En "image:type" ponemos el tipo de formato de nuestra imagen en mi caso seria webp. y las dos restantes seria el tamaño de la imagen que están utilizando en el DLE en mi caso es 1200x800px - Configuración en el de istración del DLE.

Luego buscamos:

if ( count($images) ) {
$social_tags['image'] = str_replace("/thumbs/","/",$images[0]);
$social_tags['image'] = str_replace("/medium/","/",$social_tags['image']);

Y agregamos debajo:

$social_tags['image:secure_url'] = str_replace("/thumbs/","/",$images[0]);
$social_tags['image:secure_url'] = str_replace("/medium/","/",$social_tags['image']);

Y ahora ya tenemos todo el Marcado de Open Graph predeterminado para compartir en Facebook.

Utilice la herramienta Sharing Debugger para probar cómo los raspador ve sus sitios web. La herramienta de depuración también actualiza cualquier contenido extraído que tengamos para sus sitios web, por lo que puede ser útil si necesita actualizarlos con más frecuencia que el período de actualización estándar de 24 horas.

Artículos Relacionados

Comentarios