Aquí te explicamos cómo agregar etiquetas Open Graph: coloca un pequeño conjunto de metaetiquetas og: dentro del <head> de tu página, asígnale un título, una descripción y una imagen de 1200x630, luego valida el resultado antes de compartirlo. Open Graph es el protocolo que controla lo que Facebook, LinkedIn, Discord, Slack y la mayoría de otras plataformas muestran cuando alguien pega tu enlace. Sin él, tu enlace se ve como texto sin formato o una miniatura rota.
Esta guía te proporciona el conjunto exacto de etiquetas para copiar y pegar (sin plugin, sin CMS necesario), los tamaños de imagen que realmente se renderizan correctamente en cada plataforma y la solución para el problema más común: la vista previa que se niega a actualizarse porque una plataforma almacenó en caché la anterior. Al final, sabrás cómo agregar etiquetas Open Graph manualmente y verificarlas en todas las redes principales.
Qué hacen realmente las etiquetas Open Graph#
Open Graph (a menudo abreviado como OG) es un protocolo de marcado que Facebook introdujo en 2010. Te permite, como propietario de la página, decidir exactamente cómo se representa tu URL cuando se comparte. En lugar de que un rastreador adivine un título y tome una imagen aleatoria, lee tus valores declarados.
Cuando alguien pega tu enlace en una publicación, mensaje o chat, la plataforma obtiene tu página, lee las etiquetas og: del <head> y construye una tarjeta de vista previa a partir de ellas. Esa tarjeta es tu primera impresión. Una tarjeta limpia con una imagen nítida consigue clics. Una URL desnuda se pasa de largo.
Punto clave: Las etiquetas Open Graph no afectan directamente tu posicionamiento en Google. Afectan la tasa de clics y los compartidos en redes sociales y plataformas de chat, que es un canal de tráfico diferente y muy real.
Qué plataformas leen Open Graph#
Casi todas, con una excepción histórica. La lista a continuación cubre las ocho superficies que más importan y qué protocolo lee cada una.
| Plataforma | ¿Lee Open Graph? | Notas |
|---|---|---|
| Sí | El consumidor original de OG; usa el Depurador de Compartidos para actualizar | |
| Sí | Lee og:title, og:description, og:image; tiene su propio Inspector de Publicaciones | |
| X (Twitter) | Sí, con respaldo de Twitter Card | Prefiere etiquetas twitter:, recurre a og: |
| Discord | Sí | Construye incrustaciones enriquecidas a partir de etiquetas OG |
| Slack | Sí | Despliega enlaces usando etiquetas OG |
| Sí | Vista previa de miniatura pequeña desde og:image | |
| iMessage | Sí | Vista previa de enlace enriquecida desde OG |
| Sí, además de las propias | Lee OG pero también admite metadatos de Pines Enriquecidos |
La conclusión práctica: configura bien tus etiquetas Open Graph y cubrirás la gran mayoría de las superficies de compartido con un solo bloque de marcado.
Las etiquetas Open Graph esenciales que necesitas#
No necesitas docenas de etiquetas. Cinco etiquetas OG principales más un bloque pequeño de Twitter Card cubren casi todos los casos reales. Aquí está el conjunto mínimo y correcto para colocar en tu <head>.
<!-- Open Graph core -->
<meta property="og:title" content="El título de tu página aquí" />
<meta property="og:description" content="Un resumen de 1 a 2 oraciones que merezca el clic." />
<meta property="og:image" content="https://ejemplo.com/og-image.jpg" />
<meta property="og:url" content="https://ejemplo.com/tu-pagina" />
<meta property="og:type" content="website" />
<!-- Twitter Card (X lo lee, recurre a og: si falta) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="El título de tu página aquí" />
<meta name="twitter:description" content="Un resumen de 1 a 2 oraciones que merezca el clic." />
<meta name="twitter:image" content="https://ejemplo.com/og-image.jpg" />
Algunas cosas importantes que entender sobre ese bloque, porque los detalles son donde las vistas previas fallan:
- Las etiquetas
og:usanproperty, las de Twitter usanname. Esto confunde a mucha gente.<meta property="og:title">es correcto;<meta name="og:title">es técnicamente incorrecto y algunos rastreadores lo ignoran. og:urldebe ser la URL canónica absoluta. Usa la dirección completahttps://, no una ruta relativa. Esta se convierte en el enlace al que apunta la vista previa.og:imagetambién debe ser una URL absoluta. Una ruta relativa como/og.jpgno se resolverá cuando un rastreador externo obtenga tu página.twitter:cardconfigurado comosummary_large_imagete da la tarjeta grande tipo banner. Si lo omites, X muestra una miniatura cuadrada pequeña.
Etiquetas opcionales que vale la pena agregar para artículos#
Si la página es una entrada de blog o un artículo en lugar de una página genérica, dos etiquetas adicionales añaden refinamiento y desbloquean vistas previas más ricas en algunas plataformas.
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Tu Marca" />
<meta property="article:published_time" content="2026-06-25T08:00:00Z" />
Configura og:type como article para publicaciones y como website para páginas de inicio, páginas de aterrizaje y herramientas. El og:site_name muestra tu marca arriba o abajo del título en varias plataformas, lo que genera reconocimiento en las comparticiones.
El tamaño de og:image que se renderiza correctamente en todas partes#
La imagen es la parte que la gente suele equivocar más, y es la que más importa visualmente. Hay una especificación segura que funciona en todas las plataformas principales.
Usa 1200 x 630 píxeles con una relación de aspecto 1.91:1. Este es el tamaño que recomienda Facebook y se renderiza correctamente en LinkedIn, X (como tarjeta de imagen grande), Discord y Slack sin recortes extraños. Mantén el texto importante y los rostros alejados de los bordes, ya que algunas plataformas aplican un ligero recorte.
Aquí tienes una guía rápida para las plataformas con expectativas más estrictas o diferentes.
| Caso de uso | Tamaño recomendado | Relación de aspecto | Notas |
|---|---|---|---|
| Imagen OG universal | 1200 x 630 | 1.91:1 | El valor predeterminado que funciona casi en todas partes |
| Tarjeta grande de X | 1200 x 628 | ~1.91:1 | Efectivamente igual que el tamaño universal |
| Tarjeta pequeña de X | 144 x 144 mínimo | 1:1 | Solo si configuras twitter:card como summary |
| 1200 x 627 | ~1.91:1 | Trata 1200 x 630 como seguro | |
| Discord / Slack | 1200 x 630 | 1.91:1 | Escala la imagen universal correctamente |
Algunas reglas para evitar vistas previas rotas o borrosas:
- Mantén el archivo por debajo de unos 5 MB. Facebook y otras plataformas pueden omitir imágenes demasiado grandes, dejándote sin vista previa.
- Usa JPG o PNG. El soporte de WebP es inconsistente entre los rastreadores, así que para imágenes OG, usa formatos seguros incluso si tu sitio usa WebP en otros lugares.
- Sírvete a través de HTTPS. Una imagen
http://en una página HTTPS puede ser descartada por contenido mixto. - Especifica las dimensiones. Añadir
og:image:widthyog:image:heightayuda a las plataformas a reservar el espacio correcto y renderizar más rápido.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Si quieres diseñar una tarjeta con marca del tamaño correcto sin abrir una herramienta de diseño, el generador gratuito de metaetiquetas y Open Graph construye el bloque completo de etiquetas y te muestra exactamente cómo se verá la imagen de 1200x630 en la vista previa.
Cómo agregar etiquetas Open Graph paso a paso#
Este procedimiento funciona para cualquier sitio donde puedas editar el HTML <head>: un sitio hecho a mano, un generador de sitios estáticos, una plantilla personalizada o un framework como Next.js o Astro. No se requiere plugin. Sigue estos pasos para agregar etiquetas Open Graph desde cero y confirmar que funcionan.
Paso 1: Escribe tu título y descripción#
Primero decide el texto exacto. Tu og:title puede diferir de tu etiqueta <title> y de tu meta descripción SEO, y a menudo debería hacerlo. El título y la descripción OG están escritos para un humano que se desplaza por un feed social, así que hazlos impactantes y orientados al beneficio.
Mantén og:title por debajo de aproximadamente 60 a 90 caracteres para que no se trunque, y og:description entre 110 y 200 caracteres según la plataforma. Más corto es más seguro. Si quieres ver cómo la longitud afecta también al snippet de búsqueda, nuestra guía sobre longitud de meta descripción y ancho de píxeles cubre los umbrales de truncamiento en detalle.
Paso 2: Crea y aloja tu og:image#
Diseña una imagen de 1200x630 con tu titular, logotipo y un fondo limpio. Exprésala como JPG o PNG, luego súbela a un lugar con una URL HTTPS estable y pública. Puede ser tu propio servidor, una carpeta /images/ o un CDN.
Copia la URL absoluta completa de la imagen subida. La pegarás tanto en og:image como en twitter:image. Abre la URL directamente en un navegador para confirmar que carga sin muro de inicio de sesión ni redirección, porque los rastreadores no pueden iniciar sesión.
Paso 3: Pega las etiquetas en tu head#
Coloca el bloque completo de etiquetas de la sección anterior en el <head> de tu página, idealmente cerca del inicio junto a tus otras meta etiquetas. Reemplaza los valores de ejemplo con tu título real, descripción, URL de imagen y URL canónica de la página.
<head>
<meta charset="utf-8" />
<title>Título de tu página aquí</title>
<meta property="og:title" content="Título de tu página aquí" />
<meta property="og:description" content="Un resumen que merezca el clic." />
<meta property="og:image" content="https://ejemplo.com/og-image.jpg" />
<meta property="og:url" content="https://ejemplo.com/tu-pagina" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://ejemplo.com/og-image.jpg" />
</head>
Si usas un framework, configura estas etiquetas en la API de head o metadatos del framework en lugar de editar HTML sin formato. Los nombres de las etiquetas siguen siendo idénticos independientemente de cómo los inyectes.
Paso 4: Valida antes de compartir#
No asumas que funciona. Cada plataforma expone una herramienta de depuración que obtiene tu página y te muestra la tarjeta exacta que renderizará. Ejecuta tu URL a través de estas antes de publicar en cualquier lugar:
- Depurador de compartir de Facebook para Facebook y la mayoría de consumidores OG genéricos.
- Inspector de publicaciones de LinkedIn para vistas previas de LinkedIn.
- Vista previa de tarjeta de X (Twitter), visible al pegar el enlace en un borrador de publicación.
Estos validadores también informan etiquetas faltantes o mal formadas, por lo que funcionan como tu verificador de errores. Si la tarjeta se ve mal, corrige la etiqueta que señalan y vuelve a ejecutar.
Paso 5: Vista previa en todas las plataformas a la vez#
Ejecutar tres depuradores separados para cada enlace se vuelve tedioso rápidamente. Para ver cómo se verá una URL en todas las plataformas principales en una sola vista, pégala en una herramienta de vista previa multiplataforma. La herramienta de vista previa SERP y social renderiza tu título, descripción e imagen OG lado a lado para que puedas detectar una imagen recortada o un título truncado en segundos, no después de una publicación fallida.
Solucionar el problema de caché de "Imagen no actualizada"#
Este es el problema de Open Graph más frustrante y casi nadie documenta la solución real. Actualizaste tu og:image, volviste a compartir el enlace, y la imagen antigua (o ninguna imagen) sigue apareciendo. Las etiquetas son correctas. Entonces, ¿por qué no funciona?
La respuesta es la caché. Cuando una plataforma obtiene tu URL por primera vez, almacena los datos de OG en sus propios servidores para no tener que volver a rastrear cada vez que alguien comparte el enlace. Si cambias las etiquetas después, la plataforma sigue sirviendo su copia desactualizada hasta que esa caché expire, lo que puede tardar días.
La solución es forzar a la plataforma a volver a rastrear tu página. No esperas a que caduque; le dices a la caché que se actualice.
Así es como se limpia la caché en las plataformas que la mantienen:
- Facebook: Abre el Depurador de Compartir de Facebook, pega tu URL y haz clic en "Scrape Again". Esto fuerza una nueva obtención y actualiza la vista previa en caché de inmediato.
- LinkedIn: Usa el Inspector de Publicaciones de LinkedIn. Ejecutar tu URL a través de él provoca una nueva obtención. LinkedIn históricamente almacena en caché durante unos 7 días de otra manera.
- X (Twitter): X caduca las cachés de tarjetas por sí solo, generalmente en unos pocos días. Ya no hay un botón público de actualización manual, por lo que cambiar la URL de la imagen es la solución alternativa confiable.
- Discord y Slack: Ambos almacenan en caché las vistas previas. El truco confiable es cambiar el nombre del archivo de imagen o agregar una cadena de consulta (por ejemplo,
og-image.jpg?v=2), que la plataforma trata como una URL completamente nueva sin caché.
El truco de la cadena de consulta (?v=2, ?v=3) es el recurso universal. Debido a que la caché está vinculada a la URL exacta de la imagen, una nueva URL evita la entrada desactualizada en todas las plataformas a la vez. Combínalo con un nuevo rastreo manual en Facebook y LinkedIn y tu vista previa se actualizará en todas partes.
Por qué tu imagen podría no haber aparecido nunca#
Si la vista previa estaba rota desde la primera vez que se compartió, la caché no es la causa. Verifica esto en orden:
- URL de imagen relativa.
og:imagedebe ser absoluta (https://...), no/og.jpg. - Imagen detrás de autenticación o redirección. Los rastreadores no pueden seguir inicios de sesión. Abre la URL de la imagen en una ventana de incógnito para confirmarlo.
- Archivo demasiado grande o formato incorrecto. Mantente por debajo de ~5 MB y usa JPG o PNG.
- Etiqueta usando
nameen lugar deproperty. Recuerda: las etiquetasog:necesitanproperty, noname. - Etiquetas inyectadas por JavaScript después de la carga. Muchos rastreadores no ejecutan JS, por lo que las etiquetas OG deben estar en el HTML renderizado por el servidor, no agregadas del lado del cliente.
Ese último punto atrapa a muchas aplicaciones de una sola página. Si tus etiquetas solo aparecen después de que React o Vue se hidratan, renderízalas en el servidor o prerrenderiza la página para que el rastreador las vea en la respuesta HTML inicial.
Generar el Bloque Completo de Etiquetas Sin Codificar a Mano#
Escribir las etiquetas a mano una vez es bueno para entender. Hacerlo para cada página es repetitivo y fácil cometer errores sutiles (un property faltante, una URL relativa, una Twitter Card olvidada). Un generador elimina el trabajo tedioso mientras mantienes el control de los valores.
El generador de etiquetas Open Graph y meta te permite escribir tu título, descripción y URL de imagen, y luego genera el bloque completo y correcto con etiquetas og: y twitter: listas para pegar. Usa property y name correctamente, convierte las URLs en absolutas e incluye las etiquetas de dimensiones de imagen para que las plataformas rendericen más rápido.
Luego pasa el resultado por la herramienta de vista previa social y SERP para confirmar que la tarjeta se vea bien antes de publicarla. Ese ciclo de dos pasos, generar y luego previsualizar, es cómo envías vistas previas de enlaces que funcionan la primera vez, en lugar de depurarlas en público después de que una publicación ya se haya visto mal.
Conclusión#
Aprender a agregar etiquetas Open Graph se reduce a una rutina corta y repetible: inserta las cinco etiquetas og: principales más un bloque de Twitter Card en tu <head>, apunta og:image a un JPG o PNG absoluto de 1200x630, y luego valida con el depurador de cada plataforma antes de compartir. Cuando una vista previa se niega a actualizar, la causa casi siempre es una copia en caché, y la solución es un re-escaneo forzado o una URL de imagen nueva, no paciencia.
Domina estos fundamentos y cada enlace que compartas, en Facebook, LinkedIn, X, Discord, Slack y más, mostrará una tarjeta limpia y con marca que genera clics. Genera las etiquetas, previsualiza la tarjeta y publica con confianza.
Preguntas Frecuentes#
¿Dónde van las etiquetas Open Graph en mi HTML?
Las etiquetas Open Graph van dentro de la sección <head> de tu página, junto con otras metaetiquetas. Deben estar presentes en el HTML renderizado por el servidor para que los rastreadores externos puedan leerlas, ya que la mayoría de los rastreadores no ejecutan JavaScript que agregue etiquetas después de que la página se carga.
¿Cuál es el tamaño correcto de og:image? Usa 1200 x 630 píxeles con una relación de aspecto de 1.91:1. Este tamaño único se renderiza correctamente en Facebook, LinkedIn, X, Discord y Slack sin recortes incómodos. Mantén el archivo por debajo de unos 5 MB, usa JPG o PNG, y sírvelo a través de HTTPS con una URL absoluta.
¿Por qué mi vista previa de enlace no muestra una imagen?
Las causas más comunes son una URL relativa de og:image en lugar de una absoluta https://, una imagen detrás de un inicio de sesión o redirección, un archivo demasiado grande, o usar name en lugar de property en las etiquetas og:. Si la imagen era correcta pero cambió y no se actualiza, la plataforma almacenó en caché la versión anterior y necesitas forzar un nuevo rastreo.
¿Cómo actualizo una vista previa de Open Graph almacenada en caché?
Usa el Depurador de Compartir de Facebook y haz clic en "Rastrear de nuevo", y ejecuta la URL a través del Inspector de Publicaciones de LinkedIn para forzar una nueva obtención. Para Discord, Slack o cualquier caché persistente, cambia el nombre del archivo de imagen o agrega una cadena de consulta de versión como ?v=2, que la plataforma trata como una nueva URL sin caché obsoleto.
¿Necesito etiquetas de Twitter Card si ya tengo etiquetas Open Graph?
No estrictamente, porque X recurre a tus etiquetas og: cuando faltan las etiquetas de Twitter Card. Pero agregar twitter:card configurado como summary_large_image vale la pena, ya que fuerza la tarjeta de imagen grande tipo banner en lugar de una miniatura pequeña, lo que funciona notablemente mejor en el feed.
¿Las etiquetas Open Graph ayudan a mi posicionamiento en Google? No, las etiquetas Open Graph no influyen directamente en el posicionamiento en Google. Controlan cómo aparecen tus enlaces en plataformas sociales y de chat, lo que genera clics y compartidos. Ese tráfico de referencia y de marca es valioso por sí mismo, pero es un canal separado de las señales de clasificación de búsqueda orgánica.
