Etiquetas meta Open Graph: la guía completa de las vistas previas de enlaces sociales
Las etiquetas meta Open Graph son etiquetas <meta property="og:…"> que colocas en el <head> de una página HTML. Controlan el título, la descripción y la imagen que aparecen cuando alguien comparte tu enlace en Facebook, LinkedIn, Slack, Discord, WhatsApp y casi cualquier otra plataforma. Defínelas una vez y prácticamente todas las redes muestran una vista previa enriquecida en lugar de una URL a secas. X (Twitter) lee sus propias etiquetas Twitter Card, pero recurre a tus etiquetas Open Graph cuando falta la equivalente, así que un único conjunto de etiquetas bien construido cubre casi todos los lugares por los que puede viajar un enlace.
Ese único protocolo marca la diferencia entre un enlace que muestra un titular, un resumen y una imagen nítida de 1200×630, y una dirección pelada en la que nadie hace clic.
Esta guía recorre el conjunto completo de etiquetas meta para compartir en redes: las cuatro etiquetas Open Graph obligatorias, las reglas de tamaño de og:image, el fallback de Twitter Card, cómo cada plataforma renderiza y cachea las vistas previas, los errores que dejan en blanco lo que compartes y cómo depurar el resultado después de desplegar.
¿Qué son las etiquetas meta Open Graph?
Open Graph es un protocolo abierto, creado originalmente en Facebook y documentado en ogp.me, que permite que cualquier página web se describa a sí misma como un objeto enriquecido. En lugar de adivinar de qué trata tu enlace, una plataforma lee un puñado de etiquetas y las convierte en una tarjeta de vista previa.
La sintaxis es una simple etiqueta meta de HTML con un atributo property y un valor content, colocada dentro del <head> del documento:
<meta property="og:title" content="How Open Graph Tags Work">Fíjate en el atributo property. Las etiquetas meta clásicas de HTML para SEO (la meta description, robots, viewport) usan name. Open Graph usa property, y Twitter Card vuelve a usar name. Acertar con ese atributo importa: un crawler que espera property="og:title" no leerá name="og:title".
Casi todas las plataformas que convierten un enlace en una tarjeta leen Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest y Telegram lo hablan. X es la excepción notable. Prefiere sus propias etiquetas twitter:*, pero recurre a tus etiquetas og:* para todo lo que no encuentra, y por eso rara vez necesitas duplicarlas.
Open Graph convive con las etiquetas meta clásicas de SEO en lugar de reemplazarlas. El <title> y el enlace canónico siguen impulsando la búsqueda; la meta description sigue dando forma a tu fragmento de búsqueda. Las etiquetas Open Graph no tocan el posicionamiento; son las dueñas de la tarjeta social. Un <head> completo suele llevar las tres familias juntas.
Escribirlas a mano es repetitivo y fácil de equivocar por detalles sutiles. El Generador de etiquetas meta construye el bloque completo a partir de un formulario breve, lo previsualiza en vivo y mantiene coherentes los detalles peliagudos (nombres de atributos, URLs absolutas, dimensiones de imagen) para que no tengas que recordarlos.
Las etiquetas Open Graph esenciales que de verdad necesitas
Open Graph define docenas de propiedades, pero para compartir bien solo hacen falta unas pocas. Empieza por las cuatro obligatorias, añade una descripción y párate ahí para la mayoría de las páginas.
Las cuatro etiquetas obligatorias: og:title, og:type, og:image, og:url
Cuatro etiquetas son obligatorias según el protocolo. Si te falta una, las plataformas descartan la tarjeta o la rellenan con una conjetura pobre.
<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">og:title es el titular en negrita de la tarjeta. og:type clasifica el objeto (más sobre esto abajo). og:image es la imagen de vista previa, y debe ser una URL HTTPS absoluta. og:url es la dirección canónica de la página, que las plataformas usan para eliminar duplicados al compartir y agregar la interacción.
og:description y en qué se diferencia de la meta description de SEO
og:description es el resumen breve que se imprime bajo el título en una tarjeta al compartir:
<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">Es una etiqueta distinta de la <meta name="description"> de SEO, y sirve a un lector distinto. La meta description compite por los clics en una página de resultados de Google y se mide contra unos 155 caracteres. La descripción de Open Graph se lee en una tarjeta social, donde el espacio es más ajustado y la primera frase es la que pesa. Si omites og:description, la mayoría de las plataformas recurren a tu meta description, así que a menudo puedes prescindir de ella. Redacta una específica solo cuando el gancho social deba diferir del fragmento de búsqueda.
og:type y lo que desbloquea
og:type le dice a las plataformas qué tipo de cosa es tu página. Los valores habituales son website, article, product y profile. Una página de inicio o una landing es un website; una entrada de blog es un article.
Elegir article desbloquea propiedades y funciones adicionales que un tipo website normal no puede aprovechar:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">Esas etiquetas article:* alimentan las tarjetas con fechas de publicación y firmas de autor, y hacen que la página califique para los Rich Pins de Pinterest, que extraen datos estructurados directamente de tu marcado Open Graph. Pon og:type en article en las entradas y en website en todo lo demás, y los campos correspondientes vienen detrás.
Aquí tienes una referencia de las etiquetas que la mayoría de las páginas realmente usan:
| Etiqueta | Qué controla | Valor de ejemplo |
|---|---|---|
og:title | Titular mostrado en la tarjeta | How Open Graph Tags Work |
og:type | Tipo de objeto: website, article, product, profile | article |
og:image | Imagen de vista previa (URL HTTPS absoluta) | https://example.com/og/cover.png |
og:url | URL canónica de la página | https://example.com/open-graph-guide |
og:description | Resumen bajo el título | A practical guide to social meta tags. |
og:site_name | Nombre del sitio en conjunto | Example |
og:locale | Idioma y región del contenido | en_US |
og:image: tamaños, proporción y las reglas que rompen lo que compartes
La imagen es la parte de una vista previa que la gente ve primero, y es donde más veces se rompe todo al compartir. Acierta con el tamaño y el formato de og:image y un solo archivo funciona en todas partes.
El estándar universal 1200×630 (1.91:1)
El tamaño recomendado de og:image es 1200×630 píxeles, una proporción de 1.91:1. Esa única imagen se renderiza correctamente en Facebook, LinkedIn, Slack, Discord y la tarjeta summary_large_image de X, así que no necesitas un archivo distinto por plataforma.
Los mínimos de tamaño también importan. Facebook ignora cualquier imagen menor de 200×200 y muestra una miniatura cuadrada y apretada para todo lo que baje de 600×315. Por debajo de 1200 píxeles de ancho, las tarjetas grandes empiezan a verse borrosas. Apunta a 1200×630 y superas todos los umbrales de una sola vez.
Por qué importan og:image:width y og:image:height
Cuando una plataforma se encuentra por primera vez con tu enlace, todavía no ha descargado la imagen; la obtiene de forma asíncrona. Si declaras las dimensiones por adelantado, la plataforma puede reservar el espacio adecuado y componer la tarjeta de inmediato:
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">Omítelas y el primer intento de compartir una página puede renderizarse en blanco mientras el crawler se pone al día. Añádelas y la tarjeta sale correcta desde el primer pegado. La etiqueta og:image:alt describe la imagen para los lectores de pantalla en las plataformas que la admiten.
Formato de archivo y tamaño
Usa JPG o PNG. Ambos se decodifican de forma fiable en todos los crawlers, que es justo el propósito de una og:image: tiene que renderizarse en servidores que no controlas. Como regla general, mantén el archivo por debajo de 1 MB, y por debajo de 300 KB para WhatsApp, que es más estricto que el resto. Si tu exportación pesa más, pásala por el compresor de imágenes para bajarla de 1 MB sin dañar visiblemente la calidad.
Es tentador recurrir a un formato moderno aquí, pero este es el único sitio donde conviene resistirse. Los formatos más nuevos ahorran bytes para los navegadores, pero algunos crawlers sociales los decodifican de forma inconsistente, así que una og:image en WebP o AVIF puede volver en blanco en una plataforma que no sepa leerla. Las ventajas y desventajas se cubren en la guía WebP vs AVIF vs JPEG; para las imágenes de compartir en concreto, quédate con JPG o PNG. Como cada plataforma recorta los bordes de forma distinta, mantén tu logo y tu titular dentro de una zona segura centrada de 1080×600 para que no se recorte nada importante.
La regla de la URL HTTPS absoluta
og:image y og:url deben ser URLs completas https://…, no rutas relativas. Una ruta como /cover.png se resuelve bien en tu editor y en tu página publicada, pero un crawler que obtiene tu URL no tiene ninguna base contra la que resolverla, así que lo compartido vuelve vacío. La imagen también tiene que ser accesible públicamente: si robots.txt bloquea al crawler o el archivo está detrás de autenticación, la vista previa se queda en blanco.
Una restricción más decide todo lo anterior: los crawlers no ejecutan JavaScript. Facebook, LinkedIn, WhatsApp, Telegram y Discord obtienen tu HTML en crudo y leen lo que hay allí. Las etiquetas inyectadas del lado del cliente por un framework tras cargar la página son invisibles para ellos, así que tus etiquetas Open Graph deben vivir en HTML renderizado en el servidor o estático.
Tarjetas de Twitter/X: una etiqueta y luego el fallback a Open Graph
X usa sus propias etiquetas meta de Twitter Card, pero el solapamiento con Open Graph hace que escribas mucho menos de lo que esperarías. En la práctica, añades una etiqueta y dejas que el resto recurra al fallback.
twitter:card es la única etiqueta de Twitter obligatoria
X no renderiza ninguna tarjeta a menos que twitter:card esté presente, aunque tengas un conjunto completo de etiquetas Open Graph. Es la única etiqueta obligatoria de Twitter Card:
<meta name="twitter:card" content="summary_large_image">El valor elige el diseño. summary_large_image produce la tarjeta grande tipo banner pensada para una imagen de 1200×630. summary produce una tarjeta compacta con una pequeña miniatura cuadrada junto al texto:
<meta name="twitter:card" content="summary">Fíjate en el atributo name. Las etiquetas de Twitter Card usan name, no el property que usa Open Graph.
Cómo X recurre a og:* para el título, la descripción y la imagen
Para el título, la descripción y la imagen, X lee tus og:title, og:description y og:image cuando falta la etiqueta twitter:* correspondiente. Por eso rara vez escribes twitter:title o twitter:image. Define twitter:card, mantén limpias tus etiquetas Open Graph y X arma la tarjeta a partir de ellas.
La trampa de twitter:image vacío
El fallback tiene un filo peligroso: una etiqueta vacía cuenta como presente. Si emites twitter:image con un valor en blanco, X usa ese valor vacío en lugar de recurrir a og:image, y tu tarjeta pierde la imagen.
<!-- Incorrecto: bloquea el fallback y deja la tarjeta sin imagen -->
<meta name="twitter:image" content="">
<!-- Correcto: omite la etiqueta por completo y X lee og:image -->La regla es simple: nunca emitas una etiqueta social vacía. Déjala fuera cuando no tengas un valor.
Particularidades de Slack y Discord
Slack lee primero la Twitter Card y luego Open Graph, y puede mostrar dos campos adicionales mediante twitter:label y twitter:data:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">Esos aparecen como pequeños detalles etiquetados bajo el desplegado (unfurl) de Slack. Discord lee Open Graph y añade un adorno que nadie más usa: colorea la barra de acento izquierda del embed con el theme-color de tu página.
<meta name="theme-color" content="#5865F2">Cómo se renderizan las vistas previas de enlaces en cada plataforma
Las mismas etiquetas producen vistas previas de enlaces distintas según quién las lea. Cada plataforma elige su propio subconjunto de etiquetas, cachea durante su propia ventana de tiempo y añade alguna que otra peculiaridad. Esta tabla es la referencia rápida.
| Plataforma | Etiquetas que lee | Caché | Comportamiento destacado |
|---|---|---|---|
| Open Graph | ~30 días | Ignora imágenes menores de 200×200; muestra un cuadrado pequeño por debajo de 600×315 | |
| Open Graph | ~7 días | Limpia una vista previa obsoleta con el Post Inspector | |
| X (Twitter) | twitter:card + recurre a og:* | corta | Sin twitter:card no hay tarjeta alguna |
| Slack | Twitter Card y luego Open Graph | por mensaje | Renderiza twitter:label/twitter:data como campos adicionales |
| Discord | Open Graph | por mensaje | Usa theme-color para la barra de acento del embed |
og:title + og:image | por mensaje | Quiere los metadatos cerca del inicio; mantén la imagen por debajo de 300 KB | |
| Telegram | Open Graph | por mensaje | Solo renderiza de forma fiable desde JPEG o PNG |
| Open Graph o Schema.org | — | Los Rich Pins de artículo necesitan og:type=article |
La columna de caché explica una sorpresa habitual: corriges tus etiquetas, vuelves a compartir y Facebook sigue mostrando el título viejo durante semanas. Facebook conserva los datos de Open Graph unos 30 días y LinkedIn unos 7, así que una edición no aparecerá hasta que la caché caduque o fuerces una actualización. Los depuradores de abajo hacen exactamente eso.
Errores comunes de Open Graph (y cómo detectarlos)
La mayoría de las vistas previas rotas se remontan a una breve lista de errores. Cada uno se ve bien en local y solo falla cuando un crawler obtiene la página publicada.
Ruta relativa en og:image
Una ruta relativa se renderiza en tu navegador y se rompe al compartir, porque el crawler no tiene ninguna URL base contra la que resolverla.
<!-- En blanco al compartir -->
<meta property="og:image" content="/cover.png">
<!-- Se renderiza en todas partes -->
<meta property="og:image" content="https://example.com/cover.png">Falta og:url o el canónico no coincide con él
Sin og:url, los recuentos de veces compartido y la interacción se dispersan entre variantes de la URL (con y sin www, con parámetros de seguimiento, con barra final). Apunta tanto tu enlace canónico como og:url a una misma URL única para que las señales se mantengan juntas.
Imagen demasiado pequeña o con la proporción equivocada
Una imagen por debajo de 200×200 se ignora sin más, y una alejada de 1.91:1 se recorta de maneras que no planeaste. Publica 1200×630 y el encuadre es predecible en todas las plataformas.
Olvidar twitter:card
Un conjunto completo de etiquetas Open Graph sigue sin producir tarjeta en X si falta twitter:card. Esta es la razón más común de que un enlace se vea genial en LinkedIn y no muestre nada en X.
Etiquetas renderizadas del lado del cliente que un crawler no puede ver
Si una aplicación de una sola página inyecta las etiquetas Open Graph tras cargar, los crawlers que no ejecutan JavaScript nunca las ven. Renderiza las etiquetas en el servidor o pre-renderiza el HTML.
charset colocado después de los primeros 1024 bytes
La declaración <meta charset="utf-8"> tiene que aparecer dentro de los primeros 1024 bytes del documento, o el navegador la ignora y puede corromper los caracteres no ASCII de tu título y tu descripción. Ponla primero dentro del <head>:
<head>
<meta charset="utf-8">
<!-- todo lo demás va después -->
</head>Cómo probar y depurar tus etiquetas Open Graph
Nunca confíes en una vista previa que no hayas verificado contra una URL en vivo. Tres herramientas cubren las plataformas que importan, y todas pueden forzar una actualización de la caché.
Facebook Sharing Debugger
El Facebook Sharing Debugger obtiene tu URL en vivo, muestra exactamente qué analizó Facebook y enumera las etiquetas que falten o estén mal formadas. Su botón más útil es «Scrape Again», que actualiza la caché de ~30 días de Facebook a demanda, la forma más rápida de que un arreglo aparezca sin esperar un mes.
LinkedIn Post Inspector
El LinkedIn Post Inspector hace el mismo trabajo para LinkedIn. Pega una URL y vuelve a obtener la página y limpia la caché de ~7 días de LinkedIn, así que un título o una imagen actualizados aparecen en tu próximo intento de compartir en lugar de días después.
La validación de tarjetas de X se movió al portal de desarrolladores
X retiró su Card Validator independiente. Desde 2026, la validación de tarjetas vive dentro del portal de desarrolladores de X en lugar de en una URL pública, así que la mayoría de los equipos verifican las tarjetas de X de otra forma: como X recurre a og:*, los depuradores de Facebook y LinkedIn ya confirman las etiquetas que X leerá, y una herramienta de vista previa de terceros cubre el hueco para el propio diseño de twitter:card.
Previsualiza antes de desplegar
Los depuradores solo pueden inspeccionar una URL que ya esté publicada, que es un mal momento para descubrir una imagen en blanco. Previsualiza la tarjeta mientras todavía estás editando. El Generador de etiquetas meta renderiza vistas previas de Google, Facebook, X, LinkedIn, Slack y Discord a partir de los valores que escribes, lee las dimensiones reales de tu og:image en el navegador para detectar una proporción equivocada y puede importar un <head> existente para que diagnostiques un enlace roto antes de publicarlo.
Lista de comprobación rápida
Este es el mínimo que toda página debería llevar. Cópialo, cambia tus valores y tendrás una vista previa que se renderiza en todos lados:
<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">
<meta name="twitter:card" content="summary_large_image">Repasa lo esencial antes de publicar: una og:image HTTPS absoluta a 1200×630, og:url coincidiendo con tu canónico, twitter:card presente y las etiquetas renderizadas en el servidor. Si quieres un recorrido más completo por las utilidades que aceleran esto, la guía de herramientas para desarrolladores reúne el resto. Cuando estés listo para generar y previsualizar el bloque completo de una vez, el Generador de etiquetas meta lo escribe, lo revisa y muestra cada tarjeta antes de desplegar.
Preguntas frecuentes
¿Cuál es la diferencia entre las etiquetas Open Graph y Twitter Card?
Open Graph es un protocolo multiplataforma que leen Facebook, LinkedIn, Slack y más; las etiquetas Twitter Card (twitter:*) son específicas de X. X recurre a tus etiquetas OG cuando falta la etiqueta twitter:* correspondiente, así que normalmente necesitas OG más un único valor twitter:card.
¿Las etiquetas Open Graph afectan al posicionamiento en Google?
No. Las etiquetas Open Graph y Twitter Card no influyen en el posicionamiento de Google: controlan cómo se ven los enlaces al compartirlos y así impulsan el tráfico social. Las etiquetas clásicas <title> y canónica importan para el SEO; la meta description da forma a tu fragmento y a la tasa de clics, pero no es un factor de posicionamiento directo.
¿Dónde van las etiquetas Open Graph en el HTML?
Dentro del elemento <head>, en el HTML renderizado en el servidor o estático. Los crawlers de Facebook, LinkedIn, WhatsApp y Telegram no ejecutan JavaScript, así que las etiquetas inyectadas del lado del cliente no se verán. Pon <meta charset> primero para que caiga dentro de los primeros 1024 bytes.
¿Puede una sola imagen servir para Facebook, X y LinkedIn?
Sí. Una sola imagen de 1200×630 (1.91:1) se renderiza correctamente en Facebook, LinkedIn, Slack, Discord y la tarjeta summary_large_image de X. Sírvela por HTTPS en una URL pública y declara og:image:width/og:image:height para que el primer intento de compartir no salga en blanco.
¿Por qué mi vista previa de enlace no muestra imagen?
Causas comunes: una ruta og:image relativa en lugar de una URL HTTPS absoluta, una imagen por debajo de 200×200, la falta de twitter:card en X, o etiquetas inyectadas por JavaScript que el crawler no puede ejecutar. Vuelve a hacer scrape con el Facebook Sharing Debugger después de arreglarlo.
¿Todas las páginas necesitan sus propias etiquetas Open Graph?
Idealmente sí: cada página debería tener un og:title, og:description, og:image y un og:url canónico que reflejen esa página concreta, para que los enlaces compartidos muestren vistas previas relevantes. Un fallback para todo el sitio es mejor que nada, pero las etiquetas por página ganan muchos más clics sociales.