El protocolo Open Graph (OG) es un conjunto de meta etiquetas que nos permiten personalizar la información que va a mostrarse tanto en el momento que nuestro sitio sea compartido a través de redes sociales, como en los resultados de diferentes motores de búsqueda. Puedes ver el resultado de esto copiando la URL de tu sitio en alguna red social (Facebook, Twitter, Google+, etc).
Las meta etiquetas se incluyen en la sección <head> de la página (la información que está incluida en esta sección no se visualiza en el navegador) y siguen el formato:
<meta property="og:nombre_metadato" content="contenido_metadato" />
Contamos con un grupo de metadatos básicos que debemos incluir:
og:title: El título que debería aparecer.
og:type: El tipo de objeto que la pagina web representa, por ejemplo, "article", "profile", etc. Dependiendo del tipo que especifique, también pueden requerirse otras propiedades.
og:image: La imagen que debe aparecer dentro del gráfico. La URL debe ser absoluta, incluyendo el protocolo ("http://" o "https://"). Se puede utilizar cualquier formato de imagen estándar, como jpg, png o gif. No hay una convención respecto al tamaño de la imagen y su relación de aspecto, pero la recomendación en general es que sean de 1200px por 1200px. Sin embargo una buena practica es identificar anticipadamente las redes sociales que más nos interesen y a partir de allí crear una imagen que se vea bien en todas. Por ejemplo, para Facebook podemos ver la recomendación desde aquí.
og:url: La URL canónica que se utilizará como su ID permanente en el gráfico, por ejemplo, "https://www.front.id".
Existen varias opciones acordes a nuestras necesidades. Podemos personalizar no solo el aspecto de nuestro sitio, sino también de alguna sección, campaña, libro, producto, etc, dentro del mismo.
Este es el ejemplo de un libro compartido:
Y este ejemplo de la implementación de las etiquetas básicas:
<head>
<meta property="og:type" content="website">
<meta property="og:title" content="The complete development plugin for your agency">
<meta property="og:url" content="https://front.id">
<meta property="og:image" content="http://front.id/themes/og-twitter.jpg">
</head>
Aunque Twitter es una más de las tantas plataformas que ha adoptado Open Graph, también ha dado un paso adelante para extender la personalización que queremos dar a la información que deseamos compartir, a través de su marcado propietario llamado Twitter Cards. Como indica en su Documentación oficial, las etiquetas de las tarjetas de Twitter son similares a las etiquetas de Open Graph, y se basan en las mismas convenciones , pero el formato de los metadatos varia ligeramente:
<meta name="twitter:nombre_metadato" content="contenido_metadato">
Cuando el procesador de tarjetas Twitter busca etiquetas en una página, primero busca la propiedad específica de Twitter y, si no está presente, devuelve la propiedad Open Graph compatible, esto evita código duplicado.
Summary Card: Título, descripción y miniatura.
Summary Card with Large Image: Similar a la Summary card pero con imagen mas grande.
App Card: Permite incluir la descarga directa de una aplicación móvil.
Player Card: Permite mostrar video/audio/media.
Para conocer todas las opciones que disponemos de Open Graph y lograr los resultados mas complejos, podemos consultar la Documentación oficial.
Practico generador online: The Ultimate Open Graph Generator.
Facebook: Facebook Sharing Debugger.
Twitter: Card validator.
Colaborador oficial
del programa:
Recursos para pymes
y autónomos
frente
al COVID-19
Add new comment