Validador de Twitter Cards

X ha eliminado su propio validador, así que comprueba tu card aquí. Pega el HTML de tu página para probar cada etiqueta twitter:, ver la card que muestra X y copiar las etiquetas corregidas.

15 lines
Open view-source: on your page and copy the <head>.
Card preview3/4 checks passed
Framer: Free website builder and AI design agent
From framer.com
twitter:cardValidsummary_large_image
twitter:titleFoundFramer: Free website builder and AI design agent
twitter:descriptionFoundThe free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO,…
twitter:imageLoading image…https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png
twitter:image:altMissing, add it for screen readers
twitter:siteOptional
Recommended X card tagsPaste inside <head>, next to your Open Graph tags
1<!-- X (Twitter) card -->
2<meta name="twitter:card" content="summary_large_image" />
3<meta name="twitter:title" content="Framer: Free website builder and AI design agent" />
4<meta name="twitter:description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in." />
5<meta name="twitter:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />
6<meta name="twitter:image:alt" content="Describe what the image shows" />
7<meta name="twitter:site" content="@yourbrand" />

Cómo solucionar los problemas con tu tarjeta X

X lee primero las etiquetas twitter: y, si no las encuentra, recurre a tus etiquetas de Open Graph. La mayoría de los fallos en las tarjetas se deben a una de estas cuatro cosas.

Establece twitter:card como summary_large_image

Sin ella, X puede recurrir a una tarjeta de resumen pequeña con una miniatura cuadrada. summary_large_image muestra la imagen de ancho completo en proporción 2:1, lo que capta mucha más atención en el feed.

Usa una URL de imagen HTTPS absoluta

twitter:image (u og:image) debe ser una URL completa que empiece por https://, sea accesible públicamente y pese menos de 5 MB. Las rutas relativas y las imágenes que requieran inicio de sesión no se cargarán.

Añadir twitter:image:alt

El texto alternativo describe la imagen para personas que usan lectores de pantalla, con un máximo de 420 caracteres. Es opcional, pero X lo lee y solo ocupa una línea.

Consigue que X muestre la nueva tarjeta

X almacena en caché las tarjetas durante aproximadamente una semana y no tiene botón de actualización. Añade una cadena de consulta como ?v=2 al enlace para obtener una tarjeta nueva y, a continuación, comprueba las demás plataformas con el comprobador de etiquetas meta. Para LinkedIn, Facebook, Slack y el resto, consulta la guía de actualización.

Preguntas frecuentes sobre el validador de Twitter Cards

Respuestas rápidas sobre las tarjetas de X, las etiquetas twitter: y el validador antiguo.

¿Qué ha pasado con el Twitter Card Validator?

X eliminó la vista previa de su Card Validator en 2022 y ahora la página te redirige a una pantalla de inicio de sesión. Esta herramienta la sustituye: lee las mismas etiquetas que X y muestra la tarjeta que generan.

¿Qué etiquetas necesita una tarjeta de X?

twitter:card es obligatorio. A continuación, X lee twitter:title, twitter:description y twitter:image, y utiliza og:title, og:description y og:image si faltan los anteriores. twitter:site y twitter:image:alt son opcionales.

¿Por qué no se muestra la imagen en mi X Card?

Por lo general, la URL de la imagen es relativa, está bloqueada por robots.txt, requiere inicio de sesión o es demasiado grande, o bien el tipo de tarjeta es summary en lugar de summary_large_image. Además, X guarda las tarjetas en caché, así que prueba a añadir ?v=2 al enlace.

¿Por qué pegar HTML en lugar de una URL?

Al pegar el HTML, el validador puede leer cada etiqueta «twitter:» exactamente como está escrita. Al comprobar una URL, se muestra la tarjeta que X genera a partir de las etiquetas Open Graph de la página, que es la alternativa que utiliza X.

¿Es gratis este validador de Twitter Cards?

Sí. Se ejecuta en tu navegador, no requiere iniciar sesión y el HTML que pegues nunca sale de tu dispositivo.