Insights

Etiquetas Open Graph: qué son y cómo usarlas en tus páginas web

En España se estima que aproximadamente unos 37 millones de personas usan a diario alguna red social, lo que equivale al 80% de la población. Con estas cifras, promocionar tu web en ellas hará que aumente tu tráfico y supondrá un estupendo escaparate para tu negocio. Pero no solo es importante lo que compartes en ellas, sino el modo en el que lo haces y, sobre todo, el modo el que lo hacen otros usuarios. Tú puedes controlar todo lo que publicas en tus redes, pero ¿sabes que también puedes controlar el cierto modo las publicaciones de los demás cuando comparten contenido de tu site? Esto se consigue mediante las etiquetas OG.

¿Pero qué son las etiquetas OG? Cuando tú o algunos de tus usuarios compartís la URL de alguna de las páginas de tu site a través de alguna red social o de alguna plataforma de mensajería, verás que esta se convierte automáticamente en una tarjeta. Esto es lo que llamamos un OG object, o una tarjeta OG. Mira estos ejemplos extraídos de LinkedIn, Twitter, Facebook, WhatsApp o Slack:

Etiquetas Open Graph: qué son y cómo usarlas en tus páginas web

El nombre de ‘OG’ viene de ‘Open Graph Protocol’, un formato creado por Facebook en 2010 con el objetivo de controlar el modo en el que se compartían enlaces en su plataforma y que actualmente —salvo para Twitter— sirve como estándar para la mayoría de redes sociales. Este protocolo consiste en incluir en el código de las páginas web una serie de metaetiquetas llamadas etiquetas OG. De ellas es de donde las redes sociales obtendrán toda la información que aparece en estas tarjetas: título, foto, descripción…

¿Por qué es bueno usar etiquetas OG?

Si tus páginas no disponen de etiquetas OG, la red social o plataforma de mensajería donde compartar contenidos buscará la información que necesite para construir su tarjeta en otro lugar, cada una siguiendo sus propios criterios y dando como resultado una tarjeta que quizá no represente bien tu contenido. Y la apariencia de la tarjeta OG es fundamental, porque si consigues que transmita bien lo que quieres contar y lo haga de forma atractiva para tu público objetivo, más usuarios harán clic en las publicaciones y más veces la compartirán, trayendo así más tráfico a tu web. Por eso es tan importante dedicarle un pequeño esfuerzo.

¿Pero sabías que las etiquetas OG son también buenas para tu SEO? La optimización de las tarjetas OG incrementa el engagement de tus páginas y, si se comparten más a menudo en redes, Google suele interpretarlo como algo positivo a la hora de evaluar sus rankings.

¿Qué etiquetas OG hay que incluir en una página web?

Las etiquetas OG que toda página web debería incluir son og:title, og:description, og:image, og:url, og:locale, og:type y og:site_name. A continuación vamos a analizar cada una de las siete y vamos a dar una serie de recomendaciones sobre su uso.

og:title

El título condensa en pocas palabras un contenido y por eso es siempre un elemento importantísimo. Pero además de informar, la principal función de un título es despertar un interés en quien lo lea: puede ser una curiosidad, una emoción, un deseo, una necesidad, una conexión o un je ne sais quoi… Lo realmente importante aquí es conectar con el público, y esto no es nada sencillo: es sin duda una de las partes más complicadas del trabajo de todo copywriter y requiere conocer profundamente a tu audiencia.

Todas las redes sociales incluyen sin excepción un título en sus tarjetas OG. Lo hacen a partir de la etiqueta og:title. Si un buen título siempre debe ser lo más conciso posible, en el caso de los og:title este concepto cobra especial dimensión, ya que el número de caracteres de los que dispones es limitado. Facebook por ejemplo limita los títulos de sus tarjetas OG a 100 caracteres y Twitter los rebaja hasta los 70, cifras que comparadas con WhatsApp te parecerán elevadísimas, ya que la red de mensajería solo muestra 40 caracteres en sus títulos. Todas, eso sí, cortan el título y añaden al final unos puntos suspensivos cuando el contenido de la metaetiqueta alcanza el límite establecido por cada una de ellas. Por su parte, otras plataformas como LinkedIn o Slack no ponen ningún límite a sus títulos, aunque nuestro consejo es que nunca excedas los 70 caracteres.

