Open Graph en WordPress

Las redes sociales se han convertido en una herramienta casi esencial para compartir con el mundo los contenidos de nuestra web.

Sin embargo, la masificación de su uso ha hecho que cada día sea más difícil destacar entre el resto de publicaciones y que nuestros contenidos cada vez tengan que ser más atractivos para llamar la atención de los usuarios y conseguir el ansiado clic.

Para facilitarnos ligeramente esta tarea, nació el protocolo Open Graph. En este artículo te explico de manera sencilla qué es, para qué sirve, dónde se usa y cómo puedes implementarlo en tu WordPress.

Vamos allá.

¿Qué es Open Graph?

Sin tecnicismo y de manera muy resumida, Open Graph es quien se encarga de mostrar la vista previa de tus artículos en las redes sociales.

Si llevas tiempo por internet y las redes, seguramente recuerdes cuando al pegar un enlace en Facebook o Twitter, por ejemplo, no pasaba nada. Ahí se quedaba. Si querías que tu publicación destacara, tenías que añadir una imagen.

Pues Open Graph es el responsable de que esto haya cambiado y ahora las publicaciones con enlace sean más atractivas por defecto. Esto te ayuda a que se hagan más clics encima y se comparta más. De forma indirecta, estas visitas también son positivas para tu posicionamiento en buscadores.

Open Graph Facebook y Twitter Cards

En realidad, la mayoría de redes sociales que admiten enlaces (por no decir todas), utilizan Open Graph. Incluso, WhatsApp y Telegram te muestran una vista previa cuando pegas un enlace en un chat. Pero dada la competencia, en Facebook y Twitter cobra mayor importancia.

En Twitter esta vista previa se denomina «Twitter Card» y a diferencia de otras redes, te permite elegir el modelo que quieres utilizar, aunque la mayoría nos decantamos por la opción «Summary Card with Large Image» (Resumen con Imagen Grande). Ya sabes, burro grande, ande o no ande.

Twitter Cards Validator, Depurador Facebook y otros depuradores

Los depuradores que ofrecen las distintas redes sociales tienen dos funcionalidades:

1. Previsualizar cómo se verá esa publicación cuando se comparta.
2. Limpiar la caché tras hacer cambios que quieres que se reflejen en la previsualización.

La primera es muy útil para poder controlar si el título se ve completo, si carga la imagen correcta o cómo se recorta, si la descripción muestra los emojis como corresponde… De esta manera, si algo no está como quieres, tienes opción de corregirlo.

¿Pero qué pasa realmente cuando corriges? Que la vista previa se sigue viendo igual. Esto es por la caché.

Voy a hacer un inciso para explicarte rápidamente esto de la caché:

Cuando tu compartes el enlace por primera vez, la red social va a tu web y extrae todos los datos que necesita. Esto le toma determinado tiempo. Para intentar que la próxima vez ese tiempo sea más corto, lo que hace es guardar esa información en sus propios servidores y cuando se vuelve a compartir el mismo enlace, la recupera desde ahí.

Así que, aunque tú hagas cambios, la red social en cuestión no los refleja porque sigue recuperando la información que obtuvo inicialmente. Pasado cierto tiempo (cada una tiene el suyo, pero suelen ser semanas), vuelve a acceder a la web para actualizar la información y sólo entonces, esta se muestra tal como la modificaste.

Entonces, volviendo a la vista previa. Si tú has hecho cambios, esta caché hace que no se muestren. La solución es utilizar estos depuradores para forzar que la red social acceda a tu web a buscar la información nueva, sin esperar a que pase el tiempo especificado.

TIP: Seguro que alguna vez te ha pasado intentar programar una entrada antes de haberla publicado y, que a partir de entonces, la vista previa siempre sea un error 404. Incluso después de lanzar la entrada. La solución pasa por estas herramientas una vez que el post ya es público.

Seguramente los depuradores de Twitter y Facebook son los más conocidos, pero todas las redes sociales tienen el suyo. Aquí te indico los más utilizados para actualizar la vista previa de tus contenidos:

• Facebook y WhatsApp Card Validator (o debugger): Depurador de Contenido Compartido.
• Depurador de Twitter (debugger): Twitter Cards Validator.
• Pinterest: Rich Pins Validator.
• LinkedIn: Post Inspector.

¿Tengo Open Graph implementado en mi Web?

Seguramente a estas alturas te lo estás preguntado. La mejor forma de verificar que Open Graph ya está implementado en tu web es mediante el depurador de código de tu navegador.

Accede a una página cualquiera de tu web y luego abre la herramienta. Puede tener varios nombres, por ejemplo, en Chrome la encuentras en el menú «Más Herramientas» > «Herramientas para Desarrolladores».

Una vez aparezca el panel con el código, localiza en la parte superior del mismo la etiqueta «<head>» y despliégala para ver su contenido. Ahora trata de localizar algo parecido a esto:

¿Lo tienes? Open Graph está habilitado. ¿No lo tienes? No lo está.

¿Qué pasa si no lo tienes?

En realidad, nada demasiado grave.

Si las etiquetas de la imagen anterior no están implementadas, al pegar un enlace de tu web, la mayoría de redes sociales intentará generarlas con el contenido que encuentra dentro de la página. Por ejemplo, utilizarán como título el que hayas puesto para el post y localizarán la primera imagen que tenga las medidas suficientes para ser utilizada.

No obstante, es mejor tenerlo correctamente configurado para asegurarte de que tus posts siempre se muestran tal como quieres, ya que si no encuentra información suficiente, la previsualización será mucho menos atractiva y llamará menos la atención en el timeline de tus seguidores.

Open Graph en WordPress

Como ya imaginarás, la implementación de Open Graph en WordPress pasa por un plugin.

Algunos plugins de SEO, como Yoast SEO o All in One SEO, ya traen incluida esta opción. Sólo tendrás que activarlo y configurarlo.

En caso de que tu plugin de SEO no cuente con esta funcionalidad, o no estés usando ninguno, existen opciones específicas para añadir Open Graph a tus posts. Algunos ejemplos son:

• Open Graph and Twitter Card Tags.
• WP Open Graph.
• Open Graph Protocol Framework.

Imagen ilustrativa del artículo de Pascal Laurent (Pixabay).

También te interesará...

Poner https en tu web. Razones para hacerlo cuanto antes.

Mobile First, Responsive y por qué no es oro todo lo que reluce.

Reducir y comprimir imágenes para tu web. Por qué debes hacerlo siempre.