Fri Mar 27 2026 20:00:00 GMT-0400 (北美东部夏令时间)

Revisión de tamaño e imagen para tarjetas de Twitter

Elige el tamaño correcto de imagen para tarjetas de Twitter, metadatos, exportación WebP y comprobaciones de solución de problemas para que los enlaces compartidos se muestren limpiamente en X y otros feeds sociales.

Revisión de tamaño e imagen para tarjetas de Twitter

Última actualización: June 28, 2026

Una imagen de tarjeta de Twitter es la imagen de vista previa que aparece cuando alguien comparte una URL en X. Debe ser lo suficientemente grande para verse nítida, lo suficientemente pequeña para que los rastreadores puedan obtenerla rápidamente y declarada con metadatos que funcionen incluso si una plataforma recurre a las etiquetas Open Graph.

Esta guía te proporciona una lista de verificación práctica para la publicación: dimensiones, etiquetas, formato de archivo, comprobaciones CDN y soluciones para tarjetas que se niegan a actualizarse.

Respuesta rápida: ¿qué imagen de tarjeta de Twitter debo usar?

Usa un WebP o JPEG de 1200 por 630 píxeles para la mayoría de los enlaces compartidos, especialmente cuando quieres una tarjeta de imagen grande. Mantén el sujeto importante alejado de los bordes, haz que el texto sea legible en tamaño miniatura y usa una URL absoluta HTTPS tanto en twitter:image como en og:image.

Para X, establece twitter:card en summary_large_image cuando la imagen es el atractivo principal. Mantén el archivo cómodamente por debajo de los límites documentados de la imagen de tarjeta y verifica que la URL final del CDN devuelva HTTP 200 antes de publicar.

La configuración fiable es simple:

  • Exporta una imagen de 1200 por 630 para la vista previa.
  • Usa una URL final del CDN, no una ruta relativa.
  • Añade twitter:title, twitter:description y twitter:image.
  • Añade los correspondientes og:title, og:description y og:image como respaldo.
  • Prueba la URL en vivo después de implementar, y luego actualiza las cachés de la plataforma si la imagen antigua sigue apareciendo.

¿Qué es una imagen de tarjeta de Twitter?

Una imagen de tarjeta de Twitter es la URL de imagen declarada en los metadatos de la página para que X pueda construir una vista previa rica. No es lo mismo que la primera imagen de tu artículo. Un rastreador lee el encabezado HTML, encuentra las etiquetas de tarjeta, obtiene la imagen y almacena una vista previa en caché para la URL compartida.

Los propios ejemplos de marcado de tarjetas de X todavía describen los tipos de tarjetas summary y summary_large_image en su documentación y ejemplos para desarrolladores. La diferencia práctica es el tamaño de la vista previa: summary_large_image da suficiente espacio a la imagen para llevar un blog, un producto, una herramienta o un enlace de campaña.

Open Graph importa porque muchas plataformas sociales, aplicaciones de chat y sistemas de vista previa de enlaces leen og:image. El protocolo Open Graph define og:title, og:type, og:image y og:url como metadatos centrales. Usa tanto las etiquetas Twitter/X como las etiquetas Open Graph para que un analizador faltante no rompa ninguna vista previa.

Metadata field Use it for Practical note
twitter:card Chooses summary or large-image layout Use summary_large_image for most article and landing-page shares
twitter:image Primary X preview image Use an absolute HTTPS image URL
og:image Fallback preview image for social and messaging apps Usually match twitter:image unless a platform needs a different crop
og:url Canonical URL for the shared page Match the public canonical page URL
title and description tags Browser and search context Keep them consistent with social metadata

Para trabajar con metadatos de imagen relacionados, combínalo con la guía Image Optimization for SEO y la Complete Image Optimization Checklist.

¿Qué tamaño debe tener una imagen de tarjeta de Twitter?

Empieza con 1200 por 630 píxeles. Coincide con el recorte común social de 1.91:1, da a las plataformas suficientes píxeles para reducir limpiamente y funciona bien cuando la misma imagen se reutiliza como og:image.

Evita diseñar una tarjeta que solo funcione en tamaño completo. Los feeds recortan, redimensionan y colocan texto alrededor de la imagen. Las etiquetas pequeñas, las capturas de pantalla del UI delgadas y los fondos ocupados a menudo parecen bien en una herramienta de diseño, pero se vuelven ilegibles en una tarjeta de compartir real.

