Qué es una Twitter Card
Una Twitter Card es la previsualización rica que aparece cuando alguien comparte un link en X (antes Twitter). Sin Twitter Card, tu link aparece como texto plano. Con Twitter Card, aparece con imagen, título y descripción, ocupando bastante más espacio en el feed y captando más atención.
Tipos de card
- summary: thumbnail cuadrada chica al costado del título. Útil para sitios donde la imagen no es protagonista.
- summary_large_image: imagen grande horizontal arriba del título. Es la opción default para la mayoría de las landings y artículos.
- player: para video o audio embebidos. Requiere aprobación de Twitter.
- app: para promocionar apps móviles con link directo a la store.
Tamaños de imagen
Para summary_large_image: 1200x628 píxeles, ratio 1.91:1, mínimo 300x157, máximo 5 MB. Formatos JPG, PNG, WebP, GIF (estática). Para summary: 144x144 mínimo, ratio 1:1.
Cómo Twitter detecta tu card
Twitter usa un bot llamado Twitterbot que visita tu URL y parsea las meta tags. Si tu robots.txt bloquea a Twitterbot, no hay card. Tampoco hay card si el servidor responde con error 4xx/5xx, si la página tarda mucho en cargar o si las meta tags están mal formateadas.
Open Graph como fallback
Twitter es inteligente: si no encuentra meta name="twitter:..." pero sí encuentra meta property="og:..." (Open Graph), usa Open Graph como fallback. Esto significa que si ya tenés OG bien armado, la Twitter Card va a funcionar incluso sin tags específicas. Las tags de Twitter solamente sobrescriben las de OG cuando querés mostrar algo distinto en X que en Facebook o LinkedIn.
Validación y debug
Twitter cambió su validator histórico, pero podés probar tu URL pegándola en un tweet de prueba y viendo cómo renderiza. Si no aparece la card: revisá que la imagen sea pública, que el HTML tenga las meta tags, que el sitio responda 200, y borrá el cache (si la cambiaste recientemente).
Errores comunes
- Imagen relativa: usá URLs absolutas (con https://), nunca rutas relativas.
- Imagen detrás de auth: la imagen tiene que ser pública.
- Tipo equivocado: si no especificás summary_large_image, X usa summary por default.
- Cache: cambios en og:image pueden tardar en propagarse.