Draftcamp

Vista previa de Open Graph

Mira cómo se muestra una URL al compartirla y a qué etiqueta recurre cada plataforma realmente

Introduce una URL para ver su tarjeta

Recuperamos la página, resolvemos las etiquetas como lo hace una plataforma y te mostramos la tarjeta junto con lo que falta.

Lo que realmente lee una plataforma

Cuando pegas un enlace en Slack, LinkedIn, X o iMessage, esa plataforma carga la página y crea una tarjeta a partir de sus meta etiquetas. Nunca ejecuta tu JavaScript ni ve tu CSS: solo lee las etiquetas en el head y nada más.

La cadena de respaldo

La mayoría de plataformas resuelven en el mismo orden, y esta vista previa lo sigue:

  • Título - twitter:title, luego og:title, luego <title>
  • Descripción - twitter:description, luego og:description, luego la meta descripción
  • Imagen - twitter:image, luego og:image, luego nada

Por eso, duplicar cada etiqueta Open Graph como etiqueta de Twitter suele ser trabajo inútil. La única que realmente vale la pena configurar por separado es twitter:card, porque decide entre la imagen grande y la miniatura pequeña.

Las tres causas que explican la mayoría de las tarjetas rotas

  • Un og:image relativo. El rastreador no tiene contexto de página para resolverlo. URL HTTPS absoluta o nada.
  • Una imagen inaccesible. Detrás de autenticación, bloqueada en robots.txt o servida desde un host que rechaza agentes de usuario desconocidos.
  • Caché agresiva. Arreglaste las etiquetas y la tarjeta antigua persiste días. Facebook Sharing Debugger y LinkedIn Post Inspector fuerzan un re-análisis; la caché de X solo debe expirar.

No es una función SEO

Ninguna de estas etiquetas influye en el posicionamiento. Deciden si un enlace parece atractivo para hacer clic cuando alguien lo comparte; un enlace que se muestra como un cuadro gris con solo la URL se comparte y se clickea mucho menos.

Para escribir las etiquetas desde el principio, usa el generador de meta etiquetas en su lugar.

Preguntas frecuentes

¿Por qué mi enlace no muestra imagen al compartirlo?
Casi siempre porque falta og:image, es una ruta relativa en lugar de una URL HTTPS absoluta, o apunta a algo que la plataforma no puede obtener: detrás de autenticación, bloqueado por robots.txt o demasiado grande. El rastreador que obtiene tu tarjeta no tiene contexto de página, así que las rutas relativas no se resuelven.
¿Qué tamaño de imagen debo usar?
1200 por 630 píxeles, menos de unos 5MB. Las plataformas recortan de forma diferente, así que mantén texto y rostros alejados de los bordes. Por debajo de 600 por 315 la mayoría de plataformas bajan a la miniatura cuadrada pequeña, sin importar tu configuración twitter:card.
Actualicé las etiquetas pero sigue apareciendo la tarjeta antigua.
Las plataformas almacenan en caché agresivamente, a menudo por días. Usa Facebook Sharing Debugger y LinkedIn Post Inspector para forzar un re-raspado. X no tiene equivalente público, así que su caché debe expirar por sí sola.
¿Necesito etiquetas twitter: si ya tengo Open Graph?
Mayormente no: X recurre a Open Graph para título, descripción e imagen. La excepción es twitter:card, que decide entre imagen grande y miniatura pequeña. Esa cambia mucho la tarjeta y vale la pena configurarla explícitamente.
¿Alguno de estos aspectos afecta al SEO?
No directamente. Las etiquetas Open Graph no son factores de posicionamiento. Afectan si un enlace compartido parece atractivo para hacer clic, lo que influye en el tráfico y en las señales secundarias que eso genera; un enlace que se muestra como un cuadro gris simple en Slack simplemente se comparte menos.