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.
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 "video" 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, si dentro del contenido hemos añadido un video 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:
