Ir al contenido

Glosario Open Graph

¿Qué es Open Graph?

  • SEO Técnico
Definición

Open Graph es un protocolo de etiquetas meta con el prefijo og:, creado por Facebook en 2010, que controla qué título, qué descripción y qué imagen aparecen al compartir una URL en redes sociales.

En esta página 6
  1. ¿Qué es Open Graph?
  2. Propiedades og: más importantes
  3. Cómo funciona
  4. Por qué importa
  5. Buenas prácticas
  6. Errores frecuentes
En breve

Qué propiedades og: hay que rellenar, por qué controlan la vista previa social y no el resultado de Google, y qué pasa cuando la imagen falta o no coincide con el contenido real.

¿Qué es Open Graph?

Facebook introdujo Open Graph en 2010, en su conferencia de desarrolladores f8, junto con el botón «Me gusta» y el concepto de «grafo social». El protocolo define un conjunto de etiquetas meta, con el prefijo og:, que se colocan en el <head> de una página para describir cómo debe representarse esa URL cuando alguien la comparte. Su base técnica es RDFa, una extensión de HTML pensada para incrustar metadatos estructurados dentro del propio marcado.

La idea original era simple: convertir cualquier página web en un «objeto» dentro del grafo social de Facebook, con un título, un tipo y una imagen reconocibles, en lugar de dejar que la plataforma adivinara esos datos a partir del contenido visible. Quince años después, el protocolo sigue vigente y Meta mantiene su repositorio abierto en GitHub, aunque sin cambios sustanciales desde la versión 1.0.

Aunque nació pensado para Facebook, hoy es el estándar de facto que la mayoría de plataformas leen antes de generar una vista previa de enlace, desde LinkedIn hasta la vista previa de enlaces en WhatsApp. Quien mantiene bien cuidadas las etiquetas og: cubre así casi todos los canales a la vez, sin tener que montar una solución distinta para cada plataforma.

Propiedades og: más importantes

PropiedadQué controlaObligatoria
og:titleEl título que aparece en la vista previa, sin el nombre de la marca
og:descriptionEl texto breve bajo el título, entre 2 y 4 frasesNo, pero recomendada
og:imageLa imagen de vista previa; sin ella, la mayoría de plataformas no muestran ninguna miniaturaNo, pero recomendada
og:urlLa URL canónica del contenido, sin parámetros de sesión ni de tracking
og:typeEl tipo de objeto (website, article, video.movie...), que determina campos adicionales

Las tres primeras son las que más se notan al compartir un enlace; las dos últimas ordenan cómo el rastreador de cada plataforma interpreta el contenido.

<head>
  <meta property="og:title" content="¿Qué es un Title Tag?">
  <meta property="og:description" content="El title tag es el elemento title del head: define el titular del resultado de búsqueda, aunque Google puede reescribirlo.">
  <!-- imagen recomendada: 1200x630px -->
  <meta property="og:image" content="https://www.zds.es/img/og/que-es-title-tag.jpg">
  <meta property="og:url" content="https://www.zds.es/que-es-title-tag">
  <meta property="og:type" content="article">
</head>

Cómo funciona

Las etiquetas og: se colocan en el <head> del HTML, igual que el Title Tag o la Meta Description, pero cumplen una función distinta: mientras esas dos etiquetas influyen en cómo aparece la página en el resultado de Google, las etiquetas og: solo determinan la vista previa cuando la URL se comparte en una red social. Son Meta Tags independientes, y una página puede tener las tres a la vez sin que se pisen entre sí.

Cuando alguien pega un enlace en Facebook, LinkedIn o WhatsApp, cada plataforma lanza su propio rastreador contra esa URL, lee las etiquetas og: del <head> y genera la vista previa a partir de ahí. Ese resultado suele quedar en caché, así que si se cambia la imagen o el título después de la primera vez que se compartió, la vista previa antigua puede seguir apareciendo hasta forzar un nuevo rastreo con una herramienta como el Sharing Debugger de Meta.

X, la antigua Twitter, usa su propio sistema de etiquetas con el prefijo twitter:, pensado originalmente para diferenciarse de Facebook. En la práctica, ambos sistemas conviven en la misma página: si faltan las etiquetas twitter:, X recurre a los valores de og:title, og:description y og:image como respaldo, así que casi ninguna web necesita duplicar todo el contenido dos veces.

Por qué importa