La etiqueta og:title tiene su equivalente para Twitter en twitter:title, que es donde esta red social recurre a la hora de poner título a sus tarjetas sociales. No olvides incluirla siempre también.

Como ves, en esencia, la metaetiqueta og:title es bastante similar tanto en longitud como en función a la etiqueta title que toda página web debe incluir, pero no necesariamente el contenido de ambas etiquetas tiene que ser el mismo.

Etiquetas Open Graph: qué son y cómo usarlas en tus páginas web

og:description

La metaetiqueta og:description es el socio perfecto de og:title. La tarea de una descripción es la de complementar el trabajo del título, despertando el interés del usuario y su deseo de hacer clic sobre un enlace. Por lo tanto, el contenido de ambas metaetiquetas se debe planificar conjuntamente: lo que no hace uno, lo tiene que hacer el otro. Nunca se pisan, nunca repiten lo que ya ha dicho la otra, comparten una misma estrategia y siempre van de la mano.

Sin embargo, no todas las redes sociales incluyen una descripción en sus tarjetas: Facebook y LinkedIn por ejemplo no lo hacen. Otras —como Slack, Twitter o WhatsApp— sí, aunque de forma muy diferente: mientras Slack no pone límite a sus descripciones, Twitter las reduce a los primeros 200 caracteres y WhatsApp, a los 90 primeros. Lo aconsejable es mantenerla siempre entre 130 y 160 caracteres, una medida similar a la recomendada para la etiqueta description, aunque el contenido de ambas tampoco tienen que ser exactamente igual. Recuerda que debes incluir una descripción específica para Twitter mediante la etiqueta twitter:description.

Y un último consejo: no incluyas nunca la misma og:description en todas tus páginas.

og:image

Si habitualmente se dice que una imagen vale más que mil palabras, en el caso de las tarjetas OG esta afirmación es todavía más cierta. Y no solo porque la imagen es la gran protagonista de las tarjetas de la mayoría de plataformas, sino porque la rapidez con la que consumimos contenidos en Internet premia lo visualmente impactante. Solo si algo llama nuestra atención pasamos a una segunda fase en la que ya sí leemos los textos o hacemos clic sobre el enlace. Así que a la hora de escoger la imagen OG te conviene poner toda la carne en el asador.

Una buena imagen para tu tarjeta OG debe ser original y llamativa, pero a la vez debe representar correctamente la imagen de tu marca y crear una línea que dé consistencia a tus comunicaciones y que tu público asocie inmediatamente contigo. Y por supuesto debe ser representativa del contenido que el usuario se va a encontrar al otro lado del enlace.

La etiqueta que define las imágenes de tu tarjeta es og:image. Solo se puede utilizar una imagen para cada tarjeta OG, así que la que uses será la misma para LinkedIn, Facebook, WhatsApp, Slack… Para Twitter puedes usar una imagen propia usando la metaetiqueta twitter:image (no es obligatorio incluirla, ya que en caso de no usar esta etiqueta la red social recurre a og:image, como el resto, pero deberías hacerlo). Lo recomendable para Twitter es usar los formatos 2:1 (generalmente 600px de ancho por 300px de alto para tarjetas pequeñas y 1080 x 566 para tarjetas grandes) o 1:1 (450 x 450 para tarjetas pequeñas y 1080 x 1080 para las grandes). Para el resto de redes sociales no existe consenso. Los formatos apaisados funcionan mejor en ordenadores y portátiles, mientras que las imágenes cuadradas encajan mejor en móviles, así que elegir una u otra depende de ti y de cómo y dónde creas que tus usuarios van a compartir más tus contenidos. Si optas por una imagen apaisada lo recomendable es usar una relación de aspecto de 1.9:1 (generalmente 1200px de ancho por 627px de alto) mientras que si eliges el formato cuadrado las dimensiones que te recomendamos son 1200 x 1200.

Una técnica que usan algunas marcas es añadir texto o logotipos en las imágenes OG.

Por último, puedes añadir la etiqueta og:image:alt para incluir una descripción de tu imagen OG y, si además de una foto dispones de un vídeo que sintetiza tu contenido, lo recomendable es que añadas también la etiqueta og:video.

og:url

