Open Graph: Aumenta el engagement y el tráfico hacia tu web

¿Alguna vez has publicado un enlace en tus redes sociales, y el contenido no se ha mostrado de la manera que esperabas? 

Si esto te ha ocurrido, entonces necesitas optimizar las etiquetas Open Graph de tu web. Estas etiquetas le indican a las redes sociales cómo debe mostrarse tu post al momento de pegar el enlace. 

Mostrar la información de la manera correcta puede aumentar potencialmente el engagement de la publicación y el tráfico que va hacia tu web. 

Quédate hasta el final y hablemos todo sobre las etiquetas Open Graph de Facebook y sus variaciones en otras redes sociales. 

¿Qué son las etiquetas open graph?

Open Graph es el nombre que reciben unas metaetiquetas creadas por Facebook que permiten mostrar en un formato enriquecido la información más importante de una página. A través de estos metadatos, se mostrará el título, la descripción y la imagen del enlace que compartas en las redes sociales. 

El protocolo Open Graph fue introducido por Facebook en 2010 para que los usuarios pudieran compartir sus enlaces de una manera más sencilla. 

Desde entonces, Twitter y LinkedIn han seguido el mismo método para mejorar la experiencia de usuario. Pero en el caso de Twitter, se ha creado un protocolo propio y diferente a Open Graph para controlar cómo se muestran los enlaces. Las demás redes sociales han adoptado el protocolo Open Graph. 

¿Para qué sirven las Open Graph?

Las metaetiquetas Open Graph nos permiten controlar la manera en que se muestran nuestros enlaces al colocarlos en las redes sociales. De esta manera, podemos mostrar estratégicamente el contenido para que los usuarios hagan clic y así aumentar el tráfico a nuestra web. 

Antes de que existiera este protocolo, la información se mostraba de manera aleatoria: Facebook tomaba cualquier imagen, título o descripción para colocar en el formato. Sin embargo, ahora que podemos controlarlo, podemos colocar la imagen de mejor calidad, así como el título y la descripción que mejor enganche a los usuarios. 

Además, está demostrado que estas etiquetas pueden aumentar considerablemente el engagement de tus publicaciones y potenciar su viralidad. 

¿Cuáles son las etiquetas Open Graph y cómo utilizarlas? 

En total, existen 17 etiquetas Open Graph según la documentación oficial de Facebook. Sin embargo, no todas se utilizan o son igual de importantes. 

En esta lista, te mencionaremos las 6 etiquetas Open Graph más importantes al momento de publicar un enlace en redes sociales: 

og: title

Esta etiqueta indica al buscador cuál es el contenido principal de la página: es decir, el tema principal. Este es el título principal en negrita que aparecerá en las redes sociales al publicar el enlace. Idealmente, no debería sobrepasar los 67 caracteres.

<meta property=”og:title” content=”¿Qué son las etiquetas Open Graph y cómo utilizarlas?”/>

og:description

Muy similar a la meta description, esta etiqueta ofrece una descripción o un resumen del contenido de la web. Es el lugar perfecto para enganchar a los lectores e incluir un CTA. No debe ser mayor a 155 a 160 caracteres. 

 <meta property=”og:description” content=”¿Te gustaría saber cómo se ve el contenido de tu web que publicas en redes sociales? Entonces haz clic aquí para aprender más sobre las Open Graph”/>

og:image

Esta es una de las etiquetas más importantes al momento de publicar en redes sociales. Si no especificas la imagen que quieres mostrar, puede aparecer cualquier imagen, incluso la imagen del autor. Facebook, LinkedIn, Google News y otras redes sociales tomarán esta etiqueta como referencia. 

Colocar la imagen adecuada puede potenciar el engagement de tu publicación de maneras en que no te lo imaginas: 

 <meta property=”og:image” content=”https://www.thepowermba.com/es/wp-content/uploads/2023/07/Click-Bait_-co%CC%81mo-crear-contenido-atractivo-sin-comprometer-la-calidad.jpg” />

og:type

Esta etiqueta le indica a las redes sociales y a los buscadores en qué consiste el contenido del enlace: si es un video, un artículo, un post del blog, etc. 

<meta property=”og:type” content=”article” />

og:url

Aquí tenemos que mostrar el enlace de la página web completo o de manera acortada con un acortador de links. 

<meta property=”og:url” content=”https://www.thepowermba.com/” />

og:video

Es la etiqueta que debes utilizar si tienes algún video en la página. Este es un ejemplo de cómo utilizarlo: 

<meta property=»og:video» content=»http://example.com/ejemplo.mp4» />

Twitter Cards y cómo utilizarlas

Las Open Graph se utilizan para todas las redes sociales, con la única excepción de Twitter que ha creado sus propias etiquetas para controlar el contenido que se muestra en su propia red social. 

Se conocen como Twitter cards y su funcionamiento es similar a las Open Graph. Notarás que no son muy diferentes entre sí. 

twitter:card