Open Graph no es un factor de posicionamiento en Google: el buscador ignora las etiquetas og: a la hora de decidir en qué posición aparece una página. Confundirlo con el Title Tag o la Meta Description, que sí influyen en el resultado de búsqueda, es el malentendido más habitual sobre este protocolo.

Su valor está en otro sitio: una vista previa con título claro, imagen reconocible y descripción coherente anima a más gente a pinchar cuando el enlace circula en redes o en apps de mensajería, lo mismo que una buena meta description mejora el CTR en el resultado de Google. Es una ganancia indirecta, medible en clics reales, no en posiciones.

Para cualquier estrategia de Social Media Marketing, unas etiquetas og: mal configuradas se traducen en enlaces compartidos sin imagen, con un título genérico o con el texto equivocado, justo en el momento en que más importa causar una buena primera impresión. En una campaña de pago o en un lanzamiento donde mucha gente comparte el mismo enlace a la vez, ese pequeño fallo se acumula rápido en un número de clics notablemente menor en todos los canales.

Buenas prácticas

  • Incluye siempre og:title, og:description, og:image, og:url y og:type; son las cinco propiedades que leen prácticamente todas las plataformas.
  • Usa una imagen de al menos 1200 x 630 píxeles, con proporción cercana a 1.91:1, para que no se recorte ni se vea pixelada en la vista previa.
  • Escribe og:description con 2 a 4 frases que resuman el contenido real de la página, no un eslogan genérico repetido en todo el sitio.
  • Comprueba la vista previa con el Sharing Debugger antes de dar por buena una publicación, sobre todo tras cambiar la imagen destacada.
  • Fuerza un nuevo rastreo cuando actualices el contenido de una URL ya compartida; de lo contrario la vista previa antigua puede quedar en caché durante semanas.
  • Añade también las etiquetas twitter: básicas si X es un canal relevante, aunque puedan heredar los valores de og: como respaldo.

Errores frecuentes

  • No incluir og:image, con lo que la plataforma elige una imagen aleatoria de la página o no muestra ninguna.
  • Usar una imagen con un contenido distinto al de la página real compartida, algo que algunas plataformas marcan como engañoso.
  • Dejar og:title y og:description vacíos y esperar que el rastreador saque el texto por su cuenta del contenido visible.
  • Confundir og:url con la URL donde vive el rastreador, en vez de con la URL canónica que se quiere posicionar como fuente del contenido.
  • Olvidar volver a validar la vista previa después de migrar el sitio a otro dominio o de cambiar la estructura de las URLs.
Manuel Riveiro Rodriguez CEO & Digital Strategist

Una auditoría técnica revisa esto y el resto en un solo paso.

Solicitar auditoría

Preguntas frecuentes

¿Open Graph afecta al posicionamiento en Google?

No. Google no usa las etiquetas og: para decidir la posición de una página en los resultados de búsqueda; para eso mira el Title Tag, la Meta Description y el contenido real. Open Graph solo controla cómo se ve el enlace al compartirlo en redes sociales o apps de mensajería, con un efecto indirecto en el CTR cuando el enlace circula fuera de Google.

¿Qué pasa si no pongo og:image en mi página?

La mayoría de plataformas intentan elegir automáticamente una imagen de la propia página, con resultados poco fiables: a veces cogen un logo pequeño, un icono decorativo o directamente no muestran ninguna miniatura. El enlace compartido pierde peso visual frente a otros con una vista previa completa, y eso reduce las probabilidades de que alguien lo abra.

¿Es lo mismo Open Graph que Twitter Cards?

No, son dos sistemas técnicamente separados: Open Graph usa el prefijo og: y lo creó Facebook, mientras que X usa etiquetas con el prefijo twitter:. En la práctica se solapan, porque X recurre a los valores de og:title, og:description y og:image cuando las etiquetas twitter: específicas no están presentes en la página.

¿Dónde compruebo cómo se ve mi página al compartirla?

La herramienta de referencia es el Sharing Debugger de Meta, donde se pega la URL y se ve exactamente qué etiquetas og: detecta el rastreador, además de la vista previa resultante. También sirve para forzar un nuevo rastreo cuando la imagen o el título han cambiado y la plataforma sigue mostrando una versión antigua en caché.

¿Hace falta duplicar el título en og:title y en el Title Tag?

No literalmente, pero conviene que ambos cuenten la misma historia. El Title Tag suele incluir el nombre de la marca y palabras clave pensadas para el buscador; og:title funciona mejor más corto y directo, centrado en lo que hace atractivo el clic dentro de un feed social, sin repetir la marca si ya aparece en la imagen.