Tamaño de Imagen Open Graph: Un Solo Archivo para Cada Plataforma

Una imagen de 1200 por 630 píxeles, en PNG o JPEG, por debajo de aproximadamente 1 MB, con el contenido importante dentro del centro de 1080 por 600. Ese archivo se renderiza correctamente en Facebook, LinkedIn, X, Slack, Discord, WhatsApp e iMessage, lo cual es toda la respuesta a la pregunta del tamaño de imagen Open Graph para casi cualquier sitio.

Las dimensiones son la parte fácil. Tampoco suelen ser lo que falla. Lo que falla es un texto que queda demasiado cerca de un borde que una plataforma recorta, una imagen que nunca se actualiza porque un rastreador almacenó en caché la antigua hace meses, o una tarjeta que se renderiza sin ninguna imagen porque el archivo pesaba 4 MB en un origen lento. La pregunta del tamaño de imagen OG es en realidad tres preguntas, y solo una de ellas trata sobre píxeles. Esta guía cubre las especificaciones, la zona segura, el comportamiento de caché que hace pensar a la gente que sus etiquetas están mal, y cómo se resuelven las vistas previas cuando lo que se comparte es un enlace corto. Si tu vista previa falta por completo en lugar de estar mal recortada, la vista previa del enlace no aparece es la guía de diagnóstico.

El Tamaño, y Por Qué Es Ese Tamaño

La relación 1.91:1 viene de la tarjeta de enlace de Facebook, y se mantuvo porque todos los demás adoptaron un diseño compatible en lugar de inventar el suyo propio. El propio protocolo Open Graph no dice nada sobre píxeles en absoluto; define og:image como una URL y deja el renderizado al consumidor, que es exactamente por qué se formó un estándar de facto alrededor de un tamaño conveniente.

La propia guía de Facebook sobre cómo compartir imágenes pone el mínimo en 200 por 200 y recomienda el archivo más grande para pantallas de alta resolución, y X documenta el marcado de la tarjeta por separado, que es el único lugar donde necesitas una etiqueta específica de la plataforma en lugar de un archivo específico de la plataforma.

La Zona Segura que Nadie Menciona

Una tarjeta rara vez se muestra en la relación en la que la diseñaste. Las aplicaciones de chat recortan hacia un cuadrado para la miniatura, algunos feeds recortan los lados en pantallas estrechas, y una esquina redondeada se come los últimos píxeles de un logo en la esquina.

Mantén todo lo que deba sobrevivir dentro del centro de 1080 por 600, centrado, y trata la banda exterior como decoración que puedes permitirte perder. En la práctica eso significa que el titular se sitúa en el centro-izquierda en lugar de pegado al borde, el logo vive dentro del margen en lugar de en la esquina, y no hay ningún borde fino, porque un borde es el único elemento de diseño que se ve roto en el instante en que se recorta.

El contraste importa más de lo que parece también. Las tarjetas se renderizan sobre blanco en un cliente y casi negro en otro, así que una imagen que depende del fondo circundante para la separación pierde sus bordes en la mitad de ellos.

Las Etiquetas Alrededor de la Imagen

Cuatro etiquetas hacen el trabajo. Dos de ellas son las que la gente se salta.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

La URL debe ser absoluta, incluyendo el esquema y el host, porque el rastreador lee la etiqueta sin contexto de página para resolver una ruta relativa. El ancho y el alto le permiten a la plataforma reservar el espacio correcto antes de que llegue el archivo, lo que marca la diferencia entre una tarjeta que aparece al instante y una que se reacomoda. Y og:image:alt es la etiqueta de accesibilidad que no cuesta nada y falta casi en todas partes.

Por Qué Tu Nueva Imagen No Aparecerá

Esta es la que genera tickets de soporte. Corregiste la imagen, puedes ver el nuevo archivo en su URL, y la tarjeta todavía muestra el diseño del trimestre pasado.

Los rastreadores sociales almacenan en caché de forma agresiva, y no son sutiles al respecto. Una vez que una URL ha sido rastreada, la versión guardada es la que se renderiza en las comparticiones siguientes, a veces durante semanas, y nada en editar tu HTML les dice que miren de nuevo. Tres formas de salir de esto, en el orden en que yo las probaría:

• Fuerza un nuevo rastreo con la propia herramienta de la plataforma: el Depurador de Uso Compartido de Facebook y el Inspector de Publicaciones de LinkedIn vuelven a obtener bajo demanda.
• Publica la imagen con un nuevo nombre de archivo, que es una URL diferente y por lo tanto no tiene ninguna entrada en caché. Esta es la fiable.
• Cambia la propia URL compartida, lo cual es trivialmente fácil cuando lo que compartes es un enlace corto que controlas en lugar de una dirección de página permanente.

Antes de publicar nada, el verificador de Open Graph te muestra la tarjeta exactamente como la construiría un rastreador, lo que toma diez segundos y evita la incómoda recompartición.

Vistas Previas Cuando Compartes un Enlace Corto

Un enlace corto no tiene etiquetas Open Graph propias y no necesita ninguna. El rastreador sigue la redirección, aterriza en el destino, y construye la tarjeta a partir de las etiquetas de ahí, lo que significa que una URL acortada hereda la vista previa que tenga la página de destino. Si la tarjeta está mal, las etiquetas en el destino están mal.

Dos cosas sí dependen de la capa del enlace. La redirección tiene que ser seguible por un rastreador, que es el caso normal para un salto del lado del servidor pero no para una redirección de JavaScript, una razón más para mantener la cadena corta y del lado del servidor. Y como la vista previa pertenece al destino, redirigir un enlace corto a otro lugar también cambia su vista previa, lo cual es una propiedad silenciosamente útil cuando se reemplaza una página de campaña después de que el enlace ya se ha compartido.

Si quieres el enlace, la tarjeta, y los datos de clics en un solo lugar, comienza un espacio de trabajo en tu propio dominio y verifica la tarjeta con la herramienta antes del envío en lugar de después.

Una Lista de Verificación que Vale la Pena Guardar

• 1200 por 630, PNG o JPEG, por debajo de 1 MB, URL absoluta con HTTPS. Esa es toda la decisión del tamaño de imagen OG.
• Nada que importe fuera del centro de 1080 por 600, sin bordes finos.
• og:image:width, og:image:height, y og:image:alt presentes.
• twitter:card configurado como summary_large_image si quieres la tarjeta grande en X.
• Nueva imagen, nuevo nombre de archivo, luego vuelve a rastrear antes de anunciar nada.

Consigue que esos cinco puntos estén bien una vez, conviértelos en plantilla en el head de tu página, y las imágenes Open Graph dejan de ser algo en lo que piensas. Que es la cantidad correcta de atención que hay que darles.

Lee la Serie Fundamental

Esta publicación se sitúa en el grupo de tutoriales. Para las vistas previas que fallan por completo en lugar de recortarse mal, la vista previa del enlace no aparece es la solución plataforma por plataforma, y cómo hacer un enlace clicable cubre la capa de debajo.

Relacionado en el Blog

• ¿La vista previa del enlace no aparece? Causas y cómo solucionarlo
• Acortar un enlace para X (Twitter): qué le hace t.co
• Cómo rastrear enlaces de redes sociales: clics por canal
• Qué es un enlace de marca, y por qué convierte mejor
• Cómo redirigir una URL: seis formas, y cuándo usar cada una
• Enlaces cortos de dominio personalizado: DNS, TLS, y el borde