Open Graph
¿Qué es Open Graph?
Open Graph es un protocolo de Internet desarrollado originalmente por Facebook para estandarizar el uso de metadatos dentro de una página web que ayuden a representar el contenido de una página.
En esta metainformación podemos indicar aspectos tan simples como el título de una página o tan específicos como la duración de un vídeo. De esta forma, ayudamos a plataformas como Facebook o Twitter a ofrecer mayor información sobre lo que trata nuestra página web al compartirla.
¿Por qué nos interesa el protocolo Open Graph?
Desarrollar contenido en Internet tiene, como mínimo, un objetivo, que es el de compartirlo con otros internautas. Al quererlo hacer en las redes sociales, el Open Graph nos ayuda a compartir más información fácilmente: título, imagen que representa el post, enlace a él a través de una vista previa. Al hacerlo más atractivo ganamos mayor visibilidad y posiblemente viralidad.
Es uno de esos detalles que no se ven hasta que fallan: una web sin Open Graph bien configurado se comparte con una vista previa rota o vacía, por muy cuidada que esté por dentro. Por eso forma parte de la lista de comprobación con la que damos por cerrado un proyecto de diseño y desarrollo web.
Etiquetas básicas de Open Graph
Las cuatro etiquetas básicas que debemos incorporar en cada página son:
- og:title, el título de la página. Habitualmente es la misma que utilizamos para la etiqueta <title>, básica para tener un buen SEO, pero podría tener otro texto sin problemas.
- og:type, hay diversos tipos de "websites" el tipo genérico es "website". Pero puede adoptar otros formatos, como el de "vídeo" o "article" para un post de un blog. Aquí tienes las tipologías más comunes.
- og:image, la imagen que representa el contenido.
- og:url, la URL para llegar a la página.
Estas etiquetas deben ser únicas para cada página que tenemos, lo que significa que las etiquetas de tu página de inicio deben ser todas diferentes de la página del artículo de la entrada de su blog.
Estas etiquetas van dentro de la etiqueta <head> de nuestro sitio web junto con otras etiquetas de metainformación que también se pueden incorporar.
El formato que suelen adoptar es este:
<meta property="[NAME]" content="[VALUE]" />;
Otras etiquetas habituales en Open Graph son:
- og:video (sin tilde, que es un identificador y no una palabra en castellano), si dentro del contenido hemos añadido un vídeo relevante puede ser muy interesante añadir un enlace a él
- og:locale, nos sirve para señalar el idioma y el país.
- site_name, el nombre.
- og:description, posiblemente el mismo que utilizamos para la descripción de nuestra página web para buscadores, aunque no tiene por qué ser igual.
Twitter dispone de una extensión para este protocolo que son las Twitter Cards, en las que encontramos tipos como: summary, summary_large_image, app y player.
Si quieres conocer mejor el uso por cada red social aquí tienes la referencia de documentación de cada una:
Para testear la visualización de las etiquetas Open Graph tienes servicios para ayudarte a hacer un debug:
La imagen: medidas concretas
og:image es la etiqueta que más se descuida y la que más se nota, porque es lo primero que ve quien recibe el enlace. Facebook publica sus recomendaciones y conviene seguirlas:
| Medida | |
|---|---|
| Recomendado | 1200 × 630 px |
| Mínimo para vista previa grande | 600 × 315 px |
| Mínimo absoluto | 200 × 200 px |
| Proporción | 1,91:1 |
| Peso máximo | 8 MB |
Por debajo de 600 × 315 la imagen deja de mostrarse a tamaño grande y pasa a aparecer como una miniatura junto al texto, que llama muchísimo menos la atención. Y la proporción importa tanto como el tamaño: si tu imagen es cuadrada o vertical, se recortará, y ahí es donde acaban decapitados los logotipos y cortados los titulares.
El problema que se lleva por delante la mitad de las correcciones
Aquí está lo que casi nadie cuenta y explica una situación de lo más frustrante: corriges las etiquetas, vuelves a compartir el enlace y sigue saliendo la vista previa antigua.
No es un fallo tuyo. Facebook guarda en caché la imagen asociada a cada URL, y su propia documentación es tajante al respecto: si quieres cambiar la imagen, lo que hay que hacer es usar una URL de imagen nueva. Sustituir el archivo dejando la misma dirección no propaga el cambio.
Tienes por tanto dos salidas cuando la vista previa se queda anticuada:
- Cambiar el nombre del archivo de la imagen y apuntar
og:imagea la nueva dirección. Es lo más fiable. - Forzar una nueva lectura con el depurador de contenido compartido de Facebook, que vuelve a rastrear la página en el momento. Otras plataformas tienen su equivalente.
Y un truco poco conocido para la primera vez
Habrás notado que la primera vez que se comparte un enlace nuevo a veces no sale la imagen, y sí aparece a partir de la segunda. Ocurre porque el rastreador todavía no la ha procesado cuando se genera la vista previa.
Tiene solución, y está en la propia documentación de Facebook: declarar también og:image:width y og:image:height. Con las medidas indicadas de antemano, el rastreador puede componer la vista previa de inmediato sin esperar a descargar la imagen. Son dos líneas que evitan que el primer envío, que suele ser el importante, salga soso.