Generador de Twitter Cards
Rellena unos pocos campos para obtener las metaetiquetas twitter: (más las alternativas og:) que controlan cómo se ve tu enlace al compartirlo en X, con vista previa en vivo y comprobaciones de longitud y tamaño de imagen. Nada sale de tu navegador.
Última actualización:
Vista previa
Echa un vistazo a esta página 👇
Es una aproximación genérica; X cambia su diseño a menudo y puede recortar las imágenes de forma distinta en cada dispositivo.
Cómo usar Generador de Twitter Cards
- Elige un tipo de tarjeta: Imagen grande para artículos y páginas de destino, Resumen para una miniatura cuadrada pequeña, App o Reproductor para apps y vídeo.
- Rellena los campos: nombres de usuario de las cuentas, título, descripción, URL de la página, URL de la imagen y texto alternativo. Vigila los contadores.
- Revisa la vista previa y los mensajes que aparecen debajo. Carga una imagen local para comprobar su tamaño y proporción.
- Mantén activadas las alternativas Open Graph para que el mismo título y la misma imagen funcionen en Facebook, LinkedIn, Slack y otros.
- Copia las metaetiquetas en el
<head>de tu página, publícala y comparte el enlace para comprobar el resultado.
Referencia de etiquetas de Twitter Card
| Etiqueta | Se usa en | Notas |
|---|---|---|
| twitter:card | Todas las tarjetas | summary, summary_large_image, app o player. Obligatoria. |
| twitter:site | Todas las tarjetas | @usuario del sitio web o la marca. |
| twitter:creator | Imagen grande | @usuario del autor. |
| twitter:title | Resumen, imagen grande, reproductor | Hasta 70 caracteres. Si falta, se usa og:title. |
| twitter:description | Resumen, imagen grande, reproductor | Hasta 200 caracteres. Si falta, se usa og:description. |
| twitter:image | Resumen, imagen grande, reproductor | URL absoluta, menos de 5 MB, JPG/PNG/WEBP/GIF. Si falta, se usa og:image. |
| twitter:image:alt | Con una imagen | Hasta 420 caracteres de texto alternativo. |
| twitter:player, :width, :height | Reproductor | URL HTTPS de un reproductor en iframe y su tamaño en píxeles. |
| twitter:app:id:iphone / :ipad / :googleplay | App | ID numérico de App Store o nombre del paquete de Google Play. |
Tamaños de imagen de un vistazo
| Tarjeta | Relación de aspecto | Recomendado | Mínimo |
|---|---|---|---|
| summary_large_image | 2:1 | 1200 × 600 px | 300 × 157 px |
| summary | 1:1 | 400 × 400 px o más | 144 × 144 px |
| Open Graph (Facebook, LinkedIn) | 1.91:1 | 1200 × 630 px | 600 × 315 px para una vista previa grande |
Una sola imagen de 1200 × 630 funciona bastante bien en la mayoría de las redes; X la recorta ligeramente a 2:1, así que mantén el texto y los logotipos alejados de los bordes superior e inferior. Reduce los archivos grandes con el compresor de imágenes antes de subirlos.
Cómo probar tu tarjeta
Las tarjetas las genera el rastreador de X, así que las etiquetas deben estar en el HTML que envía el servidor, no insertadas después con JavaScript, y la página y la imagen deben ser públicas y no estar bloqueadas en robots.txt. Pega las etiquetas terminadas en el head de tu página, publícala y luego previsualiza el enlace compartido en un borrador de publicación. Para comprobar cómo se verán las etiquetas Open Graph de una página en otras redes, usa la vista previa de Open Graph; para el resto del head, incluidos el título y la descripción que usan los buscadores, consulta el generador de metaetiquetas.
Preguntas frecuentes
¿Qué son las Twitter Cards?
Las Twitter Cards (ahora tarjetas de X) son metaetiquetas en el head del HTML de una página que indican a X qué título, descripción e imagen mostrar cuando alguien publica un enlace a esa página. Sin ellas, X recurre a las etiquetas Open Graph y, si también faltan, muestra un enlace simple.
¿Cuál es la diferencia entre summary y summary_large_image?
summary muestra una miniatura cuadrada pequeña junto al título, mientras que summary_large_image muestra una imagen ancha encima o detrás del título. Las tarjetas de imagen grande llaman mucho más la atención en el timeline y son la opción habitual para artículos, productos y páginas de destino.
¿Qué tamaño de imagen debo usar?
Para summary_large_image usa una imagen 2:1; 1200 × 600 px funciona bien, con un mínimo de 300 × 157 px. Para summary usa una imagen cuadrada de al menos 144 × 144 px. Mantén los archivos por debajo de 5 MB y usa JPG, PNG, WEBP o GIF (de un GIF solo se muestra el primer fotograma); SVG no es compatible.
¿Necesito etiquetas twitter: y og: a la vez?
X lee primero las etiquetas twitter: y, si faltan, recurre a og:title, og:description y og:image, pero twitter:card no tiene equivalente en Open Graph. Una configuración habitual y compacta es twitter:card y twitter:site más un conjunto completo de etiquetas Open Graph; la opción Salida más corta genera exactamente eso.
¿Por qué mi tarjeta no se actualiza después de cambiar las etiquetas?
X guarda en caché los datos de la tarjeta de cada URL durante un tiempo. Asegúrate de que las nuevas etiquetas estén en el HTML publicado (no añadidas después con JavaScript) y de que la URL de la imagen sea pública y no esté bloqueada por robots.txt; luego vuelve a publicar el enlace. Añadir una cadena de consulta inofensiva como ?v=2 fuerza una nueva lectura.
¿Qué diferencia hay entre twitter:site y twitter:creator?
twitter:site es la cuenta del sitio web o la marca, y twitter:creator es la cuenta del autor del contenido. Ambas son nombres de usuario opcionales, como @example.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.