Open Graph

Seguro que has compartido alguna vez un enlace de alguna canción, video o entrada de blog en algún entorno social… Pongamos como ejemplo que estás compartiendo una playlist en una red social, pero al compartirlo te das cuenta de que hay algo raro en la información que se muestra:

• El título del enlace no es el mismo.
• La imagen no tiene que ver con la playlist que has enviado (por ejemplo aparece el logo).
• En vez de mostrarte la descripción de la playlist te muestra la de la página de inicio de la plataforma.

Esto se debe a que las redes sociales extraen y muestran el contenido de las URL de forma automatizada. Y hay ocasiones en las que, si no indicas expresamente qué quieres que aparezca, no muestran lo que realmente nos interesa como usuarios.

Ejemplo visual

Ejemplo HTML

<meta property="og:type" content="article" /> <meta property="og:title" content="Título del artículo" /> <meta property="og:url" content="https://miweb.com/articulo" /> <meta property="og:image" content="https://miweb.com/imagen.jpg" /> <meta property="og:description" content="Descripción de tu contenido" />

Uso Open Graph

Cuidar tus publicaciones (línea editorial) es fundamental si quieres construir una marca consistente en todos los canales. Al igual que lo haces para Google mediante etiquetas de título y descripción o schemas que te permitan obtener Rich Snippets, cuando publicas en tus redes sociales, tienes la posibilidad de modificar manualmente «cómo» se muestra dicho post. Por suerte, no siempre eres tú quien comparte tus publicaciones.

Cualquier usuario puede re-publicar y hacer un enlace a tu contenido desde sus canales. Para estos casos es útil Open Graph, ya que posibilita definir de antemano qué y cómo van a publicar esos usuarios. Evitas tener que revisar el contenido cada vez que alguien lo comparte. Y no son difíciles de insertar. Actualmente hay plugins que facilitan la inserción de las etiquetas, ahorras tiempo y permiten verificar si están bien insertadas o no.

Si una publicación no se muestra correctamente, tienes un problema. Es un fallo de comunicación entre los sitios web o blogs, con las redes sociales o aplicaciones de mensajería que se utilizan para compartir contenido.

Lo que está ocurriendo:

Cuando pegas una URL en un medio social (Facebook, Twitter, Instagram…), este, accede al contenido para extraer suficiente información para poder renderizar un snippet enriquecido con título, descripción, imagen y URL a sus usuarios.

Al extraer los metadatos que contiene el contenido enlazado, estas redes sociales y apps de mensajería, son capaces de mostrar un snippet, una vista previa del contenido que hay tras ese enlace. Pero sin Open Graph, esta operación no la hace correctamente.

La importancia de usar Open Graph

Ya sabes que el contenido es el rey y que el contenido audiovisual es el que más claim genera. Los datos lo avalan.

• En Facebook la cifra de Likes se incrementa hasta el 63% más en los post con contenido audiovisual.
• Las publicaciones en Facebook con imágenes o vídeos tienen un alcance de hasta 2.3 veces más.
• En Instagram, las fotos con rostros consiguen 38% más likes que las que no muestran personas.
• 62% de los jóvenes usan Instagram y cerca del 41% Snapchat (redes con alto contenido visual).
• En Twitter las publicaciones con imagen tienen un 40% más de Likes.
• Los Tweets CON imágenes obtienen aproximadamente un 150% más retweets que los que no tienen imagen.
• 46% de los marketeros han indicado que la fotografía es un elemento importante en sus estrategias de contenidos.
• 43% de los creadores de contenidos utilizan las infografías, imágenes y vídeos como su principal herramienta en el plan de marketing.

Los post atractivos generan más clics, interacciones y tráfico, por lo que estos datos lo que reflejan es que el enriquecimiento con etiquetas de Open Graph son más que importantes.

Tipos de elementos y etiquetas Open Graph

Las metaetiquetas de Open Graph te ayudan a compartir contenido en diferentes formatos. No obstante, dentro del protocolo Open Graph tienes una gran variedad de etiquetas. El objetivo final es etiquetar contenido a fin de mejorar la visibilidad de dicha URL una vez compartida. Para lograrlo hay algunas etiquetas consideradas imprescindibles.

Imágenes

Gracias a las metaetiquetas Open Graph de imagen podrás controlar qué imagen se comparte, el tamaño, la anchura e incluso asignarle un texto alternativo (alt=»mi keyword») que ayude a su posicionamiento.

Og:image

Esta etiqueta se usa para indicar qué imagen se quiere mostrar. Es necesario incluir la URL de la imagen para asociarla a la entrada de blog y así mostrarla junto al texto elegido cuando se comparta en redes social. Por eso es un buen método para controlar la imagen que se muestra cuando se comparte contenido.

<meta property="ogimage" content="la URL de nuestra imagen"/>

Textos

Con Open Graph podrás añadir el contenido de texto que quieres que se muestre específicamente, incluyendo iconos y todo tipo de símbolos, además de usar palabras clave para que aparezcan cuando se realicen búsquedas en las redes sociales. De este modo, se mejora y facilita la atracción de clientes y la visibilidad de tu contenido.

