Twitter Card: qué es, tipos y cómo crearla en tu web y en X

Una Twitter Card es una tarjeta que se muestra bajo un enlace cuando lo compartes en la red social, con título, descripción e imagen en lugar de una simple dirección. Se activa añadiendo unas etiquetas meta en el código de la página enlazada. Aunque Twitter se llame ahora X, esas etiquetas siguen funcionando con el mismo prefijo «twitter:» y se siguen llamando Twitter Cards en la práctica.

Un enlace sin tarjeta es una línea de texto que casi nadie pulsa. Con tarjeta, ocupa más espacio, enseña una imagen y presenta el contenido con un titular, y eso aumenta los clics. Es una de las mejoras más baratas que puedes hacer en un blog o en una tienda que comparta contenido en X.

En este artículo te explico qué es exactamente, qué tipos existen, cómo se crea con unas pocas líneas de código o con un plugin, cómo comprobarla y qué cambió desde que Twitter pasó a ser X.

Qué es una Twitter Card

Cuando pegas la dirección de una página en una publicación de X, la plataforma lee el código de esa página buscando unas etiquetas concretas. Si las encuentra, construye una tarjeta con esos datos. Si no, lo intenta con las etiquetas de Open Graph (las que usa Facebook) y, si tampoco hay, muestra un enlace con el texto que haya podido extraer.

Una Twitter Card no se parece a anclar una publicación en tu perfil. Su función es ayudar a que cualquier enlace a tu web, compartido por ti o por otras personas, se vea bien. Eso supone tres ventajas:

• Más visibilidad. La imagen grande ocupa más espacio en la cronología.
• Mejor imagen de marca. Controlas el título, la descripción y la foto en lugar de dejar que los elija la red.
• Más tráfico. Una tarjeta atractiva anima a pulsar, algo que mides con el contador de clics de tus enlaces.

Un matiz importante: la tarjeta la crea tu web, no la red social. Por eso no hay que tener una cuenta de pago ni pedir permiso a nadie.

Tipos de tarjetas

X admite varios tipos, que se eligen con la etiqueta «twitter:card».

Tarjeta de resumen

Es la más sencilla: un título, una descripción y una miniatura pequeña. Sirve para páginas con poco contenido visual o cuando no tienes imágenes de calidad. Su valor es «summary».

Tarjeta de resumen con imagen grande

Igual que la anterior, pero con una imagen que ocupa el ancho del mensaje. Es la que más recomiendo para blogs, noticias y páginas de producto, porque la imagen llama la atención. Su valor es «summary_large_image». La imagen debe tener una proporción de 2:1 (por ejemplo 1200 por 600 píxeles) y pesar menos de 5 MB.

Tarjeta de aplicación

Lleva a la descarga de una aplicación móvil. Muestra el icono, el nombre y los botones de la tienda de aplicaciones. Su valor es «app». Solo tiene sentido si tienes una aplicación propia.

Tarjeta de reproductor

Permite reproducir un vídeo o un audio dentro de la propia publicación. Su valor es «player». Requiere alojar el contenido en una dirección segura (https) con un reproductor compatible, y su configuración es más técnica que las demás. En la práctica, mucha gente prefiere subir el vídeo directamente a X.

Las tarjetas de galería, producto y las de captación de clientes, que existieron en el pasado, se retiraron. Hoy las que debes conocer son las cuatro anteriores.

Cómo crear una Twitter Card

Hace años había que entrar en una página de desarrolladores de Twitter, elegir el tipo y generar el código. Hoy el proceso es más sencillo, y no necesita iniciar sesión.

Paso 1: elige el tipo de tarjeta

Para casi todos los casos, «summary_large_image». Si no tienes imagen, «summary».

Paso 2: añade las etiquetas meta al código de la página

Se escriben dentro de la sección de cabecera (head) del HTML. Un ejemplo para un artículo:

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@tuempresa">

<meta name="twitter:creator" content="@tuusuario">

<meta name="twitter:title" content="Título del artículo">

<meta name="twitter:description" content="Descripción breve del contenido">

<meta name="twitter:image" content="https://tuweb.com/imagen.jpg">

Solo debes cambiar el texto que aparece entre comillas después de «content». Lo demás es la estructura que lee X.

Paso 3: usa un plugin si tienes WordPress

No hace falta tocar el código. Plugins de SEO como Rank Math o Yoast añaden las etiquetas por ti: eliges el tipo de tarjeta, la cuenta y la imagen por defecto, y cada entrada hereda su título, descripción e imagen destacada. En mi trabajo lo habitual es configurar eso una vez y comprobar tres o cuatro páginas de ejemplo.

Paso 4: comprueba el resultado

Antes existía un validador oficial de tarjetas, pero ya no está disponible. Hoy la forma más práctica es escribir la dirección en el editor de una publicación de X, sin publicarla, y ver la vista previa que genera. Si has hecho cambios y la tarjeta antigua se queda en caché, espera un tiempo o añade un parámetro al final de la URL para forzar una nueva lectura. Para ver el aspecto general de las etiquetas también puedes usar herramientas de vista previa de redes sociales.

