¿Qué es twitter:card?
La meta etiqueta twitter:card indica a X (antes Twitter) qué tipo de previsualización mostrar cuando se comparte tu enlace. Sin ella, X recurre a una previsualización mínima que genera mucha menos interacción.
Tipos de tarjeta
summary_large_image (Recomendado)
- Imagen grande sobre el título y la descripción
- Ideal para: Entradas de blog, artículos, landing pages y la mayoría de contenidos
- La imagen se muestra con una proporción 2:1 (p. ej., 1200x600px)
- Es la que obtiene más clics e interacción
summary
- Miniatura cuadrada pequeña junto al título y la descripción
- Ideal para: Página de inicio, perfiles, contenido sin una imagen destacada
- La imagen se muestra con una proporción 1:1 (mínimo 144x144px)
player
- Incrusta un reproductor de vídeo o audio directamente en el tweet
- Ideal para: Contenido en vídeo, podcasts, música
- Requiere etiquetas adicionales y aprobación por parte de Twitter
app
- Muestra una tarjeta de instalación de app con botón de descarga
- Ideal para: Promoción de aplicaciones móviles
¿Por qué es importante?
Los tweets con tarjetas summary_large_image obtienen hasta un 40 % más de clics que los tweets con enlaces planos. El formato de imagen grande domina la cronología y atrae la atención.
Cómo solucionarlo
<meta name="twitter:card" content="summary_large_image" />Configuración completa de Twitter Cards
Para obtener los mejores resultados, incluye todas las etiquetas de Twitter relevantes:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description of your page" />
<meta name="twitter:image" content="https://yoursite.com/twitter-image.jpg" />
<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@authorhandle" />Comportamiento de respaldo de Twitter
X/Twitter comprueba las etiquetas en este orden:
- Etiquetas
twitter:*(prioridad más alta) - Etiquetas
og:*(respaldo) <title>de la página y contenido (último recurso)
Así que si tienes og:title definido, X lo usará incluso sin un twitter:title. Pero twitter:card no tiene equivalente en Open Graph, por lo que debe establecerse explícitamente.
Comprueba tu tarjeta
Usa el Card Validator de X para previsualizar cómo aparecerá tu enlace antes de compartirlo.