Qué es el Open Graph

Para entender qué es Open Graph es preciso llegar a una de las verdades básicas del marketing digital: la necesidad de hacer contenidos que logren una atención mayor en la esfera digital y sean más compartidos en redes sociales. Porque esto es precisamente lo que facilita Open Graph.

Inicialmente una herramienta desarrollada por Facebook, hoy en día es uno de los elementos clave para ajustar los posts que se hacen en redes sociales pertenecientes a Meta o X (anteriormente Twitter). Por ello, quienes buscan cómo mejorar su presencia en redes sociales hacen bien en poner el foco en saber qué es Open Graph y cómo activarlo. Te lo contamos.

¿Qué son las etiquetas Open Graph?

El término Open Graph se refiere a las metaetiquetas (pequeños bloques de código) que permiten controlar cómo se muestran las URLs y sus elementos principales (por ejemplo, las imágenes que acompañan a un blog post) cuando son compartidas en redes sociales. 

Clave en redes como Facebook, X (anteriormente Twitter) o LinkedIn, en el código de un sitio web se identifican por llevar la etiqueta og:

Así, se ocupan de señalar a las redes sociales qué contenidos y elementos están presentes en la página, y cuáles debe mostrar cuando se comparta la URL. Las etiquetas Open Graph son, por tanto, responsables de mostrar el título completo de una página o una imagen preview adecuada al ser incorporados como enlace en una red social. De este modo, permite una integración de datos entre el sitio web y la red social, haciendo que el contenido se muestre más atractivo y claro para los usuarios.

¿Por qué es importante implementar Open Graph?

En general, las etiquetas Open Graph mejoran la experiencia de usuario que se encuentra con un contenido en redes sociales porque permiten hacer que el contenido sea más atractivo y dar más información sobre el mismo. En pocas palabras, las etiquetas Open Graph permiten generar contenidos enriquecidos al adjuntar imagen, vídeo y otros detalles que se desee.

Hoy en día, las redes sociales son una de las principales fuentes de tráfico para cualquier sitio web. Solo Facebook ya cuenta con 3.000 millones de usuarios, cifra a la que es preciso añadir el alcance de otras redes en las que también operan las etiquetas Open Graph.

Por lo tanto, resultan imprescindibles para lograr un mayor número de clics en el link, otorgando un extra de confianza ya que los usuarios saben más sobre él.

Igualmente, ya que preparan el contenido para ser compartido en redes de forma correcta, supone un ahorro de tiempo a la hora de incorporarlo a este tipo de plataformas.

Cómo usar Open Graph

Existe un total de 17 etiquetas vinculadas a Open Graph, pero vamos a desgranar las 5 más importantes: 

• og:title. Se refiere al título de la página que va a mostrarse al ser compartida en redes. La sintaxis es la siguiente <meta property="og:title" content="aquí se inserta el título deseado" />

• og:url. La URL que va a mostrarse, con la siguiente sintaxis: <meta property="og:url" content="se incluye aquí la URL" />

• og:image. La imagen que se va a mostrar como preview del contenido, con la siguiente sintaxis: <meta property="og:image" content="aquí la URL de la imagen" />

• og:type. Indica el tipo de objeto que se comparte (por ejemplo, “article”, “website”), con la siguiente sintaxis: <meta property="og:type" content="article" />

• og:description. Breve descripción del contenido como muestra para los usuarios de redes, con la siguiente sintaxis: <meta property="og:description" content="se introduce aquí la descripción" />

Acabamos de definir las principales etiquetas de Open Graph Facebook, pero es preciso saber que también existen etiquetas específicas Open Graph en X (anteriormente Twitter). En cualquier caso, las que hemos detallado son también útiles para otras redes sociales, como LinkedIn o WhatsApp.

Además, para incorporar las etiquetas, añádelas al código HTML de la sección “head” de tu página web. Igualmente, existen plugins específicos para añadirlas.

Herramientas para comprobar las etiquetas Open Graph

Facebook Debugger

Descrito en castellano como “depurador de contenido compartido” por la propia plataforma, se trata de una herramienta para previsualizar cómo quedará el contenido que compartas en Facebook. Por lo tanto, es útil para comprobar si se han implementado las etiquetas Open Graph de forma correcta

X (anteriormente Twitter) Card Validator

Al igual que Facebook Debugger, esta herramienta permite previsualizar el aspecto que tendrá un link al ser compartido, en este caso en X (anteriormente Twitter).