Qué es una Twitter Card (X Card)

El nombre ha sobrevivido al cambio de marca. La plataforma pasó a llamarse X en 2023 y las etiquetas siguen llamándose twitter:card, twitter:site o twitter:image. No existe un prefijo x: equivalente, y la comprobación es directa: la portada de la documentación para desarrolladores de X sirve hoy en su cabecera una etiqueta twitter:card con el valor summary_large_image.

La segunda cosa que conviene saber es que la sección de Cards ha desaparecido del portal de documentación. Las direcciones antiguas de developer.x.com dedicadas a Cards redirigen a la portada, y el índice actual de «X for Websites» cubre publicaciones insertadas, botones, timelines y oEmbed, sin apartado de Cards. La referencia técnica completa solo se puede consultar en copias archivadas, y esa es la base de las cifras que aparecen más abajo.

Frente a Open Graph, que ya tiene entrada propia en este glosario, la relación es de capas. Open Graph es el estándar general que leen muchos servicios y describe el contenido de la página. Las etiquetas twitter: son la capa específica de X, que se superpone y decide sobre todo el formato de la tarjeta. La entrada de Open Graph explica qué propiedades og: rellenar; esta explica qué añade X encima y qué ocurre si no añades nada.

El proceso empieza cuando alguien publica el enlace. El rastreador de X, identificado como Twitterbot, pide la página, lee las etiquetas meta de la cabecera y monta la tarjeta. Si robots.txt bloquea ese rastreador no hay tarjeta; si bloquea la imagen, la tarjeta sale sin imagen. El resultado queda en caché durante siete días según la última documentación publicada.

El orden de lectura es lo que más confusión ahorra. El procesador busca primero la propiedad específica de X y, si no está, recurre a la propiedad equivalente de Open Graph. Así, twitter:title cede el paso a og:title, twitter:description a og:description, twitter:image a og:image y twitter:image:alt a og:image:alt. Con og:type, og:title y og:description presentes y sin twitter:card, puede renderizarse una tarjeta de tipo resumen. Además, el analizador acepta el atributo property de Open Graph, así que no hace falta duplicar el marcado que ya tengas.

Quedan cuatro tipos vivos y el valor de twitter:card elige entre ellos: summary, summary_large_image, app y player. Solo se admite un tipo por página, y si aparecen varias etiquetas twitter:card manda la última. Los tipos photo, gallery y product se retiraron el 3 de julio de 2015 y se reasignaron automáticamente a los dos formatos de resumen.

Los límites documentados son concretos: título hasta 70 caracteres, descripción hasta 200, texto alternativo hasta 420 y una imagen por debajo de 5 MB en JPG, PNG, WEBP o GIF. SVG no se admite. Un marcado mínimo y suficiente queda así:

<meta name="twitter:card"
      content="summary_large_image">
<meta name="twitter:site"
      content="@tu_cuenta">
<meta property="og:title"
      content="Título de la página">
<meta property="og:description"
      content="Resumen del contenido.">
<meta property="og:image"
      content="https://ejemplo.com/og.jpg">
<meta name="twitter:image:alt"
      content="Descripción de la imagen.">

La primera decisión práctica es cuántas etiquetas mantener. Si el sitio ya tiene Open Graph correcto, bastan dos líneas propias de X: twitter:card para elegir el formato y twitter:site para la atribución de la cuenta. El resto lo cubre el respaldo. Duplicar título, descripción e imagen en los dos vocabularios multiplica los sitios donde una plantilla puede quedarse desincronizada, y el fallo se ve en público.

La segunda es qué formato pides. Sin twitter:card puedes acabar con la tarjeta pequeña de resumen aunque tu imagen sea apaisada y esté pensada para compartirse, porque el formato ancho hay que pedirlo. Es una línea de plantilla y cambia el espacio que ocupa el enlace en el hilo.

La tercera es cómo se verifica el resultado ahora que no hay herramienta oficial. Eso cambia el flujo de trabajo: la comprobación pasa a hacerse pegando la URL en el compositor de la propia aplicación, y la caché de siete días implica que una corrección publicada hoy puede tardar en verse. Conviene comprobarlo antes de anunciar la publicación, no después.

• Rellena Open Graph primero y añade encima solo twitter:card y twitter:site; el resto de valores se hereda por respaldo y hay menos sitios que mantener.
• Declara el formato de forma explícita con summary_large_image cuando la página tenga una imagen apaisada pensada para compartir.
• Respeta la sintaxis de cada vocabulario: name para las etiquetas twitter: y property para las og:, sin reescribir el marcado existente.
• Sirve la imagen desde una URL accesible sin sesión ni cookies, por debajo de 5 MB, en JPG, PNG, WEBP o GIF, y descarta SVG.
• Añade twitter:image:alt con una descripción real de la imagen, dentro del límite de 420 caracteres.
• Comprueba el resultado pegando la URL en el compositor de la aplicación antes de publicar, y cuenta con la caché de siete días cuando corrijas algo.

• Dejar varias etiquetas twitter:card en la misma plantilla suponiendo que gana la primera: manda la última.
• Bloquear al rastreador en robots.txt o servir la imagen desde una ruta protegida, y luego buscar el fallo en las etiquetas.
• Seguir usando photo, gallery o product, tipos retirados en 2015 y reasignados a los formatos de resumen.
• Contar con un validador oficial que ya no está disponible: la dirección del antiguo Card Validator lleva hoy a la pantalla de inicio de sesión.
• Cambiar la imagen y esperar que el cambio se vea al instante, sin tener en cuenta la caché.