Cuando compartes un enlace en X (antes Twitter), la plataforma intenta generar una vista previa, una llamada Twitter Card. Sin las metaetiquetas adecuadas, tu enlace aparece como una URL plana. Sin embargo, con Twitter Cards bien configuradas, X extrae un título, una descripción y una imagen, convirtiendo tu enlace compartido en un teaser visual que la gente tiene muchas más probabilidades de pulsar.
Cómo generan las Twitter Cards las vistas previas de enlaces
Una Twitter Card no es algo que tú subas o diseñes. La genera automáticamente X a partir de las metaetiquetas del HTML de la página enlazada. Cuando alguien pega tu URL en un tweet, el rastreador de X visita la página, lee las metaetiquetas y compone la vista previa. Si las etiquetas faltan o están mal configuradas, la vista previa estará incompleta o no aparecerá en absoluto.
Summary Card frente a Summary Card with Large Image
X admite varios tipos de tarjeta, pero en la práctica solo te encontrarás con dos:
- Summary Card: una vista previa compacta con una pequeña miniatura a la izquierda y el título y la descripción a la derecha. Es lo que usan la mayoría de las entradas de blog, artículos y páginas de documentación. La miniatura es cuadrada, normalmente de al menos 144×144 píxeles.
- Summary Card with Large Image: la imagen ocupa todo el ancho sobre el texto. Funciona bien para landing pages, páginas de producto, piezas de portafolio o cualquier página donde lo visual sea el principal gancho. La imagen debe tener al menos 300×157 píxeles, idealmente 1200×628 para una visualización nítida en pantallas de alta resolución.
Antes existían tipos adicionales (Player Card para audio/vídeo, App Card para aplicaciones móviles), pero la mayoría de los sitios nunca los necesitarán.
Metaetiquetas Twitter Card requeridas
Colócalas en la sección <head> de tu página:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título de tu página" />
<meta name="twitter:description" content="Una breve descripción de tu página." />
<meta name="twitter:image" content="https://example.com/imagen.jpg" />
<meta name="twitter:site" content="@TuHandle" />La etiqueta twitter:card determina el diseño. La etiqueta twitter:site es opcional, pero añade tu handle como atribución bajo la tarjeta.
Twitter Cards y Open Graph: cómo funciona el fallback
Hay algo que muchos propietarios de sitios no saben: X recurre a las etiquetas Open Graph (las que usan Facebook, LinkedIn y WhatsApp) si faltan las etiquetas específicas de Twitter. Por eso, si ya tienes og:title, og:description y og:image configuradas, tu enlace seguirá generando una vista previa en X, solo que sin el control explícito que te dan las etiquetas Twitter Card.
En la práctica, esto significa que un plugin SEO bien configurado como Yoast o Rank Math suele encargarse de lo básico automáticamente. Pero confiar en el fallback tiene desventajas: las dimensiones de la imagen pueden no ser ideales para el diseño de X, y la descripción puede recortarse de forma diferente. Para el resultado más limpio, configura ambos conjuntos de etiquetas.
Solución de problemas: la vista previa de Twitter Card no aparece
Aunque las etiquetas estén presentes, las cosas pueden salir mal:
- Problemas de caché: X cachea las vistas previas de las tarjetas de forma agresiva. Si corriges una imagen rota o actualizas un título, la vista previa antigua puede mantenerse durante días. Puedes forzar una actualización usando la herramienta Card Validator de X.
- Imagen demasiado pequeña: si tu imagen está por debajo del tamaño mínimo, X puede ignorarla por completo y no mostrar ninguna imagen de vista previa.
- URL relativas: el valor de
twitter:imagedebe ser una URL absoluta. Las rutas relativas como/images/header.jpgno funcionan. - Robots bloqueando al rastreador: si tu
robots.txtbloquea a Twitterbot, X no puede leer tus metaetiquetas y no generará una tarjeta.
Configurar Twitter Cards en WordPress
WordPress por sí mismo no genera metaetiquetas Twitter Card por defecto. Necesitas un plugin SEO (Yoast SEO, Rank Math, The SEO Framework) o un plugin específico de redes sociales para generarlas. La mayoría de estos plugins te permiten establecer un tipo de tarjeta por defecto para todo el sitio y sobrescribir la imagen y la descripción por entrada o página.
Si usas WooCommerce, comprueba tus páginas de producto por separado. A veces necesitan configuración adicional porque la imagen y la descripción del producto deberían tomarse de los datos del producto, no de los campos genéricos de la página.
Comprueba tus etiquetas Twitter Card con InspectWP
InspectWP lee las metaetiquetas de tu sitio WordPress y te muestra exactamente qué etiquetas Twitter Card están presentes (o ausentes). El informe muestra el tipo de tarjeta detectado, el título, la descripción, la URL de la imagen y el handle del sitio, para que puedas verificar que la vista previa tendrá el aspecto que quieres antes de compartir tu contenido.