¿Qué es Vista previa de tarjeta Twitter?
Twitter Card Preview muestra cómo se verán tus enlaces al compartirlos en Twitter/X. Introduce una URL o rellena el título, la descripción y la imagen para previsualizar los tipos de tarjeta Summary y Summary with Large Image antes de publicar.
La vista previa usa las mismas proporciones del cliente web de Twitter/X: 2:1 para Summary with Large Image (recomendado para posts de blog y lanzamientos de producto), y 1:1 cuadrado para Summary (mejor para páginas de categoría y enlaces de referencia). También genera las meta tags correspondientes para que las pegues directas en el <head> sin escribirlas a mano.
Cómo usar
- Paso 1 — Rellena el título, la descripción y la URL de imagen, o pega el HTML de tu página para importar de una vez sus etiquetas twitter: y og: existentes.
- Paso 2 — Selecciona el tipo de tarjeta: Summary (miniatura pequeña) o Summary with Large Image (vista previa tipo banner).
- Paso 3 — Revisa la vista previa en vivo para ver exactamente cómo se renderiza tu enlace en el timeline de Twitter/X, opcionalmente dentro de un tweet completo y en LinkedIn, Facebook, Slack y Discord, y ajusta los campos según haga falta.
Cuándo usar
- Ver cómo se verá un post o artículo antes de tuitear el enlace a tu audiencia.
- Revisar landings antiguas cuyas tarjetas de compartir se ven mal o muestran solo el logo recortado.
- Decidir qué tipo de tarjeta (Summary o Large Image) le va mejor a cada página antes de añadir las meta tags.
Resultado
Estás a punto de compartir un enlace de blog en Twitter/X. Pegas el HTML de la página para cargar sus etiquetas y la vista previa muestra que la tarjeta no tiene descripción y la imagen está recortada. Corriges ambos campos y confirmas que la tarjeta de imagen grande luce profesional antes de tuitear.
Preguntas frecuentes
- ¿Qué diferencia hay entre Summary y Summary with Large Image?
- Summary muestra un thumbnail cuadrado pequeño a la izquierda con título y descripción a la derecha. Summary with Large Image pone una banner ancha encima del título. La grande ocupa más sitio en la timeline y casi siempre da más clics.
- ¿Qué dimensiones de imagen muestra realmente Twitter/X?
- Para Summary with Large Image el área visible es aproximadamente 2:1 (por ejemplo 1200×600 px). Twitter acepta desde 300×157 hasta 4096×4096, pero recorta a 2:1, así que el texto importante y las caras deben quedar dentro de la zona 2:1 centrada.
- ¿Necesito aprobación de Twitter Developer para usar estas tags?
- No. Las meta tags de Twitter Card funcionan en cualquier sitio público sin aprobación. El antiguo validator que pedía revisión está retirado. Añade las tags al <head>, despliega de forma pública, y la próxima vez que alguien comparta la URL aparecerá la tarjeta.
- ¿Por qué mi tarjeta no se muestra en Twitter aunque las meta tags estén correctas?
- Twitter cachea las respuestas de tarjetas con mucha agresividad. Tras corregir tags, la antigua puede aguantar horas. Compartir una URL con un sufijo de tracking (?v=2 o UTM) fuerza un fetch nuevo. Bloquear Twitterbot en robots.txt es otra causa común.
- ¿Conviene usar Open Graph o tags de Twitter?
- Twitter cae a Open Graph (og:title, og:description, og:image) cuando faltan tags twitter:*, así que normalmente con OG basta. Añade twitter:card y twitter:image si quieres control total sobre la imagen y el layout que Twitter elige.
Herramientas relacionadas
Generador de datos estructurados
Genera marcado JSON-LD de esquema para SEO
Página web a PDF
Captura una página web como PDF
Generador de política de privacidad
Genera una política de privacidad para tu sitio web
Generador de términos de servicio
Genera un documento de términos de servicio
Generador de Consentimiento de Cookies
Genera código para banners de consentimiento de cookies
Minificador CSS
Minifica código CSS para reducir el tamaño del archivo