Tamaño de imagen Open Graph: 1200 × 630 y lo que de verdad falla

Cuando alguien pega tu enlace en Slack, iMessage, LinkedIn, WhatsApp o Facebook, aparece una tarjeta de vista previa con una imagen. Esa imagen es la de Open Graph, y la mayoría de los sitios la tienen mal de una forma que nadie les avisa, porque la página en sí se ve bien.

El tamaño

1200 × 630 píxeles. Es una proporción de 1,91:1, y es sobre la que están construidos Facebook, LinkedIn y casi todos los sistemas de vista previa de enlaces.

• Mínimo 200 × 200: por debajo, muchas plataformas se niegan a mostrar tarjeta y caen a un enlace de texto plano.
• Mínimo 600 × 315 para la tarjeta grande. Por debajo sueles recibir la miniatura pequeña en lugar del formato ancho, mucho menos visible en un feed.
• Menos de 1 MB como objetivo práctico. Los techos documentados son mayores, pero una imagen lenta a veces simplemente no aparece: la plataforma dejó de esperar.

Usa 1200 × 630. Está por encima de todos los mínimos, es la proporción nativa del formato más común y se reduce con limpieza en todos los demás.

No es la primera imagen de la página

Este es el malentendido que causa casi todos los problemas. La imagen de vista previa se declara, en una etiqueta dentro del head:

<meta property="og:image" content="https://example.com/img/card.jpg">

Si no declaras nada, cada plataforma adivina. Y adivina mal: un logo de la cabecera, un icono, un píxel de seguimiento, un anuncio, o nada. Cada plataforma adivina distinto, así que el mismo enlace se ve diferente en Slack que en LinkedIn.

El conjunto que conviene declarar:

• og:image — la URL absoluta. Es el fallo más común; una ruta relativa como /img/card.jpg funciona en tu navegador y falla para todos los rastreadores de vista previa.
• og:image:width y og:image:height — para que la plataforma reserve el espacio antes de descargar el archivo.
• og:image:alt — una descripción, para lectores de pantalla.
• og:title y og:description — el texto de la tarjeta.
• twitter:card con valor summary_large_image — sin ella, X muestra el formato cuadrado pequeño aunque tu imagen sea perfecta.

El problema del recorte

Diseñas una imagen y cada plataforma la recorta distinto.

• Facebook y LinkedIn: aproximadamente el marco completo 1,91:1.
• La tarjeta grande de X: más cerca de 2:1 — se van los bordes superior e inferior.
• Apps de chat en la lista de mensajes: a menudo un cuadrado pequeño o una franja estrecha — se van los tercios laterales.
• Algunas apps no muestran imagen en la lista y solo la revelan al abrir el mensaje.

No puedes satisfacerlas todas con exactitud. Lo que sí puedes es tratar el centro como la única zona fiable. Mantén el sujeto y todo el texto dentro de una caja centrada de unos 1000 × 520 y deja que la banda exterior lleve solo fondo. Lo que deba sobrevivir a un recorte cuadrado tiene que caber en los 630 × 630 centrales.

El texto de la tarjeta

Una imagen de 1200 píxeles de ancho se muestra a unos 500 en un feed de escritorio, y menos en una lista de chat del móvil. Es una reducción de cerca del 40%, antes de cualquier recorte.

Así que el texto de una imagen OG tiene que ser mucho mayor de lo que parece en tu herramienta de diseño. Una buena comprobación: reduce tu exportación de 1200 × 630 a 500 píxeles de ancho y míralo. Si tienes que acercarte, es demasiado pequeño. En la práctica eso significa un titular de unas pocas palabras a un cuerpo enorme, no una frase.

Y recuerda que la tarjeta ya muestra tu og:title como texto real debajo. Repetir las mismas palabras dentro de la imagen desperdicia el espacio: usa la imagen para algo que el título no dice.

La trampa de la caché

Las plataformas descargan tu imagen OG una vez y la cachean, a veces durante mucho tiempo. La consecuencia pilla a todo el mundo: arreglas la imagen, vuelves a compartir el enlace y sigue apareciendo la antigua.

• Usa el depurador de enlaces de cada plataforma para forzar una nueva descarga de esa URL.
• O cambia el nombre del archivo. Una URL nueva no tiene entrada en caché, así que se descarga fresca. Esto funciona en todas partes sin entrar en ninguna cuenta.

¿Una imagen para todo el sitio o una por página?

Una única imagen OG para todo el sitio es el atajo habitual. Es mejor que nada — al menos impide que la plataforma adivine — pero todos tus enlaces se ven idénticos, lo que no le dice nada al lector sobre lo que va a abrir.

Las imágenes por página funcionan mejor, y no hay que hacerlas a mano. Un punto medio razonable es una plantilla: fondo y posición del logo constantes, con el título propio de la página compuesto encima. Producción barata y una tarjeta que dice algo concreto en cada enlace.

Cinco fallos silenciosos

• URL relativa. Parece correcta en el código y no descarga nada. Debe ser absoluta, con https://.
• PNG transparente. La transparencia no se admite en la mayoría de las vistas previas y suele rellenarse de negro. Exporta en JPEG, o en PNG con fondo sólido pintado.
• Rastreador bloqueado. Si la ruta está prohibida en robots.txt, detrás de un login, o en un host que bloquea agentes desconocidos, la tarjeta sale vacía.
• Imagen demasiado lenta. Un archivo enorme puede agotar el tiempo de la descarga. Menos de 1 MB.
• Sin twitter:card. La imagen está bien, solo que el formato es pequeño: fácil de mirar sin ver.

Referencia rápida

• 1200 × 630, proporción 1,91:1, menos de 1 MB, JPEG
• Declara og:image con URL absoluta — las rutas relativas son el fallo número uno
• Añade twitter:card = summary_large_image o X muestra la tarjeta pequeña
• Sujeto y texto en un centrado de 1000 × 520; da por perdidos los bordes
• Revisa el texto a 500 px de ancho, no a tamaño completo
• Cambia el nombre del archivo para vencer la caché de vistas previas
• Nada de transparencia: se renderiza en negro