Vistas previas de enlaces: el tamaño de imagen OG que funciona en todas partes
Una sola imagen de 1200 × 630 cubre todas las plataformas que construyen una tarjeta de enlace. La zona segura para el texto, los límites de peso y por qué tu vista previa muestra la imagen antigua.
Actualizado el 1 de septiembre de 20268 min de lectura
Cuando se pega un enlace en un chat, un feed o un mensaje, la plataforma descarga la página y construye una tarjeta de vista previa a partir de un puñado de etiquetas meta. Si están bien, tu enlace llega con un titular, una descripción y una imagen. Si están mal, llega como una URL azul pelada, que en un feed de tarjetas con imagen es prácticamente invisible. Todo el asunto descansa en una imagen y tres etiquetas.
Un solo tamaño lo cubre todo
La buena noticia es que no necesitas una imagen distinta por plataforma. 1200 × 630 píxeles —una relación de aspecto de aproximadamente 1,91:1— es lo que fijó Facebook, y es lo que X, LinkedIn, Slack, Discord, WhatsApp, iMessage, Signal y casi todo lo que construye una tarjeta de enlace aceptará y mostrará bien.
El ancho de 1200 píxeles no es arbitrario. Las tarjetas de enlace suelen renderizarse a unos 600 píxeles de ancho en un feed, así que una fuente de 1200 píxeles da exactamente la doble densidad que necesitan las pantallas de alta resolución para verse nítidas. Aportar una imagen de 600 píxeles ahorra una cantidad ínfima de ancho de banda y se ve visiblemente blanda en cualquier móvil moderno.
| Plataforma | Muestra | Notas |
|---|---|---|
| 1,91:1 | El origen de la convención de 1200 × 630 | |
| X, tarjeta grande | Alrededor de 2:1 | Recorta ligeramente arriba y abajo desde 1,91:1 |
| 1,91:1 | Usa las mismas etiquetas Open Graph | |
| Slack, Discord | 1,91:1 | Se renderiza más pequeño, así que deja el texto grande |
| WhatsApp, iMessage | Miniatura casi cuadrada | Recorta con fuerza hacia el centro |
| Prefiere 2:3 vertical | La única excepción real |
Las etiquetas que hacen que funcione
Cuatro etiquetas Open Graph hacen casi todo el trabajo, y X lee esas mismas etiquetas salvo que las sobrescribas. Todo lo demás es refinamiento opcional.
- `og:image`: una URL absoluta, con protocolo y dominio incluidos. Una ruta relativa es el motivo más común de que una vista previa no muestre imagen alguna.
- `og:title`: el titular de la tarjeta. Unos 60 caracteres antes de truncarse, y no tiene por qué ser idéntico al título de tu página.
- `og:description`: una o dos frases, unos 150 a 160 caracteres. Las plataformas truncan en puntos distintos, así que pon el significado al principio.
- `og:url`: la URL canónica. Esto evita que la misma página compartida con distintos parámetros de seguimiento se cachee como varias vistas previas separadas.
- `twitter:card` con el valor
summary_large_image: sin ella, X puede mostrar una miniatura cuadrada pequeña junto al texto en lugar de la tarjeta a ancho completo.
Dos detalles explican muchas vistas previas rotas. La URL de la imagen debe ser accesible públicamente sin inicio de sesión, porque el rastreador de la plataforma la descarga como visitante anónimo: una imagen tras autenticación o en un servidor de pruebas con autenticación básica sencillamente falla. Y la propia página debe ser accesible para ese mismo rastreador, que es la razón de que las vistas previas funcionen a menudo en un navegador y fallen en una aplicación de chat.
Tamaño y formato de archivo
Las imágenes de tarjeta tienen límites, y superarlos significa que la vista previa cae en silencio a no mostrar imagen en lugar de dar un error. Mantén una imagen OG por debajo de 1 MB como objetivo práctico: el máximo estricto ronda los 8 MB, y el límite propio de X para imágenes de tarjeta es de 5 MB con un mínimo de 300 × 157 píxeles y un máximo de 4096 × 4096.
| Contenido | Formato | Tamaño típico a 1200 × 630 |
|---|---|---|
| Fotografía o degradado | JPEG con calidad 80 | 80–200 KB |
| Texto, logotipo, color plano | PNG | 40–150 KB |
| Cualquiera de los dos, donde se admita | WebP | Un 30–50% más pequeño |
| Cualquier cosa animada | No lo hagas | Las tarjetas muestran un fotograma fijo de todos modos |
| Transparencia | Evítala | Se compone sobre un fondo impredecible |
WebP merece una advertencia. La mayoría de plataformas ya lo admiten, pero unos pocos generadores de vistas previas antiguos no, y el modo de fallo es una imagen ausente y no una alternativa. Si un enlace importa comercialmente, JPEG o PNG siguen siendo la elección segura; comprimir bien un JPEG te da igualmente la mayor parte del ahorro. La transparencia es la otra trampa: un PNG transparente se compondrá sobre el fondo que use la plataforma, lo que en modo oscuro puede volver invisible un texto oscuro.
Parte del tamaño Facebook Post de 1200 × 630 del creador de carteles y diseña una tarjeta que se lea bien a tamaño miniatura, en tu dispositivo y sin subir nada.
Diseñar una imagen de vista previaDiseñar una tarjeta que se lea a tamaño miniatura
Una vista previa de enlace rara vez se ve a tamaño completo. En Slack tiene unos pocos cientos de píxeles de ancho; en un móvil compite con todo lo demás del feed. Los diseños que funcionan en un monitor fallan sistemáticamente a esa escala, y los fallos son lo bastante constantes como para poder evitarse.
- Seis a ocho palabras como mucho. Una tarjeta es un cartel, no un párrafo. Si el titular necesita tres líneas a 1200 píxeles de ancho, es ilegible a 400.
- Pon el tipo mucho más grande de lo que te parece. De 60 a 90 píxeles para un titular en un lienzo de 1200 píxeles. Por debajo de unos 40 píxeles desaparece.
- Contraste alto, siempre. El texto sobre una fotografía necesita un velo o un panel sólido detrás; el gris claro sobre blanco desaparece por completo a tamaños pequeños.
- No repitas el titular. En Facebook, LinkedIn y Slack la tarjeta ya muestra tu
og:titlecomo texto bajo la imagen (X muestra como mucho un titular pequeño). Poner las mismas palabras en la imagen desperdicia el espacio: úsalo para un logotipo, una categoría o una sola idea visual. - Pruébala en pequeño. Reduce el diseño a 400 píxeles de ancho y míralo. Eso se parece más a como lo verá la mayoría que el lienzo en el que lo diseñaste.
- Mantén una plantilla. Cuando una maquetación funcione, reutilízala con otro texto. Unas tarjetas reconocibles valen más que unas individualmente ingeniosas.
Cuando la vista previa muestra lo que no toca
Arreglas la imagen, compartes el enlace y aparece igualmente la imagen antigua. Eso es la caché, no un error en tus etiquetas. Cada plataforma guarda la vista previa que construyó la primera vez que alguien compartió esa URL, a veces durante semanas, y no la volverá a descargar solo porque la página haya cambiado.
Confirma que las etiquetas están realmente publicadas
Mira el código fuente de la URL publicada —no de tu copia local— y comprueba que og:image está presente y es absoluta. Muchísimos de estos problemas son una compilación que no se desplegó.
Usa los depuradores de compartición
El Depurador de contenido compartido de Facebook y el Post Inspector de LinkedIn vuelven a descargar una URL y muestran qué encontraron; ejecutar uno suele bastar para limpiar la caché de esa plataforma al instante. X no tiene un equivalente que funcione: previsualiza el enlace en el editor de publicaciones o añade un parámetro a la URL para forzar una nueva descarga.
Cambia el nombre del archivo de imagen cuando lo actualices
Algunas cachés se indexan por la URL de la imagen y no por la de la página. Publicar tarjeta-v2.jpg en vez de sobrescribir tarjeta.jpg esquiva el problema por completo.
Comprueba que el rastreador puede llegar a la imagen
Abre la URL de la imagen en una ventana de navegación privada y sin sesión. Si pide inicio de sesión, o el servidor bloquea agentes de usuario desconocidos, el rastreador no ve nada.
Ten paciencia con las aplicaciones de chat
WhatsApp, iMessage y Signal no tienen depurador público y cachean con agresividad. Una URL nueva —aunque solo sea añadiendo un parámetro— suele ser la única forma de forzar una vista previa fresca.
Una nota práctica sobre crear las imágenes: el diseño de tarjetas es justo el tipo de tarea pequeña y repetida que la gente entrega a un generador online sin pensarlo mucho, y esos generadores suben lo que les des, incluidas capturas de productos sin publicar y titulares previos a un anuncio. Las herramientas de diseño e imagen de aquí —el creador de carteles, el redimensionador y el compresor— se ejecutan enteramente en tu dispositivo, así que una tarjeta para algo embargado se construye y se exporta sin transmitir nada.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen OG?
1200 × 630 píxeles, una relación de aspecto de aproximadamente 1,91:1. Ese único tamaño lo muestran bien Facebook, X, LinkedIn, Slack, Discord y las principales aplicaciones de chat, y el ancho de 1200 píxeles da la doble densidad que necesitan las pantallas de alta resolución para una tarjeta que se renderiza a unos 600 píxeles.
¿Por qué mi vista previa de enlace no muestra imagen?
Casi siempre porque `og:image` usa una ruta relativa en lugar de una URL absoluta con el dominio, o porque la imagen no es accesible públicamente: tras un inicio de sesión, en un servidor de pruebas, o bloqueada para agentes de usuario desconocidos. La otra causa habitual es una vista previa cacheada de antes de que añadieras la etiqueta.
¿Necesito imágenes distintas para Twitter y Facebook?
No. X lee las mismas etiquetas Open Graph, así que una imagen de 1200 × 630 cubre ambas; solo añade `twitter:card` con el valor `summary_large_image` para que X muestre la tarjeta a ancho completo en lugar de una miniatura pequeña. Pinterest es la única excepción destacada, ya que prefiere una imagen vertical 2:3.
¿Cómo actualizo una vista previa de enlace cacheada?
Pasa la URL por el Depurador de contenido compartido de Facebook o el Post Inspector de LinkedIn, que vuelven a descargar la página y limpian la caché de esa plataforma. X ya no ofrece depurador y las aplicaciones de chat nunca lo tuvieron; en esos casos, publicar la imagen con un nombre de archivo nuevo o compartir una URL con un parámetro añadido suele ser la única opción fiable.