Cómo optimizar tus tarjetas para conseguir más clics

• Imagen con texto legible. Evita letras pequeñas: en el móvil se ven diminutas. Usa un titular corto y un fondo con contraste.
• Título que invita a pulsar. Distinto del título de SEO si hace falta, pero coherente con el contenido.
• Descripción útil. Una frase que explique qué se gana al abrir el enlace.
• Texto alternativo de la imagen. Con la etiqueta twitter:image:alt ayudas a las personas que usan lector de pantalla.
• Coherencia con Open Graph. Si ya tienes etiquetas og:title, og:description y og:image, X las usa de reserva. Mantener ambas consistentes evita sorpresas.
• Imágenes propias. Una foto genérica de banco de imágenes aporta poco. Si puedes crear una portada con tu marca para cada artículo, mejor.

Si te interesa que tus publicaciones en X funcionen mejor, mira cómo conseguir seguidores en Twitter y la guía de ventajas y desventajas de Twitter. Las etiquetas también ayudan al SEO técnico de tu web, un tema que trabajo en SEO técnico.

Qué ha cambiado desde que Twitter es X

Twitter pasó a llamarse X en julio de 2023. El cambio de nombre no rompió las tarjetas: las etiquetas siguen utilizando «twitter:» y funcionan igual. Lo que sí ha cambiado es la documentación, que ahora está en el sitio de desarrolladores de X, y algunos servicios asociados, como el antiguo validador. Puedes consultar la documentación oficial en la página sobre las tarjetas de X, donde se explican los tipos y las etiquetas.

También ha variado el alcance orgánico de los enlaces: la plataforma ha dado menos prioridad a los mensajes con enlaces externos en la cronología, según han comentado varios creadores. Eso no anula el valor de la tarjeta, porque sigue mejorando cómo se ve el enlace cuando lo comparten otros, pero invita a no depender solo de X para llevar tráfico a la web.

Errores habituales con las Twitter Cards

• Imagen demasiado pequeña o mal recortada. Si no cumple el tamaño mínimo, X muestra la tarjeta pequeña o ninguna.
• Imágenes bloqueadas. Si el archivo está detrás de un bloqueo (robots.txt, contraseña, hotlink), X no puede leerlo.
• Etiquetas duplicadas. Un plugin y el tema añaden las mismas etiquetas con valores distintos. Deja solo una fuente.
• No actualizar tras un cambio. La tarjeta se guarda en caché, por lo que un cambio puede tardar en verse.
• Título larguísimo. Se corta y pierde sentido.
• Olvidar la cuenta de X. Sin twitter:site no se atribuye la tarjeta a tu perfil.

Mi recomendación

Configura una tarjeta de imagen grande para todas tus páginas y una portada por artículo. Es una tarea de una tarde y mejora el aspecto de cada enlace que se comparta, en X y en otras redes que leen Open Graph. Una vez configurada, revisa dos o tres enlaces cada vez que cambies de tema o de plugin de SEO, porque es en esos momentos cuando se rompen.

Si no usas X como canal importante, no inviertas más tiempo del necesario: ten las etiquetas bien puestas y dedica el esfuerzo a donde está tu audiencia.

Preguntas frecuentes

¿Las Twitter Cards siguen funcionando desde que Twitter se llama X?

Sí. Las etiquetas meta con el prefijo «twitter:» siguen siendo las que lee la plataforma, y la documentación oficial las mantiene. Lo que cambió fue el nombre de la red, el sitio de desarrolladores y la desaparición del validador antiguo de tarjetas.

¿Qué diferencia hay entre Twitter Cards y Open Graph?

Open Graph es el protocolo que usa Facebook y otras redes para mostrar vistas previas. Twitter Cards es el equivalente de X. Si falta una etiqueta de Twitter, X usa la de Open Graph como alternativa, así que lo mejor es tener ambas coherentes.

¿Qué tamaño debe tener la imagen de una Twitter Card?

Para la tarjeta de imagen grande, una proporción 2:1 con un mínimo de 300 por 157 píxeles y un máximo de 4096 por 4096, y menos de 5 MB. En la práctica uso 1200 por 600 píxeles, que se ve bien en cualquier dispositivo.

¿Cómo compruebo mi tarjeta si ya no existe el validador?

Pega la dirección en el editor de una publicación de X sin publicarla y mira la vista previa. También puedes usar herramientas de terceros que muestran cómo se verá el enlace en distintas redes. Si el resultado no cambia tras un ajuste, espera un rato por la caché.

¿Necesito un plugin para crear Twitter Cards en WordPress?

No es obligatorio, pero es lo más cómodo. Los plugins de SEO más usados incluyen un apartado para activar las tarjetas y elegir imagen y cuenta. Si prefieres hacerlo a mano, tendrás que añadir las etiquetas en la cabecera del tema, mejor con un tema hijo.