Todas las tarjetas OG muestran la URL del enlace al que dirigen, aunque la mayoría de ellas no muestran la URL completa, sino solo el dominio al que pertenecen. Pese a ello, en la etiqueta og:url debes añadir siempre la URL canónica de la página. La URL es importante porque identifica al autor y da información a los usuarios sobre dónde van a acabar si hacen clic sobre un enlace.

Una vez más, Twitter tiene también su propia metaetiqueta al respeto, llamada twitter:url.

og:site_name

Como ya hemos dicho, las etiquetas OG deben aplicarse específicamente en cada página. Por eso, para indicar que la página que estamos compartiendo pertenece a un site existe la etiqueta og:site_name. Twitter tiene una etiqueta similar a og:site_name llamada twitter:domain, pero en este caso ambas guardan una gran diferencia: mientras en el caso de la etiqueta genérica el contenido es el nombre del sitio web, en el caso de la etiqueta de Twitter se suele indicar la URL de la homepage de la web.

og:locale

La etiqueta og:locale sirve para indicar el idioma en el que está escrito el contenido que se está compartiendo. Si no se especifica nada, por defecto se suele interpretar que la lengua usada es el inglés de Estados Unidos (‘en_US’), así que lo correcto sería añadir por ejemplo la metaetiqueta OG <meta property="og:locale" content="es_ES" /> para páginas de España escritas en castellano, <meta property="og:locale" content="ca_ES" /> para contenidos escritos en catalán o <meta property="og:locale" content="es_MX" /> en sites mexicanos que utilicen el español como lengua.

Etiquetas Open Graph: qué son y cómo usarlas en tus páginas web

og:type

og:type indica el tipo de contenido que se está compartiendo a través de la red social o plataforma de mensajería y, a diferencia de todas las etiquetas OG que ya hemos visto, el valor que se debe indicar en ella no es abierto, sino que debe corresponderse necesariamente con alguno de los que fija el propio Open Graph Protocol. Tipo de contenidos hay muchos, aunque básicamente los más usados son dos: website (para cualquier página web) y article (específicamente pensado para las entradas de un blog o las noticias de un medio digital).

La etiqueta og:type es importante, porque dependiendo del contenido añadiremos unas u otras etiquetas OG a nuestra lista. Así, si nuestro contenido es un artículo, sería interesante añadir también información sobre quién lo escribe (article:author), el medio que lo publica (article:publisher), la fecha de publicación (article:published_time), la fecha de actualización o modificación (article:modified_time), la fecha de expiración si la tuviera (article:expiration_time) o la sección dentro del site a la que pertenece (article:section). Por ejemplo:

<meta property='og:type' content='article' />
<meta property='article:author' content='John Doe' />
<meta property='article:publisher' content='World News' />
<meta property='article:section' content='Economy' />
<meta property='article:published_time' content='2021-09-01T12:00:00+02:00' />
<meta property='article:modified_time' content='2021-09-04T17:45:11+02:00' />
<meta property='article:expiration_time' content='2021-09-30T23:59:59+02:00' />

El ejemplo anterior se trataría de una noticia de un medio digital (World News) perteneciente a la sección de Economía, escrita por un tal John Doe el 1 de septiembre de 2021 a las 12 horas (zona horaria GMT+2), actualizada el día 4 de septiembre a las 17:45 y que dejó de tener vigencia el pasado 1 de octubre.

Por su lado, el equivalente en Twitter a og:type es twitter:card. Los valores a escoger en este caso son cuatro: summary (la genérica, usada tanto para entradas de blog o noticias como para páginas de productos de una tienda online), summary_large_image (igual que las anteriores pero con una imagen más grande), player (para compartir contenidos multimedia, tanto audios como vídeos) o app (para promocionar descargas de una aplicación directamente desde App Store o Google Play).

Además, en el caso de Twitter se suelen añadir dos etiquetas más: twitter:site (para indicar la cuenta de Twitter del medio) y twitter:creator (para indicar la cuenta de Twitter del autor).

¿Cómo incluir las etiquetas OG en las páginas web de tu site?

Las metaetiquetas OG van siempre en el head de las páginas web. A continuación te dejamos un ejemplo que reúne todas las metaetiquetas de las que hemos hablado más arriba:

