Vista previa de Twitter Card
Previsualice y genere metaetiquetas Twitter Card para sus páginas
Configuración de la tarjeta
0/70 caracteres
0/200 caracteres
Los contadores de 70/200 sirven de orientación al editar. Algunos símbolos cuentan como más de un carácter; la visualización real depende del cliente.
Pruebe una imagen ancha, por ejemplo, de 1200 × 628 px. La vista previa ilustrativa usa un área de imagen de 16:9.
La URL de la imagen se carga directamente desde su navegador. El servidor de la imagen recibe esa solicitud.
Solo se usa para el dominio que se muestra aquí. Su @usuario identifica la cuenta atribuida.
Vista previa de la tarjeta
example.com
El título de su tarjeta aquí
La descripción de su tarjeta aparecerá aquí. Escriba algo atractivo para captar el interés de su público.
Añada la URL de una imagen para verla en la vista previa.
Esta vista previa es ilustrativa. El diseño, el recorte, el contenido en caché y las imágenes obtenidas de X/Twitter pueden diferir en la práctica.
Sus metaetiquetas
<meta name="twitter:card" content="summary_large_image" />
Etiquetas actualizadas. Añádalas al head de su página y compruebe la página publicada.
Guía de tipos de tarjeta
Antes de publicar
- Use un título y una descripción que describan la página.
- Elija una imagen cuyo contenido importante se conserve al recortarla.
- Mantenga la URL de la imagen accesible para la plataforma que obtiene su página.
- El @usuario indica la atribución, no una dirección de sitio web.
- Compruebe la página publicada y su vista previa real al compartirla; este editor no obtiene los datos de las tarjetas de X.
Acerca de nuestra herramienta gratuita de vista previa de Twitter/X Card
Las Twitter Cards (ahora X Cards) permiten adjuntar contenido multimedia a los tuits que enlazan a su sitio web. Cuando alguien comparte una URL de su sitio, la tarjeta muestra automáticamente una vista previa con el título, la descripción y la imagen que usted haya indicado. Esta herramienta de vista previa de Twitter Card le permite revisar una tarjeta ilustrativa antes de publicar sus etiquetas. No verifica cómo la plataforma obtiene la página, la guarda en caché ni cómo la muestra al final.
La herramienta admite los dos tipos de tarjeta principales: la Summary Card, con una miniatura pequeña junto al texto, y la Summary Card con imagen grande, que coloca un elemento visual destacado sobre el título y la descripción. Puede introducir su contenido, verlo en una vista previa en tiempo real y copiar con un solo clic las metaetiquetas HTML listas para usar.
Tanto si es un community manager que optimiza vistas previas de enlaces, un desarrollador que implementa metaetiquetas Open Graph y de Twitter, o un especialista en marketing de contenidos que busca maximizar la tasa de clics de los enlaces compartidos, esta herramienta gratuita agiliza su trabajo. Los contadores de caracteres y las barras de colores muestran la referencia de 70/200 de este editor. No establecen un límite de visualización vigente y garantizado de la plataforma.
Características principales
- Vista previa en directo de los dos tipos de tarjeta: Summary y Summary Large Image
- Contadores de caracteres en tiempo real y barras de colores según las referencias del editor para el título (70) y la descripción (200)
- Campo de URL de imagen con sugerencias de tamaño recomendado para cada tipo de tarjeta
- Campo de @usuario del sitio para la atribución correcta en Twitter
- Metaetiquetas HTML generadas automáticamente, listas para pegar en la sección <head> de su página
- Copia con un clic de todas las metaetiquetas generadas al portapapeles
- Guía comparativa de tipos de tarjeta que indica cuándo usar cada formato
- Vista previa basada en el diseño de la tarjeta de Twitter/X (una aproximación, no una reproducción exacta al píxel)
- Compatibilidad total con modo oscuro y diseño adaptable
- Sin registro, totalmente gratuito e ilimitado
Cómo usar la herramienta de vista previa de Twitter Card
- Seleccione un tipo de tarjeta: elija entre Summary (imagen pequeña) y Summary Large Image según su contenido y sus objetivos visuales.
- Escriba su título: redacte un título atractivo de menos de 70 caracteres que capte la atención en el feed de Twitter.
- Añada una descripción: elabore una descripción concisa de menos de 200 caracteres que anime a los usuarios a hacer clic.
- Indique la URL de una imagen: pegue la URL completa de la imagen de su tarjeta (se recomienda 1200x628 para tarjetas con imagen grande y 144x144 para Summary).
- Revise la vista previa en directo: consulte el panel de la tarjeta para ver una aproximación de cómo aparecerá en Twitter/X.
- Copie las metaetiquetas: haga clic en “Copiar todas las etiquetas” para copiar las metaetiquetas HTML generadas y péguelas en la sección <head> de su página.
Casos de uso
- Community managers: vea y optimice las tarjetas de enlace antes de compartir contenido para maximizar la interacción y la tasa de clics.
- Desarrolladores web: genere metaetiquetas de Twitter Card correctas durante el desarrollo del sitio y verifique la presentación antes del lanzamiento.
- Especialistas en marketing de contenidos: pruebe distintos títulos, descripciones e imágenes para encontrar la combinación más atractiva para los enlaces compartidos.
- Profesionales de SEO: asegure la implementación correcta de las metaetiquetas sociales como parte de las auditorías de SEO técnico.
- Equipos de comercio electrónico: vea cómo aparecen las páginas de producto al compartirlas en Twitter/X para optimizar las conversiones.
- Autores de blogs: compruebe que las vistas previas de los artículos muestren la imagen destacada, el título y el extracto correctos antes de publicar.
- Relaciones públicas y comunicación: verifique las vistas previas de los enlaces de comunicados de prensa y anuncios antes de distribuirlos a los medios.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, la herramienta de vista previa de Twitter Card es totalmente gratuita, sin registro ni límites de uso.
¿Mis datos están seguros?
La vista previa y la generación de etiquetas se realizan en su navegador. Sus títulos y descripciones no se envían a nuestros servidores. Al cargar la URL de una imagen, su navegador realiza una solicitud al servidor que la aloja.
¿Cuáles son los tamaños de imagen recomendados?
Use una imagen cuadrada para un diseño de tarjeta pequeña y una imagen ancha para un diseño de tarjeta grande. El editor ofrece como ejemplo los tamaños 144×144 y 1200×628 píxeles; estos no validan los requisitos actuales de la plataforma en cuanto a formato de archivo, tamaño u obtención de la imagen. Revise la imagen en la vista previa real al compartir la página publicada.
¿Necesito tanto Twitter Cards como etiquetas Open Graph?
Los metadatos de Open Graph y los específicos de Twitter describen las vistas previas en redes sociales. Implemente las etiquetas que exigen las plataformas a las que se dirige y compruebe el resultado publicado; este editor no confirma el comportamiento de respaldo ni garantiza un control completo de la visualización.
¿Por qué mi tarjeta no se actualiza después de cambiar las metaetiquetas?
Una plataforma puede conservar metadatos o imágenes obtenidos anteriormente. Confirme que la página publicada y las URL de las imágenes contienen sus cambios y, después, revise su vista previa real al compartirla. Este editor no inspecciona ni borra la caché de X y no puede prometer un intervalo de actualización ni una solución con parámetros en la URL.
¿Esta vista previa coincide exactamente con la presentación real en Twitter?
Es una vista previa ilustrativa. El diseño del cliente, el recorte, los datos en caché y la obtención de imágenes pueden producir un resultado muy distinto; revise la vista previa real al compartir la página publicada.
Consejos y buenas prácticas
- Mantenga los títulos por debajo de 70 caracteres: los títulos más largos se truncan en la vista previa de la tarjeta y su mensaje principal se pierde.
- Escriba descripciones orientadas a la acción: use un lenguaje atractivo que invite a hacer clic y no pase de 200 caracteres.
- Use imágenes de alta calidad: las imágenes borrosas o de baja resolución reducen la confianza y la interacción. Use siempre las dimensiones recomendadas.
- Incluya el @usuario del sitio: esto añade la atribución correcta y puede aumentar la visibilidad de su cuenta cuando se comparten los enlaces.
- Pruebe antes de publicar: vea su tarjeta en esta herramienta y luego pegue la URL en el editor de publicaciones de X para confirmar la tarjeta real antes de publicar.
- Implemente etiquetas OG y de Twitter: use las etiquetas Open Graph como base y las etiquetas de Twitter Card para la personalización específica de la plataforma.