Qué es Open Graph y por qué deberías prestarle atención

Wed Apr 29 2020 16:13:04 GMT-0400

Al parecer, como las imágenes no están en una resolución optima no las incluye inmediatamente por Whatsapp.

Parece que la solución pasa por que el tamaño no supere 300KB.

¿Qué es la información Open Graph?

¿Por qué deberíamos estar atento a esta información en nuestro sitio web?

SPOILER ALERT: Es extremadamente importante si inviertes muchos recursos para que se viralize tu contenido.

De seguro quieres que el contenido de tu artículo sea compartido por todo el mundo.

Otras plataformas como Whatsapp, Facebook y Twitter utilizan esta información para mejorar la presentación del enlace que es compartido por los usuarios.

Visual del contenido compartido

Resulta evidente que la visual generada es por mucho mejor y más atrayente cuando está configurado esta metadata que cuando no lo está.

Imágina que ahora inviertes muchos recursos para que tu contenido sea viralizado, por ejemplo, en una landing para promocionar un producto o servicio o estás trabajando en un medio digital. Seguramente, se está invirtiendo muchos recursos en que el contenido sea lo más viral posible.

Un nota importante acerca de la imagen Open Graph en Whatsapp

En el caso de Whatsapp, muchas veces no funciona la imagen que hemos seleccionado añadir en Open Graph.

Es importante tener correctamente configurado este punto, ya que si no lo haces correctamente antes de compartir, Whatsapp no actualizará la metadata hasta 24 horas después y todos lo usuarios de la plataforma que compartan el enlace no verán la imagen.

Si por algún motivo ya has compartido el enlace y quieres asegurarte de que se comparta un enlace con la visual apropiada y no esperar esas 24 horas a que whatsapp actualice los datos, puedes añadir un parámetro fake como un ?hola=mundo al final de la URL

Por ejemplo

1
https://example.com/?hola=mundo

Esto se debe a que Whatsapp es más restrictivo con la imagen que utiliza para potenciar la visual del enlace compartido. En esta respuesta de stackoverflow lo explican con más detalles. Según esta respuesta es importante considerar lo siguiente:

  1. Considera la última imagen añadida en el metadata de Open Graph.
  2. La imagen no debe superar los 300KB

Con esto te asegurarás que la imagen es compartida correctamente.

¿Cómo podemos revisar esta metadata?

Método PRO!!

Describo este método como pro, y te requimiendo que lo hagas por lo menos una vez, ya que te ayudará tener más certeza de como funciona y descubrir algún para advertir tener una comunicación más fluida con los desarrolladores, ya que no necesariamiente tienen porque conocer la importancia de este concepto.

Abre el inpector del navegador y busca og:
Ejemplo de página sin Open Graph

Método simple

Utiliza un plugin en tu navegador para simplificar esta tarea. Por ejemplo puedes añadir este plugin

Open Graph Preview

Con el podrás ver de forma más simple la metadata Open Graph de tu página.

Acá puedes ver que no se ha agregado la información que utiliza facebook.

Open Graph Preview

Acá como se visualiza

Open Graph Preview

Top