Graphic showing a 1200 by 630 Twitter card image with WebP, file size, HTTPS, and edge-safe design notes

Use case Recommended image Why it works Watch for
Blog post or guide 1200 x 630 WebP Large preview crop, broad platform compatibility Tiny headline text
Product launch 1200 x 630 WebP o JPEG Product remains visible after downscaling Cropping the product edge
Tool page 1200 x 630 screenshot-based graphic Shows what the tool does before the click UI text too small to read
Logo-only page 1200 x 630 with generous padding Keeps the logo from feeling cramped Empty-looking preview
Square-friendly campaign Separate 1200 x 1200 variant when needed Useful for platforms with square crops Do not reuse it blindly as the X card

Usa el artículo Best Image Resizer for Social Media cuando necesites varios recortes de plataforma, y usa Facebook Ad Image Sizes cuando el mismo creativo también alimente redes sociales pagadas.

¿Cómo escribes los metadatos?

Coloca las etiquetas en HTML renderizado por el servidor, dentro del <head> de la página. No dependas de JavaScript del lado del cliente para inyectar etiquetas sociales después de la carga. Los rastreadores de vista previa de enlaces pueden no ejecutar tu aplicación de la misma manera que un navegador.

Three-row metadata diagram showing twitter card, twitter image, and open graph image tags for social previews

Usa este patrón para un artículo o página de herramienta normal:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Mantén estas comprobaciones en la revisión de código:

  1. La URL de la imagen es absoluta y comienza con https://.
  2. La URL de la imagen es la URL final del CDN, no una ruta local de construcción.
  3. El título de la página y el título social describen la misma página.
  4. La descripción social es lo suficientemente corta para escanear en una vista previa.
  5. La URL canónica y og:url apuntan a la misma página pública.
  6. La imagen de tarjeta no está bloqueada por robots.txt, autenticación o reglas hotlink.
  7. La respuesta del servidor incluye un tipo de contenido de imagen correcto.

La guía de SEO de imágenes de Google también recomienda contexto descriptivo de la imagen, URLs de imagen rastreables y formatos compatibles en Google Images best practices. Ese consejo no es específico de Twitter, pero es la misma disciplina de publicación: hacer que la imagen importante sea fácil de descubrir, obtener y entender para los rastreadores.

¿Debo usar WebP, JPEG o PNG para una imagen de tarjeta de Twitter?

Usa WebP cuando tu plataforma y objetivos de vista previa lo soporten, especialmente para gráficos de artículos, vistas previas de productos y capturas de pantalla con colores mixtos. Usa JPEG para amplia compatibilidad o tarjetas con muchas fotos. Usa PNG solo cuando la transparencia o los bordes sin pérdida sean lo suficientemente importantes como para justificar el archivo más grande.

La image file type guide de MDN explica que WebP admite compresión con y sin pérdidas. Esa flexibilidad es útil para las tarjetas sociales porque una sola imagen puede contener textura fotográfica, color plano de marca y tipo.

Para este artículo, codifiqué y probé cuatro gráficos WebP de 1200 por 630 localmente con ImageMagick y comprobé los tamaños de salida antes de publicar. Terminaron entre 14 KB y 28 KB porque son gráficos limpios con textura limitada. Las fotos reales de productos y las capturas de pantalla detalladas generalmente serán más grandes.

Format Good fit Typical risk Practical starting point
WebP Most social preview graphics and mixed image cards Some older tools may not preview local drafts Export lossy WebP around quality 80-85
JPEG Photo-heavy previews and conservative compatibility needs No transparency, possible ringing around text Export around quality 82-88
PNG Logos, transparency, sharp flat graphics Large file size Use only when lossless is necessary
AVIF Very small modern images Preview ecosystem can be less predictable Test carefully before using as the only card image

Si la imagen de tarjeta también es un héroe de página, sigue la guía Image Compression Ratio para que la vista previa se vea limpia sin hacer pesada la página. Si estás comparando formatos modernos, lee AVIF vs WebP Comparison.

¿Cómo hago que la imagen sea legible en el feed?

Diseña la tarjeta para el lugar más pequeño donde se verá, no para el área de trabajo en tu editor. Una vista previa del feed puede ser más estrecha que la original, y el UI circundante compite por la atención.

