Añade etiquetas de Twitter / X Cards

Qué comprueba esta auditoría

Escanea el <head> de la página en busca de <meta name="twitter:card" content="…"> y (cuando corresponda) twitter:image, twitter:title, twitter:description y twitter:site. La comprobación falla cuando no hay twitter:card y X tiene que recurrir a un tipo de previsualización más pequeño — o a ninguna previsualización.

Por qué importa

X (anteriormente Twitter) renderiza las URLs publicadas en uno de tres formatos de previsualización:

summary_large_image — una tarjeta a todo el ancho con imagen y, debajo, título y descripción. El formato de alta conversión que toda marca quiere.
summary — una tarjeta con miniatura pequeña. Es lo que sale por defecto si no hay twitter:card pero sí hay etiquetas Open Graph.
Sin tarjeta — una URL pelada, sin previsualización. Lo que ocurre cuando no hay ni OG ni etiquetas de Twitter.

Una tarjeta summary_large_image consigue mucho más share-rate y CTR que una summary; ambas aplastan a una URL pelada. La diferencia es una sola meta.

Cómo solucionarlo

Pon cuatro etiquetas meta en <head>. Tres de ellas pueden replicar tus etiquetas de Open Graph — X recurre a los valores de OG si faltan los equivalentes de Twitter, pero declarar las de Twitter explícitas te permite definir una imagen distinta para X si quieres:

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Auditoría SEO gratuita en 60 segundos — MetricSpot">
  <meta name="twitter:description" content="Mira lo que ven los agentes de IA y Google en tu sitio. 91 comprobaciones, sin registro.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

El mínimo que necesitas es twitter:card. Si tu página ya tiene Etiquetas Open Graph, X las lee para título/descripción/imagen. La etiqueta twitter:card por sí sola es la que le dice a X que renderice la versión con imagen grande en lugar de miniatura pequeña.

Reglas de imagen (las mismas que para la imagen OG):

1200×630 (2:1) o más ancha — mínimo 300×157, máximo 5 MB.
PNG o JPG. WEBP funciona en la mayoría de plataformas, pero el renderer de X ha sido inconsistente — quédate con PNG/JPG.
Mira la página dedicada de Imagen Open Graph para los detalles de tamaño y generación dinámica.

Astro / Next.js — generar desde frontmatter junto a OG:

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress — Yoast SEO, Rank Math y SEOPress emiten las etiquetas de Twitter Card automáticamente. En Yoast: SEO → Social → Twitter → “Añadir metadatos de Twitter card” → On.

Tipos de tarjeta que conviene conocer.

summary_large_image — lo que quieres el 95% del tiempo.
summary — miniatura pequeña + texto. Útil para posts muy textuales donde la imagen no es el punto.
player — reproductor embebido de vídeo/audio. Nicho; requiere whitelisting por X.
app — promociona una instalación de app móvil. Usa los campos de App Store ID.

El antiguo Card Validator se descontinuó en 2023. Para verificar, publica la URL en un borrador (sin publicar) y X te mostrará la tarjeta renderizada — o usa una herramienta de terceros como opengraph.xyz, que renderiza previsualizaciones de Twitter y OG.

Preguntas frecuentes

¿Necesito etiquetas Open Graph y de Twitter Card a la vez?

X recurre a Open Graph si no hay etiquetas de Twitter, así que solo con OG ya te sale una tarjeta — pero solo una pequeña. Para forzar el layout con imagen grande necesitas al menos <meta name="twitter:card" content="summary_large_image">. El resto puede caer hacia OG.

Mi previsualización está rota — ¿cómo la refresco?

X cachea los scraps de previsualización hasta 7 días. La caché se invalida cuando cambias la URL canónica o cuando expira la entrada. Ya no existe una herramienta pública de “refresh” — el truco es añadir un parámetro de cache-busting (?v=2) a la URL una vez, publicar la URL modificada, y luego volver a la URL limpia.

¿Y Mastodon, Bluesky, LinkedIn?

Todas usan Open Graph, no Twitter Cards. Acierta con OG y se renderizarán correctamente de forma automática. Mira Etiquetas Open Graph e Imagen Open Graph.