>

Mostrar una imagen a partir de una web en las redes sociales: «la mágia del protocolo Open Graph«

Facebook, Whatsapp, Twitter e incluso los programas que gestionan los SMS son capaces de transformar cualquier URL en una imagen. El motivo es sencillo: el ser humano procesa unas 100 veces más rápido una imagen que el significado de una palabra.

Open Graph es el protocolo incrustado en la cabecera de una web que define que mostrar cuando uno de estos programas se encuentra con una URL. Toda la documentación se puede encontrar en su web oficial: Open Graph Protocol

Pero las redes sociales trabajan con diferentes tamaños de imágenes, también adoptan o no parte del protocolo Open Graph por lo que lo que sirve para Whatsapp se queda pequeño en Facebook o se recorta en un SMS y el aspecto final que puede recibir un cliente o un usuario da una muy mala imagen de la web y por lo tanto de la empresa y del servicio ofrecido.

Después de analizar multitud de posibilidades, emplear horas leyendo información en Internet, cambiar valores de atributos, probar los resultados en diferentes redes sociales y dispositivos hemos querido elaborar este artículo con nuestras conclusiones y un caso práctico que funciona en Whatsapp, Twitter, Facebook y SMS.

Es posible que en unos años o incluso en tan solo unos meses las redes sociales intercambien información con el estándar Open Graph y se definan atributos específicos para cada red tal y como ha comenzado a hacer Twitter con sus <meta name=twitter:xxxxx> pero de momento esto no es así por lo que tendremos que llegar a un compromiso.

Atributos imprescindibles de Open Graph

Web ejemplo:   https://wondercool.eu

<head>
...
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Neveras inteligentes para hostelería" />
<meta property="og:description" content="Las bebidas más frías del mundo" />
<meta property="og:url" content="https://wondercool.eu/" />
<meta property="og:site_name" content="Wondercool | Neveras inteligentes" />
<!-- Para facebook, SMS -->
<meta property="og:image" content="https://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-1200x630.png" />
<meta property="og:image:secure_url" content="https://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Neveras para hostelería, Wondercool" />
<!-- Para twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Las bebidas más frías del mundo" />
<meta name="twitter:title" content="Neveras inteligentes para hostelería" />
<meta name="twitter:image" content="https://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-1024x512.png" />
<!-- Para whatsapp -->
<meta property="og:image" content="http://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-300x300.png" />
<meta property="og:image:secure_url" content="https://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-300x300.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
...
</head>

Caso práctico y las soluciones que hemos aplicado

No vamos a explicar el significado de cada atributo del protocolo Open Graph, esta información está detallada en la web oficial pero si os vamos a contar que es lo que hemos hecho para conseguir tener diferentes descripciones e imágenes en las diferentes redes sociales adaptándose a sus configuraciones de tamaño de imagen.

Facebook: Emplea las etiquetas og:image, og:image_secure_url, og:image:width y og:image:height entre otras muchas. La imagen recomendada a fecha de hoy es de 1200px * 630px. Relación de aspecto: 1.9 : 1

Aquí llega el primer problema

SMS: usa las mismas etiquetas que facebook pero su relación de aspecto al mostrarse en los móviles es aproximadamente: 2.46 : 1

Twitter: Emplea la etiqueta twitter:image. La imagen recomendada es de 1024px * 512px. Relación de aspecto:  2 : 1

Y aquí tenemos el segundo problema

Whatsapp: también usa las etiquetas que emplea facebook pero hemos introducido un sencillo truco. Si hay más de una propiedad <meta property> repetida toma en consideración el último valor. No deberíamos emplear o repetir la misma <meta property> pero funciona. Sin embargo facebook toma en consideración el primero. De esta forma hemos repetido las etiquetas <meta property og:image…> dentro de la cabecera de la web <head>…</head> y solucionado el problema.

Los tamaños recomendados para whatsapp parten de un mínimo de 200px * 200px y pese a la mucha documentación encontrada en internet a nosotros lo que nos funciona son imágenes rectangulares con 300px * 300px tal y como podeis ver en el código de arriba.

Otro punto importante es el formato. Aquí también hay algo de lio. Formato .jpg o .jpeg o .png.  El formato .jpg y .jpeg teoricamente es igual o al menos 100% compatible. El motivo de emplear 3 o 4 letras es histórico y tiene que ver con los antiguos sistemas operativos windows y ms-dos y su limitación a 3 caracteres por extensión. Pero para evitar problemas nosotros hemos optado por el formato .png definiéndolo en la propiedad:

<meta property="og:image:type" content="image/png">

Con imágenes

Hemos visto como somos capaces de crear una imagen diferente para Whatsapp con solo repetir la <meta property=….> y asegurarnos que se carga la última. En la mayoría de los casos trabajando con WordPress no hay que hacer nada. Si por ejemplo empleamos el complemento Yoast by SEO y configuramos las imágenes y textos para Facebook y Twitter este código se inyectará en la parte superior de <head>…</head>.

Después introduciendo manualmente el resto de entradas <meta property=…> en la zona que cualquier plantilla actual nos permite, como es el caso de Divi para WordPress o Sandal para Joomla vemos que estas propiedades se cargan más tarde. Solucionado.

¿Como vemos que <meta properties> están cargados y en que orden?

En cualquier navegador pulsando la tecla F12 nos aparece la ventana con todo el código HTML y estilos CSS que han sido enviados por el servidor web para interpretarse por nuestro navegador.

Open Graph Protocol - meta properties

¿Pero que tamaño de imagen hemos empleado al final para que se vea bien en Facebook y en un SMS?

Solo hemos usado un tamaño de imagen 1200px * 630px pero «no hemos aprovechado todo el alto de la misma, solo la relación 2.46:1 que nos viene limitada por como se muestran los SMS». Veámoslo con un ejemplo gráfico:

Es decir, subiremos a nuestra web una imagen de 1200px * 630px tal y como recomienda Facebook pero nuestro dibujo, nuestra zona de trabajo debe ser de 1200px * 487px y centrada en altura.

Esta es nuestra solución que a fecha de hoy ha sido probada y comprobada pero lo cierto es que las redes sociales evolucionan continuamente y su código interno también así que lo que hoy es válido puede que en unos meses ya no lo sea; no hay problema PRODISNET también  evolucionará con ellas.

Categorías: CSS y HTML