Og:title

Esta etiqueta se utiliza para indicar el título de la url, y como tal, debe ser claro y tener como máximo 95 caracteres.

<meta property="ogimage" content="el título de nuestro artículo"/>

Og:description

Esta metaetiqueta incluye una breve descripción del contenido relacionado con la URL a compartir (extracto). Es el texto que quieres que aparezca cuando se comparta el contenido. En él, puedes incluir palabras clave que ayudarán al posicionamiento de esa URL específica. La recomendación es que no supere las cuatro líneas.

<meta property="ogdescription" content="el texto a compartir"/>

Vídeos

A la hora de compartir videos, los factores principales a controlar son la anchura y la altura con los que quieras mostrar la miniatura. Además del tamaño, se pueden etiquetar: la temática de vídeo, el formato y el autor del mismo. Hay evidencias de que usar etiquetado Open Graph potencia el número clics de reproducción.

Og:type

Con esta metaetiqueta, se indica la tipología de contenido queq se va a compartir: una noticia, un vídeo, un podcast, un artículo de un blog… Ayuda a las redes a diferenciar entre tipos de contenidos, facilitando cargar esos contenidos de manera adecuada en cada caso.

<meta property="ogtype" content="vídeo"/>

Canciones, playlists y podcast

Para compartir contenido de audio como pueden ser canciones, playlists o podcast, Open Graph facilita etiquetado específico para indicar el nombre de la canción y el autor, así como su duración o la fecha de lanzamiento. Toda esta información adicional permite a la tus seguidores encontrar el contenido de forma rápida. Sin duda algo a tener en cuenta.

Og:type

Como en el caso de los vídeos, la etiqueta «Type», ayuda a diferenciar qué tipo de contenido se comparte: en el caso de las playlist y podcast, este etiquetado destaca por dar mucha información del contenido publicado.

<meta property="ogtype" content="audio"/>

Sitios web, URL y datos de localización

También se pueden etiquetar sitios web, especificando la URL, el nombre de la empresa y la situación geográfica. Es algo a tener en cuenta si tienes un negocio local. Si además eres activo en redes compartiendo contenido y dinamizando tu comunidad, te ayudará mucho en este trabajo de viralización de contenido atractivo. Es una manera de atraer clientes y darte a conocer en tu zona.

Og:url

Esta tag se utiliza para indicar la URL de la publicación que se va a compartir, bien sea una página, un vídeo o cualquier otra opción. Es una metaetiqueta de mucha ayuda, pues al incluirla en el contenido a publicar, puede evitar errores de URL que puedas tener.

<meta property="ogurl" content="URL de la página a compartir"/>

Og:site_name

La etiqueta «site» se utiliza para indicar el nombre de nuestro sitio web, de modo que aparezca en la publicación ayudando a fomentar la marca.

<meta property="ogsite_name" content="zeromoment"/>

Cómo comprobar la correcta implementación de Open Graph en tu web

Verificación de Open Graph

Open Graph, como protocolo, incluye una serie de pautas a seguir para poder ser correctamente interpretado por los diferentes medios sociales. Hablemos de Facebook Open Graph. Para ayudarte en esta tarea, la red conocida red social cuenta con Facebook Developer Open Graph Test que te permite verificar si has utilizado Open Graph de forma correcta o si hay algún error que evite que tus snippets se vean bien en las diferentes plataformas sociales.

Si quieres utilizar herramientas externas a cualquier red social para hacer la comprobación del Facebook Open Graph, puedes buscar alguna de las múltiples herramientas alternativas de comprobación de Open Graph disponibles en internet. Al introducir cualquier URL, hará la comprobación y te mostrará, en una imagen como la siguiente, si todo ha ido bien o si tienes algo para corregir.

Si necesitas ver cómo se verá tu publicación en redes sociales, puedes utilizar una extensión de Chrome que te mostrará una previsualización del Open Gaph de la URL que le indiques.

Vista previa:

Conclusiones

El uso de Open Graph en tu sitio web o blog te ayudará a:

• Aumentar el engagement de tus publicaciones.
• Posibilidad de protocolizar una línea editorial.
• Mejora de cara a posicionamiento SEO en Google.
• En caso de realizar campañas Social Ads, aumenta el CTR.
• Automatizar cómo se ven tus publicaciones. Comparta quien comparta.
• Aumento del Lead Magnet de tus posts.
• Facilita el control de errores en la publicación.

¿Tu web no se comunica con tus redes correctamente?

Si tu web no tiene etiquetas Open Graph, tus redes no entenderán correctamente este contenido. Un buen entendimiento entre ambos canales es indispensable para que tus publicaciones sean atractivas y contengan más Lead Magnet (capacidad de atracción). No cabe duda de que las etiquetas Open Graph ayudan a controlar cómo se publica tu contenido en redes aumentando así las posibilidades de que se generen visitas de calidad.

Si estás perdiendo la posibilidad hacer destacar tus post en redes por ausencia de Open Graph y no sabes cómo introducirlos, o no sabes si tu proyecto está preparado para ello, no dudes en ponerte en contacto con nosotros.

Si necesitas ayuda, o tienes dudas…