Su propósito principal es mostrar en qué consiste el contenido que se está compartiendo. Tiene la misma función que og:type. Tiene muchas opciones disponibles: photo, video, product, summary, app, gallery y large version summary. 

El summary card es la etiqueta que tiene mejores resultados, es la que tendrás que utilizar con más frecuencia. Nos da un resumen acerca del artículo con una imagen principal grande, un título y una descripción. 

<meta name=”twitter:card” content=”summary” />

twitter:title

Cumple la misma función que og:title y nos permite escribir hasta 70 caracteres. Es una buena oportunidad para atraer tráfico desde Twitter. Así que hay que colocar títulos potentes que impacten en los usuarios. 

<meta name=”twitter:title” content=”Aprende a usar las Twitter Card para tus post en Twiter” />

twitter:description

Ofrece una descripción corta de hasta 200 caracteres para persuadir al usuario a hacer clic en el artículo e ir a tu página web. Es una excelente oportunidad para hacer un copy convincente y persuasivo. 

Nos ofrece unos 40 caracteres adicionales a og:description. ¡Más espacio para escribir mensajes persuasivos! 

<meta name=”twitter:description” content=”Las palabras tienen poder. Esto es lo que tienes que aplicar si quieres escribir copys persuasivos” />

twitter:image

Es la etiqueta que determina qué imagen aparecerá en el tweet. Sin embargo, para que las imágenes aparezcan en Twitter estas deben tener una dimensión de 1.024 px por 512 px. 

<meta name=”twitter:image” content=”http://www.thepowermba.com /nombre-de-la-imagen.jpg” />

Open Graph: ¿influyen de alguna manera en el SEO?

El Open Graph no afecta al SEO de tu sitio web, por lo menos no directamente. Pues son etiquetas que funcionan meramente para optimizar el formato con que aparecen en las redes sociales. 

Sin embargo, también es cierto que optimizar el Open Graph es clave para tu estrategia SEO, y más si parte de tu estrategia es utilizar las redes sociales para aumentar el tráfico de tu web. 

El Open Graph es para las redes sociales lo que los datos estructurados son para los buscadores. Ambos indican el tipo de contenido que tiene una página y cómo se debe mostrar. 

La principal diferencia es que el Open Graph se muestra en las redes sociales, mientras que los datos estructurados en la SERP. 

Idealmente, una página debería contener ambos tipos de etiquetas. Así nos aseguraremos de mejorar el SEO como también de aumentar el engagement de la publicación. 

Cómo optimizar las open graph en WordPress

Si utilizas un CMS como WordPress, gestionar las Open Graph es un juego de niños. Plugins como Rank Math y Yoast SEO tienen una sección completa para que puedas configurar completamente cómo se verá la miniatura de la página al publicarla en Facebook y Twitter. 

Ahora bien, ¿qué pasa si tu página está construida en otro CMS que no es WordPress, como Prestashop o Drupal? Siendo así, tendrás que buscar algún plugins que realice la misma función que los que te hemos mencionado anteriormente. 

En caso de que no estés utilizando ningún CMS, sino un entorno propio, recuerda que siempre debes incluir el Open Graph dentro de la etiqueta <head> y posterior a la etiqueta <title>. 

Las mejores herramientas para comprobar el uso de etiquetas

Si quieres ir más seguro, te recomendamos utilizar algunas herramientas que te permitan comprobar el estado de las Open Graph en tu sitio web. 

Semrush Site Audit

El Site Audit de Semrush es una herramienta que te permitirá evaluar todo su sitio web para saber qué puedes mejorar a nivel SEO. Los informes también arrojan resultados relacionados al Open Graph. 

Una vez que hayas evaluado el sitio web busca los Informes de Marcado para tener una visión general. Si el porcentaje es alto, significa que los Open Graph están bien. De lo contrario, significa que tienes que mejorarlo. 

Facebook Debugger

Facebook Debugger es la herramienta de Facebook con la cual podrás ver cómo se verán los enlaces que compartas en la red social. La herramienta también te arrojará algunas alertas para indicar qué puedes mejorar. 

Twitter Card Validator

Si quieres estar seguro de que el artículo que estás publicando en Twitter está OK, puedes utilizar la herramienta propia de Twitter: Twitter Card Validator. 

Actualmente, ya no puedes ver una card preview, en cambio, te dará un pequeño informe en el que te indicará si las Card Twitter están siendo utilizadas correctamente. 

Google Structured Data 

Y como era de esperarse, Google también cuenta con su propia herramienta para verificar el marcado de un sitio web: Google Structured Data.  De esa manera, podrás comprobar si todos los datos estructurados están siendo utilizados de manera correcta.

Mejora la visualización de tus post en redes sociales con Open Graph

Las etiquetas Open Graph nos permiten controlar la información cuando publicamos un enlace en un post. Optimizalas adecuadamente y verás cómo aumenta el engagement de tus publicaciones y el tráfico que llega a tu web. 

Y hasta aquí hemos llegado con este post de Open Graph. Si te ha gustado, no te vayas sin compartirlo.