Usa estas reglas de diseño:

  • Coloca el sujeto principal o el titular en el área segura central.
  • Deja relleno alrededor de caras, productos, logotipos y texto.
  • Usa un mensaje corto, no un título completo del artículo más subtítulo más insignia.
  • Comprueba la imagen a 600 píxeles de ancho antes de aprobarla.
  • Evita las capturas de pantalla con etiquetas diminutas a menos que el UI en sí sea la historia.
  • Mantén el contraste lo suficientemente alto para una vista rápida.
  • No uses una imagen stock genérica cuando la página trata sobre una herramienta, un producto o un flujo de trabajo técnico.

Una imagen de tarjeta útil debe responder "¿de qué se trata este enlace?" antes de que el lector estudie el título. Para una publicación de blog, puede ser un diagrama simple. Para una guía de comercio electrónico, puede ser un ejemplo de foto de producto. Para un convertidor o redimensionador, puede ser una captura de pantalla recortada de la herramienta.

¿Por qué no se muestra mi imagen de tarjeta de Twitter?

La mayoría de las imágenes de tarjetas rotas provienen de una de cuatro causas: el rastreador no puede obtener la URL, los metadatos apuntan a la imagen incorrecta, la plataforma ha almacenado en caché una versión antigua o la imagen es técnicamente válida pero un candidato pobre para vista previa.

Troubleshooting checklist graphic showing relative image URLs, crawler blocks, stale cached cards, and oversized files

Ejecuta esta secuencia antes de cambiar el creativo:

  1. Abre la fuente final de la página y confirma que existe la etiqueta twitter:image.
  2. Copia la URL exacta de la imagen del HTML renderizado.
  3. Ejecuta curl -I contra la URL de la imagen y confirma HTTP 200.
  4. Confirma que el tipo de contenido de respuesta es un tipo de imagen.
  5. Verifica que la URL de la imagen no esté redirigida a través de una pared de autenticación.
  6. Asegúrate de que el archivo de imagen no sea enorme.
  7. Confirma que robots.txt no bloquea la imagen o la página.
  8. Cambia el nombre del archivo de imagen cuando necesites forzar una caché fresca.
  9. Vuelve a probar la página implementada, no una URL de vista previa local.
  10. Revisa las etiquetas Open Graph si la tarjeta funciona en una aplicación pero no en otra.
Symptom Likely cause Fix
No image appears Missing or relative twitter:image Use a full HTTPS CDN URL
Old image appears Cached preview Publish a new filename and refresh the shared URL
Image appears cropped badly Unsafe composition Re-export with more padding and a central subject
Preview title is wrong Metadata mismatch Align twitter:title, og:title, and the page title
Works locally but not live Local path, auth, or blocked CDN Test the production URL with curl -I

La Crop Image Online Guide es útil cuando el sujeto necesita un recorte más seguro, y Image Aspect Ratio Changer cubre cambiar creativos de cuadrado o retrato a un marco de vista previa social.

Lista de verificación pre-publicación

Antes de enviar una página que depende del uso compartido en redes sociales, revisa la imagen y los metadatos juntos. Un archivo WebP perfecto seguirá fallando si la etiqueta apunta a la URL de ayer. Los metadatos perfectos seguirán decepcionando si la imagen es ilegible en un feed.

Usa esta lista de verificación final:

  • El frontmatter o la imagen del CMS es la misma imagen utilizada para los metadatos sociales.
  • La imagen es única para la página o claramente relevante para la página.
  • La URL de la imagen es HTTPS y pública.
  • La extensión del archivo coincide con el formato de respuesta real.
  • La imagen devuelve HTTP 200 desde el CDN.
  • El título y la descripción no están rellenos de palabras clave.
  • La imagen de vista previa tiene texto alternativo descriptivo donde aparece en el cuerpo del artículo.
  • La imagen se comprueba visualmente en tamaños de vista previa de escritorio y móvil.
  • La página tiene una URL canónica estable.
  • La tarjeta se vuelve a probar después del despliegue.

Una buena imagen de tarjeta de Twitter es un pequeño sistema de publicación: un visual claro, metadatos estables, una URL CDN rápida y una comprobación final de obtención. Una vez que estas piezas están en su lugar, es mucho menos probable que la vista previa falle durante un lanzamiento o actualización de contenido.

Usa las herramientas gratuitas mientras sigues la guía.

Comprimir una imagenQuitar un fondo

Sigue leyendo