2026-03-28 · Actualizado el 2026-07-12

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: July 12, 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.

Campo de metadatos Para qué se usa Nota práctica
twitter:card Elige el diseño de resumen o de imagen grande Usa summary_large_image para la mayoría de artículos y páginas de destino
twitter:image Imagen principal de vista previa en X Usa una URL de imagen HTTPS absoluta
og:image Imagen de vista previa de respaldo para redes sociales y apps de mensajería Normalmente coincide con twitter:image salvo si una plataforma necesita un recorte distinto
og:url URL canónica de la página compartida Coincide con la URL canónica pública de la página
Etiquetas title y description Contexto del navegador y de búsqueda Manténlas consistentes con los metadatos sociales

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

Caso de uso Imagen recomendada Por qué funciona Cuidado con
Artículo o guía de blog 1200 x 630 WebP Recorte de vista previa amplio, gran compatibilidad entre plataformas Texto de titular diminuto
Lanzamiento de producto 1200 x 630 WebP o JPEG El producto sigue visible tras la reducción de tamaño Recortar el borde del producto
Página de herramienta Gráfico basado en captura de 1200 x 630 Muestra lo que hace la herramienta antes del clic Texto de UI demasiado pequeño para leer
Página solo con logo 1200 x 630 con amplio margen Evita que el logo se sienta apretado Vista previa con aspecto vacío
Campaña apta para formato cuadrado Variante independiente de 1200 x 1200 cuando haga falta Útil para plataformas con recortes cuadrados No la reutilices a ciegas como tarjeta de X

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.

Formato Buen ajuste Riesgo habitual Punto de partida práctico
WebP La mayoría de gráficos de vista previa social y tarjetas de imagen mixtas Algunas herramientas antiguas podrían no previsualizar borradores locales Exporta WebP con pérdida alrededor de calidad 80-85
JPEG Vista previas cargadas de fotos y necesidades de compatibilidad conservadora Sin transparencia, posible artefacto de borde alrededor del texto Exporta alrededor de calidad 82-88
PNG Logos, transparencia, gráficos planos nítidos Tamaño de archivo grande Úsalo solo cuando sea imprescindible sin pérdida
AVIF Imágenes modernas muy pequeñas El ecosistema de vista previa puede ser menos predecible Prueba con cuidado antes de usarla como única imagen de tarjeta

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.
Síntoma Causa probable Solución
No aparece ninguna imagen Falta twitter:image o es relativa Usa una URL CDN HTTPS completa
Aparece una imagen antigua Vista previa en caché Publica un nombre de archivo nuevo y refresca la URL compartida
La imagen aparece mal recortada Composición poco segura Reexporta con más margen y un sujeto central
El título de vista previa es incorrecto Inconsistencia de metadatos Alinea twitter:title, og:title y el título de la página
Funciona en local pero no en vivo Ruta local, autenticación o CDN bloqueado Prueba la URL de producción con 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.

Preguntas frecuentes

¿Cuál es el tamaño ideal de imagen para una tarjeta de Twitter?

El tamaño ideal es 1200 por 630 píxeles, que coincide con el recorte 1.91:1 que esperan las tarjetas summary_large_image.

¿Qué formato debo usar para una tarjeta de Twitter?

WebP es el mejor valor por defecto para la mayoría de gráficos de vista previa social, con JPEG como alternativa segura para tarjetas con mucha fotografía.

¿La imagen de la tarjeta de Twitter debe ser HTTPS?

Sí: tanto twitter:image como og:image deben apuntar a una URL HTTPS absoluta o los rastreadores pueden fallar al obtener la vista previa.

¿Qué valor de twitter:card usar para una vista previa grande?

Pon twitter:card en summary_large_image siempre que la propia imagen sea el principal atractivo visual del enlace compartido.

¿Por qué mi tarjeta sigue mostrando la imagen antigua tras actualizarla?

X almacena en caché las vistas previas por URL, así que publicar un nombre de archivo nuevo y volver a probar la página en vivo suele ser la forma más rápida de forzar la actualización.

¿Puedo reutilizar la misma imagen para og:image y twitter:image?

Sí: usar la misma imagen de 1200 por 630 en ambas etiquetas mantiene las vistas previas coherentes en X, Facebook y las apps de chat que leen Open Graph.

¿Cómo compruebo que la imagen de la tarjeta carga correctamente?

Ejecuta curl -I contra la URL final de la imagen en el CDN y confirma que devuelve HTTP 200 con un tipo de contenido de imagen antes de publicar.

¿Es PNG una buena opción para una tarjeta de Twitter?

PNG encaja con logotipos o gráficos que necesiten transparencia o bordes sin pérdida, pero genera archivos más grandes que WebP o JPEG para una tarjeta típica.

Usa las herramientas gratuitas mientras sigues la guía.

Comprimir una imagenQuitar un fondo

Sigue leyendo