Es posible que lo que te voy a contar te haya pasado en tu propia web o en alguna otra web que hayas visitado: en las entradas del blog se muestra para cada una de ellas una serie de botones para compartir los contenidos en las redes sociales.
Pulsas para compartir un artículo en Facebook, pero cuando vas a ver el contenido compartido dentro de Facebook la información que se muestra no parece la correcta: el título no es el mismo que el del artículo compartido, la imagen que se carga no tiene nada que ver (por ejemplo, es el logo de la página) y tampoco la descripción.
¿Por qué ocurre esto? Porque Facebook no sabe interpretar cuál es el título del artículo, ni la imagen principal, ni el propio contenido de lo que se está compartiendo.
Ten en cuenta que cuando se carga un articulo de un blog en WordPress, en la página no solo se muestra el artículo, sino que también estarán el resto de contenidos que se muestran junto a él: el logo de la web, el menú principal, algunos widgets en una columna lateral y en el pie, etc.
Es por esto que Facebook puede no tener claro el contenido exacto que se está compartiendo.
¿Y cómo arreglamos esto? Con Open Graph.
Sin entrar en tecnicismos, Open Graph son una serie de etiquetas que se añaden al código de la página, invisibles de cara al visitante de la web, que ayudan a Facebook y a otra redes sociales como Twitter y Google+ a identificar los elementos principales del artículo que se quiere compartir: título, imagen, descripción, etc.
El aspecto a nivel de código sería como el siguiente:
<meta property="og:type" content="article" /> <meta property="og:title" content="Titulo del artículo" /> <meta property="og:url" content="http://www.tupaginaweb.com/nombredelarticulo" /> <meta property="og:image" content="http://www.tupaginaweb.com/wp-content/uploads/imagendestacada.jpg" />
Para saber si en tu WordPress ya se están cargando las etiquetas Open Graph, carga un artículo de tu blog y muestra el código fuente de la página (todos los navegadores disponen de esta opción).
Aquí tendrías que buscar un código parecido al que he puesto antes.
Busca el texto
"og:"
para ver si lo encuentras. De no ser así, es muy recomendable que añadas estas meta-etiquetas en tu WordPress.
Tabla de contenidos
Cómo añadir Open Graph a WordPress
No es necesario aplicar cambios en el código de WordPress para agregar las meta-etiquetas Open Graph.
Por suerte existen multitud de plugins que se encargan de realizar esta tarea de forma automática. Incluso algunos temas de WordPress, normalmente de pago, incluyen esa opción en su configuración.
Aunque existen multitud de plugins específicos para realizar esta tarea, mi consejo es que utilices el plugin WordPress SEO by Yoast para generar estas etiquetas, ya que además de esta tarea el plugin se encarga de realizar otras labores muy beneficiosas de cara a mejorar el posicionamiento de nuestro WordPress en los buscadores.
En el blog de Webempresa encontrarás un artículo donde se explica cómo configurar WordPress SEO para generar las meta-etiquetas Open Graph.
Una vez que hayas añadido las etiquetas Open Graph a tu WordPress, haya sido con el plugin WordPress SEO o con otro, tendrás que comprobar que todo ha ido bien.
Para ello, vete a la página de desarrolladores de Facebook que se encarga de verificar las etiquetas Open Graph y pon una url de algún artículo nuevo de tu web.
Aquí te mostrará la información que está leyendo Facebook y que mostrará en la red social cuando se comparte un artículo.
Ojo, si un artículo ya había sido compartido antes es posible que esta página te muestre el contenido que tenga cacheado de una anterior revisión, por lo que te recomiendo hacer la prueba con artículos nuevos.
No te olvides de añadir las etiquetas Open Graph en tu web.
Se configuran en un momento, mejorarán el posicionamiento de tu página y las entradas de tu web se verán de forma correcta en Facebook.
¿Te ha resultado útil este artículo?
Técnico con más de 15 años de experiencia en el soporte y desarrollo web. Actualmente estoy al frente de caltener.com, empresa especializada en el soporte para WordPress, PrestaShop y Joomla.
Diseño de webs donde cuidamos los detalles, como el diseño, la velocidad de carga y la adaptación a SEO.
Servicios de optimización, migración y actualizaciones.
