Generador de Twitter Card
Una etiqueta o el bloque entero
Este generador de Twitter Card escribe una etiqueta o el bloque entero, y convierte un enlace publicado en una tarjeta con imagen. Puede escribir lo mínimo, ya que Twitter ya lee tus etiquetas Open Graph, o el par completo para una página que no tiene ninguna.
- GratisPrecio
- 4Tipos de tarjeta
- NingunoRegistro
- NingunoSubidas
Generador de Twitter Card
Las etiquetas twitter:, y solo las que necesitas
Listo. Elige un tipo de tarjeta y rellena el título.
Qué es una tarjeta y qué etiquetas la construyen
Publica un enlace y la cronología muestra una tarjeta: una imagen, un titular, una línea de descripción y tu dominio. Como las tarjetas ocupan mucho más espacio que un enlace desnudo, también ganan mucha más atención.
Las etiquetas que hay detrás parecen metaetiquetas normales con el prefijo twitter:. Solo una no tiene equivalente en ningún otro sitio, mientras que el resto simplemente duplica Open Graph.
Esa es twitter:card. Dice qué forma quieres, y sin ella la plataforma cae a la opción más pequeña que tiene.
Los otros campos son opcionales; el generador los omite si van vacíos. Así que el consejo honesto es este: escribe las etiquetas Open Graph una vez y luego añade una sola línea twitter: a su lado.
Las cuatro clases de tarjeta de X
Summary con imagen grande es la que todos tienen en mente. Muestra una imagen ancha sobre el titular y, además, ocupa el mayor espacio en un feed.
La summary simple pone una miniatura cuadrada pequeña junto al texto. Por eso encaja con una página cuya imagen es un logotipo y no una fotografía.
Las tarjetas app y player son más limitadas en todos los sentidos. App promociona una ficha de tienda, mientras que player incrusta vídeo o audio, que la plataforma aprueba a mano.
Name, no property
Las etiquetas de Twitter card usan el atributo name. En cambio, Open Graph usa property, porque nació de RDFa. Si copias una etiqueta del ejemplo equivocado, la plataforma la ignora.
La referencia del elemento meta explica por qué existen ambas formas. Este generador escribe cada familia con su propio atributo, así que la diferencia te resulta invisible.
El papel de las cuentas @site y @creator
twitter:site nombra la cuenta dueña de la página, y twitter:creator nombra a quien la escribió. Ninguno cambia mucho la tarjeta. Sin embargo, ambos importan en las analíticas, donde atribuyen el enlace a una cuenta.
Imágenes que sobreviven al recorte
Una tarjeta de imagen grande pide algo cercano a 2 a 1, y 1200 por 628 funciona en todas partes. Además, debe pesar menos de 5 MB y servirse por https.
Las tarjetas summary, en cambio, recortan en cuadrado. Todo lo importante cerca del borde izquierdo o derecho desaparece, así que mantén el motivo centrado.
El texto dentro de una imagen se encoge con la tarjeta. Por eso conviene poner tus palabras en el título, donde siguen siendo legibles en un móvil.
Por qué una tarjeta gana a un enlace desnudo
Un enlace desnudo es una línea de texto azul. En cambio, una tarjeta ocupa varias veces ese espacio y lleva una imagen, así que gana la mirada.
Además, responde la primera pregunta del lector. Qué es esto y quién lo publicó aparecen antes de que nadie haga clic.
Eso importa sobre todo en una plataforma donde los posts pasan en segundos. De hecho, la tarjeta es el anuncio, y el post es el pie.
Aun así, nada de eso ayuda si las etiquetas están mal. Una tarjeta rota ocupa lo mismo que un enlace desnudo y, además, parece descuidada.
Por qué una tarjeta gana a un enlace desnudo
Un enlace desnudo es una línea de texto azul. En cambio, una tarjeta ocupa varias veces ese espacio y lleva una imagen, así que gana la mirada.
Además, responde la primera pregunta del lector. Qué es esto y quién lo publicó aparecen antes de que nadie haga clic.
Eso importa sobre todo en una plataforma donde los posts pasan en segundos. De hecho, la tarjeta es el anuncio, y el post es el pie.
Aun así, nada de eso ayuda si las etiquetas están mal. Una tarjeta rota ocupa lo mismo que un enlace desnudo y, además, parece descuidada.
Las tarjetas se guardan en caché
La plataforma guarda lo que leyó, a veces durante días. Así que arreglas una etiqueta, publicas de nuevo y la tarjeta antigua aún puede aparecer. Pasar la dirección por el validador la limpia.
En esta página
- La herramienta
- Qué es una tarjeta y qué etiquetas la construyen
- Cómo usar el generador de Twitter Card
- Lo que distingue a este generador de tarjetas
- Reglas para tarjetas que ganan clics
- Seis errores de tarjeta que desperdician un post
- Dudas habituales sobre las tarjetas de X
- Herramientas para enlaces sociales
Sigue leyendo
Cómo usar el generador de Twitter Card
Cuatro pasos, y el segundo decide cuánto código acabas teniendo.
- 1
Marca la clase de tarjeta que quieres
Imagen grande para todo lo que tenga una fotografía. Summary cuando tu única imagen es un logotipo, ya que un logotipo estirado se ve peor que uno pequeño.
- 2
Decide cuánto escribir
Deja marcada Solo las etiquetas que difieren cuando tu página ya tiene etiquetas og:. Desmárcala para una página que no tiene ninguna.
- 3
Rellena el título, la imagen y los usuarios
Los títulos de hasta 70 caracteres sobreviven. Además, la vista previa muestra la forma del recorte, así que puedes revisar la imagen antes de publicarla.
- 4
Pega y luego valida
Pon el bloque en tu head y pasa la dirección por el validador de tarjetas. De lo contrario, una tarjeta en caché se queda ahí durante días.
Lo que distingue a este generador de tarjetas
La mayoría de las herramientas escriben ocho etiquetas twitter: las necesites o no. En cambio, esta pregunta primero y luego explica la respuesta.
Un modo mínimo que viene por defecto
Como la plataforma lee las etiquetas og:, una línea suele bastar. Por eso, marcar la casilla escribe esa línea y nada más.
Ambas familias, bien escritas
Las etiquetas twitter: llevan name, mientras que las og: llevan property. Así que esta herramienta escribe cada familia con el atributo que necesita.
Una vista previa con el recorte correcto
Las tarjetas de imagen grande son anchas y las summary son cuadradas. Por eso la vista previa cambia con el tipo, y la forma nunca es una sorpresa.
Usuarios limpiados mientras escribes
Una arroba inicial, sin espacios, quince caracteres. Incluso si pegas una dirección de perfil completa, obtienes un usuario válido.
Campos de player cuando corresponden
Elige una tarjeta player y aparecen los campos de incrustación, además de una nota de que la plataforma los aprueba a mano antes de que funcionen.
Las imágenes nunca salen de esta pestaña de Denwix
Los textos de campaña y las direcciones sin publicar se quedan aquí. Por lo tanto, la página no descarga nada, no guarda nada y no registra nada.
Reglas para tarjetas que ganan clics
Una tarjeta compite con todo lo demás en un feed. Estos hábitos son los que la hacen ganar.
- Escribe primero las etiquetas og:. También sirven a todas las demás redes, y la plataforma se apoya en ellas. Un bloque en lugar de dos es menos que mantener sincronizado.
- Ajusta el tipo de tarjeta a la imagen. Una fotografía pide la tarjeta de imagen grande. Un logotipo pide la summary, porque estirar un logotipo por un feed se ve barato.
- Mantén los títulos por debajo de 70 caracteres. A partir de ahí la tarjeta corta, y el corte cae donde se acaba el ancho, no en una palabra que tú elegiste.
- Centra el motivo de la imagen. Los recortes se llevan los bordes. Una cara o un producto en el borde izquierdo sobrevive en escritorio y desaparece en un móvil.
- Añade el texto alternativo de la imagen. Es una línea, y le da a un lector de pantalla algo que anunciar en lugar de la imagen. Casi nadie se molesta.
- Usa https para todo. La plataforma descarta las imágenes en http simple. También descarta todo lo que esté tras un inicio de sesión, una contraseña de pruebas o una regla antihotlink.
- Valida tras cada cambio. La caché es la razón de que tu tarjeta se vea mal. Pasa la dirección por el validador en lugar de publicar un enlace de prueba.
- Usa una sola imagen por página. Una segunda etiqueta de imagen obliga a la plataforma a elegir, y rara vez elige la que querías. Una sola etiqueta elimina la duda.
- Comprueba cómo se lee sin la imagen. Algunos clientes quitan las imágenes por completo. El título y el dominio tienen que sostener el enlace por sí solos.
Seis errores de tarjeta que desperdician un post
Cada uno te deja una página que funciona y un enlace que aparece como texto gris plano.
Usar property en lugar de name
La etiqueta se convierte en una og: que nada reconoce. Es HTML válido, se ignora por completo y cuesta verlo a simple vista.
Una tarjeta de imagen grande sin imagen
La plataforma cae a una tarjeta pequeña, así que el post ocupa un tercio del espacio que esperabas.
Escribir cada etiqueta twitter: dos veces
Duplicar las etiquetas og: en forma twitter: dobla el bloque sin ganar nada. El respaldo ya cubre las cuatro.
Una imagen demasiado pequeña
Por debajo de unos 300 píxeles de ancho, la tarjeta pierde la imagen. Apunta a 1200 por 628 y no volverás a pensar en ello.
Etiquetas añadidas tras cargar la página
El lector lee el HTML servido y no ejecuta scripts. Por eso las etiquetas inyectadas con JavaScript le resultan invisibles.
Un usuario con la URL completa
twitter:site lleva una arroba y un nombre. Una dirección de perfil ahí desaparece sin avisar, y la atribución se va con ella.
Dudas habituales sobre las tarjetas de X
¿Necesito etiquetas twitter card?
Necesitas una: twitter:card. Además, la plataforma lee og:title, og:description, og:image y og:url cuando faltan las versiones twitter:, así que las demás son duplicados.
¿Qué tamaño de imagen funciona mejor?
Usa 1200 por 628 para una tarjeta de imagen grande, que es casi 2 a 1. Sin embargo, las tarjetas summary recortan en cuadrado, así que mantén el motivo en el centro.
¿Por qué mi tarjeta aparece como texto plano?
Normalmente por falta de la etiqueta twitter:card, por una imagen que el lector no alcanza o por etiquetas añadidas con JavaScript tras cargar la página. Por eso conviene revisar esas tres primero.
¿Cómo consigo una vista previa de la tarjeta en X?
Usa el validador de tarjetas de la plataforma con la dirección en vivo. La vista previa de aquí muestra la forma y las longitudes de corte, mientras que el validador muestra el resultado en caché.
¿La tarjeta afecta al SEO?
No directamente, ya que estas etiquetas viven fuera de la búsqueda. En cambio, influyen en los clics de los enlaces compartidos, que es otra cifra y a menudo mayor.
¿En qué se diferencian site y creator?
El usuario site nombra la cuenta que publica la página. Por su parte, el usuario creator nombra a la persona que la escribió. Ambos aparecen en las analíticas y no en la tarjeta.
¿Puedo usar una tarjeta player para mi propio vídeo?
Solo tras una aprobación. De hecho, la plataforma revisa las tarjetas player a mano, y hasta que aprueba la tuya el enlace cae a una summary.
¿Dónde van estas etiquetas?
En el elemento head de la página que compartes, junto al resto de tus metaetiquetas. Además, tener ambas familias juntas facilita una auditoría posterior.
¿Funcionan las tarjetas en otras apps?
Las etiquetas og: sí, y por eso esta página también las escribe. Slack, WhatsApp, LinkedIn y Discord leen las mismas cuatro propiedades.
¿Funcionan las tarjetas en otras apps?
Las etiquetas og: sí, y por eso esta página también las escribe. Slack, WhatsApp, LinkedIn y Discord leen las mismas cuatro propiedades.
¿Esta página envía mi texto a algún sitio?
No. Tu navegador escribe cada etiqueta, y la página no descarga ninguna dirección. Por lo tanto, este sitio no guarda nada ni registra nada.
Herramientas para enlaces sociales
Las tarjetas son etiquetas más una imagen. Estas tres cubren ambas partes y el head que las rodea.
Generador de Open Graph
Las cuatro propiedades que lee cada red.
Abrir herramienta →Tus JPG convertidos en WebP
Reduce una imagen de tarjeta sin perder detalle.
Abrir herramienta →Generador de metaetiquetas
Título, descripción y canonical para la misma página.
Abrir herramienta →
¿Listo para escribir tu tarjeta?
Elige un tipo, rellena un título y copia el bloque. El generador de Twitter Card es gratis, no necesita cuenta y mantiene cada palabra en tu dispositivo.