¿Qué son las Twitter (X) Cards?
Las Twitter Cards, hoy analizadas en el contexto de X, controlan cómo se muestra una URL cuando alguien publica tu enlace en la plataforma. En lugar de un texto plano con la dirección, una página bien etiquetada puede mostrar título, descripción, dominio e imagen dentro del post.
Marketers, desarrolladores, especialistas SEO y editores usan estos metadatos para proteger el CTR en artículos, fichas de producto y landing pages compartidas. Una og:image ausente o una URL de imagen en HTTP suele producir un preview pobre que el usuario ignora en el feed.
El validador de arriba obtiene el HTML público de cualquier URL que introduzcas, analiza tags Open Graph y Twitter Card, señala problemas frecuentes y renderiza un mockup aproximado de post en X. Ves los mismos campos centrales que importan al crawler antes de que el enlace salga en campaña o post orgánico.
Cómo validar meta tags de Twitter Card
- Pega una URL pública en el campo de entrada. La página debe devolver HTML sin muro de login para que la petición funcione.
- Haz clic en Previsualizar para solicitar la página y extraer las meta tags de la respuesta.
- Revisa el mockup de post en X, incluido el layout de imagen grande cuando se detecta
summary_large_image. - Lee los mensajes de validación por severidad: errores por título o imagen ausentes, avisos por HTTPS o longitud de texto.
- Inspecciona la lista completa de tags con todos los valores
twitter:*yog:*del código fuente. - Corrige los metadatos en tu sitio, despliega si hace falta y vuelve a Previsualizar hasta que desaparezcan los avisos.
Usa el botón de sitio de demostración para cargar una URL de noticias de ejemplo y comparar una tarjeta correcta con la página que estás depurando. Las URLs de staging solo funcionan si son accesibles públicamente en internet, sin autenticación.
Cómo elige X título, descripción e imagen
X admite tags dedicadas de Twitter Card, pero también lee Open Graph y fallbacks HTML estándar. Cuando existen ambos conjuntos, los valores específicos de Twitter suelen tener prioridad en sus campos, mientras Open Graph cubre huecos.
La lógica de lectura de esta herramienta sigue ese orden:
title = og:title → twitter:title → HTML <title>
description = og:description → twitter:description → meta name="description"
image = og:image → twitter:image (resuelta a URL HTTPS absoluta)
card type = twitter:card → og:type → tiende a summary_large_image
Las URLs absolutas importan. Rutas relativas como /images/hero.jpg deben resolverse contra la URL de la página o el crawler puede fallar al cargar el asset. El validador resuelve rutas relativas igual y avisa cuando la URL final de la imagen no usa HTTPS.
Tipos de Twitter Card comparados
La mayoría de páginas de marketing usan summary o summary_large_image. Las tarjetas app y player requieren tags extra para apps móviles o medios incrustados.
| Tipo de card | Layout | Uso típico | Orientación mínima de imagen |
|---|---|---|---|
| summary | Miniatura cuadrada junto al texto | Documentación, posts simples | Mínimo 144×144 px |
| summary_large_image | Imagen ancha sobre título y descripción | Artículos, lanzamientos, landing pages | Mínimo 300×157 px, ratio 2:1 recomendado |
| app | Nombre de app, icono y enlaces de tienda | Campañas de instalación | Icono vía twitter:image:src |
| player | Reproductor de vídeo o audio incrustado | Páginas de medios con iframe | Requiere twitter:player y URL de stream |
Si falta twitter:card pero existe og:image, X aún puede renderizar tarjeta con imagen grande. El validador marca la tag twitter:card ausente como aviso para que la definas explícitamente en lugar de depender del fallback.
Límites recomendados de texto e imagen
Las reglas de truncado no siempre se publican con precisión pixel a pixel, pero estos límites coinciden con lo que aplica el validador y con lo que la mayoría de plantillas de producción usan.
| Campo | Máximo recomendado | Qué pasa al superarlo |
|---|---|---|
| Título | 70 caracteres | El texto puede truncarse en el preview |
| Descripción | 200 caracteres | El copy extra puede cortarse |
| Ancho de imagen (card grande) | 1200 px en ratio 2:1 | Tamaño habitual para pantallas retina nítidas |
| Formato de archivo | JPG, PNG, WEBP, GIF (sin animación) | Formatos no soportados pueden fallar |
| Protocolo de URL de imagen | HTTPS | Las URLs HTTP generan aviso en esta herramienta |
Las tarjetas con imagen grande usan ratio 1.91:1 en el mockup de preview, alineado con el marco aproximado que X muestra sobre el bloque de título.
Qué comprueba este validador
Tras analizar las tags, la herramienta ejecuta comprobaciones fijas alineadas con errores comunes de deploy:
- Título ausente en
twitter:titleyog:title - Descripción ausente (solo aviso, pero perjudica el atractivo del clic)
- Imagen ausente para previews enriquecidos
- Valor de
twitter:cardno reconocido - Título de más de 70 caracteres
- Descripción de más de 200 caracteres
- URL de imagen sin HTTPS
Cuando pasan todas las comprobaciones centrales, sigues viendo un mensaje informativo recordando que X cachea tarjetas por separado. Una página puede validar aquí y verse ligeramente distinta en la plataforma hasta que se actualice la caché.
Ejemplo mínimo de tags para página de marketing
La mayoría de plugins de CMS escriben estas tags automáticamente. Si mantienes HTML manual o stack personalizado, una tarjeta con imagen grande suele empezar así:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título de tu página" />
<meta name="twitter:description" content="Propuesta de valor en una frase." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta property="og:title" content="Título de tu página" />
<meta property="og:description" content="Propuesta de valor en una frase." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/pagina" />
Duplicar tags Open Graph ayuda a Facebook, LinkedIn, Slack y otros crawlers a leer los mismos valores. Si publicas la misma URL en varias redes, combina esta comprobación con la Vista Previa de Publicación en LinkedIn para confirmar truncamiento en el feed profesional también.
Preguntas frecuentes
¿Por qué X muestra un preview distinto a esta herramienta?
X almacena datos de tarjeta en caché por URL. El primer rastreo tras un cambio de metadatos puede ir detrás del deploy. Usa el depurador de tarjetas de la plataforma o vuelve a publicar tras expirar la caché si el preview en vivo sigue desactualizado.
¿Necesito tags Open Graph y Twitter Card?
Open Graph sola puede bastar porque X recurre a og:title, og:description y og:image. Tags twitter:* explícitas reducen ambigüedad y dejan clara la intención entre summary y summary_large_image.
¿Puedo validar URLs con contraseña o localhost?
No. El validador obtiene la URL desde un entorno de servidor. Localhost, staging en VPN y páginas con login devuelven error porque el HTML no es públicamente accesible.
¿Por qué falta mi imagen aunque la tag exista?
Causas habituales: URLs relativas sin base correcta, redirecciones a login, bloqueo por hotlink o archivos por encima del límite del crawler. Confirma que la URL de la imagen abre en una pestaña de incógnito.
¿Arreglar tarjetas mejora el SEO directamente?
Las tags de tarjeta afectan sobre todo al CTR social y la presentación de marca, no a fórmulas de ranking de Google. Siguen importando para tráfico desde X, newsletters que incrustan enlaces y compartidos manuales del equipo.
¿Qué tipo de card debo usar en posts de blog?
summary_large_image es la opción por defecto para artículos y landing pages porque la imagen ancha llama la atención en la timeline. Usa summary solo cuando no haya imagen adecuada.
Comprueba tu tarjeta en X antes de que cada enlace salga al público
Pega la URL de producción arriba antes de emails, anuncios o compartidos públicos del equipo. Resuelve cada error y aviso de HTTPS primero, luego revisa la longitud de título y descripción para que la tarjeta se lea bien en anchos móviles, donde ocurre la mayoría de sesiones en X.
Vuelve a ejecutar el validador tras cada deploy que toque la sección <head>, sobre todo cambios de plantilla en CMS que regeneran meta tags globalmente. Cuando la misma página también va a LinkedIn o Slack, compara previews entre redes para que una plataforma no herede tags rotas mientras otra se ve correcta.
Los metadatos de tarjeta son solo una capa de distribución en X. Otras herramientas de publicación en Twitter y X cubrirán flujos adicionales de enlaces, perfil y contenido a medida que crezca la categoría.