<head>
  <meta property="og:title" content="Eddie Redmayne says it was a mistake to play trans role in The Danish Girl">
  <meta property="og:description" content="The British star, who was nominated for an Oscar for his role as Lile Elbe, feels a trans actor should have been cast in the role.">
  <meta property="og:image" content="eddie-redmayne.jpg">
  <meta property="og:image:alt" content="Eddie Redmayne">
  <meta property="og:video" content="eddie-redmayne.mp4">
  <meta property="og:url" content="https://www.world-news.com/entertainment-arts/eddie-redmayne-says-it-was-a-mistake-to-play-trans-role-in-the-danish-girl">
  <meta property="og:site_name" content="World News">
  <meta property="og:locale" content="en_GB">  
  <meta property="og:type" content="article">
  <meta property='article:author' content='John Doe' />
  <meta property='article:publisher' content='World News' />
  <meta property="article:section" content="Entertainment & Arts">
  <meta property='article:published_time' content='2021-09-01T12:00:00+02:00' />
  <meta property='article:modified_time' content='2021-09-04T17:45:11+02:00' />
  <meta property='article:expiration_time' content='2021-09-30T23:59:59+02:00' />
  <!-- TWITTER -->
  <meta name="twitter:title" content="Eddie Redmayne says it was a mistake to play trans role in The Danish Girl">
  <meta name="twitter:description" content="The British star, who was nominated for an Oscar for his role as Lile Elbe, feels a trans actor should have been cast in the role.">
  <meta name="twitter:image:src" content="eddie-redmayne_twitter.jpg">
  <meta name="twitter:image:alt" content="Eddie Redmayne">
  <meta property="twitter:url" content="https://www.world-news.com/entertainment-arts/eddie-redmayne-says-it-was-a-mistake-to-play-trans-role-in-the-danish-girl">
  <meta name="twitter:domain" content="www.bbc.com">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@WorldNews">
  <meta name="twitter:creator" content="@johnDoe">
</head>

Puedes copiar el código anterior en tus páginas y sustituir los valores del atributo content por los tuyos propios. O si lo prefieres puedes usar herramientas online que generan por ti todas las metaetiquetas OG de tu página, como por ejemplo Web Code Tools.

Si no estás acostumbrado a trabajar con código y prefieres hacerlo a través de un CMS como WordPress, actualmente existen plugins que añaden estas metaetiquetas, como por ejemplo Open Graph Protocol Framework. Por otro lado, la mayoría de plugins de SEO también incluyen la funcionalidad para configurar las etiquetas OG, como por ejemplo Yoast’s SEO, uno de los más usados.

Herramientas de prueba de etiquetas OG

Una vez que hayas añadido a tus páginas todas las etiquetas OG necesarias, es recomendable que compruebes que se van a mostrar tal y como esperas cuando otros usuarios compartan tus páginas. Para ello, existen herramientas como Post Inspector de LinkedIn, Facebook Debugger o Twitter Card Validator que te serán de mucha ayuda. Estas webs ofrecen una pequeña auditoría de cómo has realizado el marcado de etiquetas OG y ofrecen además una previsualización de como se mostrará tu URL en sus publicaciones. Presta sobre todo atención a las etiquetas más importantes (las que hemos enumerado en este post) e ignora si quieres las advertencias sobre otras sin importancia.


Es más probable que los usuarios de redes sociales reparen en publicaciones que muestren tu contenido si tus páginas web incluyen etiquetas OG optimizadas que las hagan más atractivas. Si trabajas tus etiquetas OG no solo conseguirás aumentar el tráfico de tu web, sino que además harás que tus publicaciones se compartan más y reciban más likes, lo que aumentará también la visibilidad de tu marca y mejorará tu SEO.

¿Te ha parecido interesante? ¡Compártelo!

Seguro que a tus contactos le gusta leerlo.

  • Linkedin
  • Twitter
  • Whatsapp

Somos un estudio digital independiente

Trabajamos con startups y empresas de todos los tamaños ayudándoles a diseñar, crear y comunicar su producto de forma óptima para sus clientes.
  • Trabajamos en proyectos en todas sus fases y estados.
  • Incorporamos las últimas tecnologías de desarrollo web.
  • Diseñamos productos digitales para mejorar la conversión de las campañas de marketing.

Hazlo <real>

Tenemos experiencia en las últimas tecnologías de desarrollo web.

Transforma tu idea en realidad
scroll
Somos okb estudio digital <multi__disciplinar> independiente