Generador de Twitter Cards
Elige un tipo de tarjeta, introduce el título, la descripción y la imagen, comprueba cómo se ve la tarjeta en una publicación de X y copia las metaetiquetas twitter: para el head de tu página.
- 4 tipos de tarjeta
- Vista previa clara y oscura
- Comprobación de imagen
- Funciona en tu navegador
Tarjeta
La @ se añade automáticamente.
Opcional: la persona que ha escrito la página.
Una vista previa web no puede cargar imágenes de otros sitios, así que elige el archivo desde tu dispositivo. Solo se muestra aquí y se mide: nunca sale de tu dispositivo.
Los lectores de pantalla la leen en voz alta. Hasta 420 caracteres.
Se usa para la línea del dominio en la vista previa y para og:url. X no tiene una etiqueta propia para ello.
Player
Una página https:// que solo contenga el reproductor y funcione dentro de un iframe.
Opcional: dirección directa del archivo de vídeo o audio (MP4 o AAC).
App
Código de dos letras como US o DE; solo hace falta cuando la app no está en la tienda de EE. UU.
Vista previa
La vista previa sigue el diseño actual de X: las tarjetas grandes muestran el título sobre la imagen y el dominio debajo, y la descripción no se muestra. X guarda una tarjeta en caché durante una semana aproximadamente tras la primera publicación.
Lista de comprobación
Código HTML
X lee og:title, og:description y og:image cuando faltan twitter:title, twitter:description y twitter:image. Con esta opción activada, esas tres se escriben una sola vez como etiquetas Open Graph, que también usan Facebook, LinkedIn y WhatsApp. twitter:card no tiene alternativa y se mantiene siempre.
Importar desde un HTML existente
El código pegado solo se lee como texto dentro de tu navegador. Sus scripts nunca se ejecutan, no se carga nada desde él y no se envía nada a ningún sitio. Al importar se sustituye lo que haya ahora en el formulario.
Cómo crear una tarjeta de X (Twitter)
El código y la vista previa se actualizan mientras escribes.
- 1
Elige el tipo de tarjeta
Imagen grande para artículos y páginas de destino, summary para una imagen cuadrada pequeña, player para vídeo o audio y app para una aplicación móvil.
- 2
Rellena la tarjeta
Introduce la cuenta de X del sitio, el título, la descripción, la URL de la imagen y el texto alternativo. Elige el archivo de imagen en tu dispositivo para previsualizarlo y medirlo.
- 3
Revisa y copia
Corrige lo que señale la lista de comprobación y pega el código en el <code><head></code> de tu página.
Etiquetas de tarjeta que X lee de verdad
Los cuatro tipos de tarjeta, con sus propios campos y comprobaciones.
Vista previa en ambos temas
Muestra la tarjeta en modo claro y oscuro. Las tarjetas grandes siguen el diseño actual de X: el título va sobre la imagen y el dominio, debajo.
Comprobación de imagen según la tarjeta
Mide la imagen que eliges en tu dispositivo y avisa cuando es demasiado pequeña, supera los 4096 × 4096 px, pesa más de 5 MB o va a quedar recortada.
Tarjeta player
Campos para la página del reproductor, su ancho y su alto y una dirección de stream opcional, con una comprobación de que todas las direcciones usan https.
Tarjeta app
Nombre, ID y enlace profundo de la aplicación para iPhone, iPad y Google Play, además del país de la tienda. Se comprueba que los ID tengan el formato correcto.
Alternativa con Open Graph
Un interruptor escribe el título, la descripción y la imagen como etiquetas Open Graph, que X también lee: un código más corto que sirve además para otras redes.
Importar HTML existente
Pega el código fuente de una página para cargar en el formulario sus etiquetas de tarjeta actuales. El código pegado solo se lee como texto.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes, pegas o abres no se envía a ningún servidor.
Gratis y sin registro
Sin cuenta, sin límites y sin marca de agua: en el móvil, la tableta o el ordenador.
Cómo funcionan las tarjetas de X (Twitter)
Una tarjeta es la vista previa que X adjunta a una publicación que contiene un enlace. X descarga la página y lee las metaetiquetas twitter: de su head. La etiqueta clave es twitter:card, que selecciona uno de los cuatro tipos: summary, summary_large_image, player o app. Las etiquetas conservan el antiguo nombre de la red; el marcado no cambió en nada cuando Twitter pasó a ser X, así que no hace falta actualizar las páginas existentes.
X recurre a Open Graph. Cuando falta twitter:title, twitter:description o twitter:image, usa en su lugar og:title, og:description y og:image. Por eso, una página que ya tiene etiquetas Open Graph solo necesita twitter:card, que no tiene alternativa, y a ser posible twitter:site con la cuenta del sitio web. Ten en cuenta que las etiquetas de tarjeta usan el atributo name, mientras que las de Open Graph usan property. Esta herramienta puede escribir las dos formas: todas las etiquetas twitter: o la alternativa más corta con Open Graph.
Errores habituales: una dirección de imagen relativa o con http; una imagen SVG, que las tarjetas no muestran; una imagen ancha en una tarjeta summary, que se recorta en forma de cuadrado; un título de más de 70 caracteres, que queda cortado; y la falta de texto alternativo para la imagen. Las tarjetas player necesitan una página https que funcione dentro de un iframe, y X debe aprobarlas antes de que aparezcan. Además, X guarda una tarjeta en caché durante una semana aproximadamente, así que los cambios no se ven de inmediato.
Los cuatro tipos de tarjeta
| Tipo de tarjeta | Qué muestra | Imagen |
|---|---|---|
| <code>summary_large_image</code> | Una imagen ancha con el título encima: para artículos y páginas de destino | Aproximadamente 2:1, se recomienda 1200 × 628 px, mínimo 300 × 157 px |
| <code>summary</code> | Una imagen cuadrada pequeña junto al título y la descripción | Cuadrada, mínimo 144 × 144 px |
| <code>player</code> | Vídeo o audio que se reproduce dentro de la publicación | Una imagen de vista previa, más el ancho y el alto del reproductor |
| <code>app</code> | Una aplicación móvil con nombre, descripción y enlace a la tienda | Se toma de la tienda de aplicaciones |
Consejos
- Crea el conjunto completo de etiquetas para compartir en Facebook, LinkedIn y aplicaciones de mensajería con el Generador de Open Graph.
- Crea una imagen de tarjeta de 1200 × 628 px con el Generador de imágenes OG o recorta una existente con la herramienta Redimensionar para redes sociales.
- Etiqueta los enlaces que publicas para que las visitas aparezcan en tu analítica: el Generador de UTM compone la URL de campaña.
- Para ver la tarjeta real, pega el enlace en el editor de publicaciones de X. Si aparece una tarjeta antigua, es que sigue en la caché desde una publicación anterior.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Qué tamaño debe tener la imagen de una Twitter Card?
Para la tarjeta de imagen grande, usa una proporción aproximada de 2:1, a ser posible 1200 × 628 píxeles y como mínimo 300 × 157. La tarjeta summary muestra un cuadrado de al menos 144 × 144 píxeles. Los archivos deben pesar menos de 5 MB y estar en formato JPG, PNG, WebP o GIF.
¿Necesito etiquetas de Twitter Card si ya tengo etiquetas Open Graph?
Solo una: twitter:card, para elegir el tipo de tarjeta. X toma el título, la descripción y la imagen de las etiquetas Open Graph cuando faltan las suyas. Se recomienda añadir twitter:site con tu cuenta.
¿Las Twitter Cards se siguen llamando así en X?
La red se llama X, pero las metaetiquetas mantienen el prefijo twitter:. No existe un prefijo nuevo x:, y las etiquetas existentes siguen funcionando.
¿Por qué no aparece mi tarjeta en X?
Comprueba que twitter:card esté presente, que la dirección de la imagen sea una URL https:// completa a la que pueda acceder el rastreador de X y que robots.txt no la bloquee. Una tarjeta publicada antes permanece en la caché durante una semana aproximadamente.
¿Qué diferencia hay entre summary y summary_large_image?
La tarjeta summary muestra una imagen cuadrada pequeña junto al título y la descripción. La tarjeta de imagen grande muestra una imagen ancha que ocupa toda la publicación, con el título encima y el dominio debajo; la descripción no se muestra.
¿Se envían mis datos a un servidor?
No. La herramienta funciona por completo en tu navegador. Lo que introduces no se sube, no se registra y no se guarda en nuestros servidores.
Más herramientas SEO y web gratuitas
Genera etiquetas y archivos, comprueba códigos de estado, redirecciones, DNS y certificados: gratis y sin cuenta.