Las Twitter Cards —oficialmente X Cards desde el cambio de marca, aunque las etiquetas siguen llamándose twitter:— convierten un enlace pelado en una tarjeta con título, descripción e imagen. Son cuatro meta tags en el head y una particularidad que ahorra la mitad del trabajo: X usa tus etiquetas de Open Graph cuando faltan las suyas.
Las etiquetas y cuál es obligatoria
| Etiqueta | Qué hace | ¿Obligatoria? |
|---|---|---|
| twitter:card | Define el diseño de la tarjeta. Sin ella no hay tarjeta. | Sí |
| twitter:title | El titular de la tarjeta. | No — cae a og:title |
| twitter:description | El texto de apoyo bajo el titular. | No — cae a og:description |
| twitter:image | La imagen. URL absoluta, nunca relativa. | No — cae a og:image |
| twitter:site | Atribuye la tarjeta a tu @cuenta. | No |
La única estrictamente necesaria es twitter:card. Si ya tienes Open Graph bien puesto, añadir solo esa etiqueta te da una tarjeta correcta sin duplicar título, descripción e imagen.
Los cuatro tipos de tarjeta
| Tipo | Cómo se ve | Cuándo usarlo |
|---|---|---|
| summary | Imagen pequeña cuadrada a la izquierda del texto. | Contenido donde la imagen acompaña pero no vende: documentación, notas. |
| summary_large_image | Imagen grande arriba, texto debajo. Ocupa mucho más espacio. | Lo habitual: artículos, fichas de producto, cualquier página con una imagen decente. |
| app | Ficha de aplicación con enlace a la tienda. | Solo para apps móviles. |
| player | Reproductor de vídeo o audio embebido. | Requiere aprobación previa de X. |
En la práctica la decisión es entre las dos primeras, y summary_large_image gana casi siempre: la tarjeta ocupa bastante más superficie en el timeline y eso se nota en los clics.
La imagen: lo que más falla
- •URL absoluta, con https y dominio completo. Una ruta relativa no la resuelve el rastreador de X.
- •La imagen tiene que ser accesible sin cookies ni login. Si está detrás de un CDN con firma temporal, la tarjeta se queda sin imagen.
- •Para summary_large_image la proporción es apaisada; para summary, cuadrada. Usar una vertical hace que X la recorte por el centro y se coma lo importante.
- •Si cambias la imagen, X sirve la versión cacheada un tiempo. Cambiar la URL del archivo fuerza el refresco.
Cuándo X ignora tus etiquetas
Hay tres motivos habituales por los que una página con las etiquetas correctas sigue apareciendo como un enlace pelado:
- 1.La página bloquea al rastreador de X en robots.txt. Es el caso más frecuente y el más invisible, porque el HTML es perfecto pero nadie llega a leerlo.
- 2.Las etiquetas se inyectan con JavaScript. El rastreador lee el HTML servido, no el renderizado.
- 3.Falta twitter:card y tampoco hay Open Graph. Sin ninguna de las dos, no hay nada de donde construir la tarjeta.
Compruébalo antes de publicar
La tarjeta se ve una vez y no hay segunda oportunidad: si publicas el enlace con la imagen mal, el tuit ya está fuera. Analiza la URL antes y confirma que las cuatro etiquetas están presentes, que la imagen es absoluta y que el tipo de tarjeta es el que quieres.
Prueba la herramienta gratis
Analiza tus URLs con Previsualizador de SERP y meta tags de iRankly. Sin registro, sin tarjeta.
Las etiquetas que X usa cuando faltan las suyas, y el resto de meta tags: