Tamaño de imagen Open Graph: un archivo para todo

Una imagen de 1200 por 630 píxeles, en PNG o JPEG, de menos de 1 MB aproximadamente, con el contenido importante dentro de los 1080 por 600 centrales. Ese archivo cumple las especificaciones publicadas por Meta y LinkedIn, que es toda la respuesta a la pregunta sobre el tamaño de la imagen Open Graph para casi cualquier sitio.

Las dimensiones son la parte fácil. Tampoco suelen ser lo que se rompe. Lo que se rompe es un texto demasiado cerca de un borde que una plataforma recorta, una imagen que nunca se actualiza porque un rastreador guardó la antigua en caché hace meses, o una tarjeta que sale sin ninguna imagen porque el archivo pesaba 4 MB en un origen lento. La pregunta sobre el tamaño de la imagen OG son en realidad tres preguntas, y solo una trata de píxeles. Esta guía cubre la especificación, la zona segura, el comportamiento de la caché que hace pensar que tus 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, vista previa de enlace que no aparece es la guía de diagnóstico.

El tamaño y por qué es ese

La relación 1.91:1 aparece tanto en la documentación de Meta como en la de LinkedIn. El propio protocolo Open Graph (consultado el 2026-10-25) no fija ningún tamaño; sus ejemplos son 400x300 y 300x300, y pide og:image:alt siempre que especifiques una imagen. En torno a las cifras de las plataformas se formó un estándar de facto.

Las fuentes son la guía de imágenes de Meta y la página de ayuda de LinkedIn sobre vistas previas de enlaces. X documenta sus tarjetas por separado, pero no pudimos cargar esa documentación, así que consúltala antes de fiarte de un tamaño para X.

La zona segura de la que nadie habla

Una tarjeta rara vez se muestra con la proporción con la que la diseñaste. La propia página de LinkedIn dice que las imágenes cuadradas y verticales pueden recortarse, y cualquier cosa de menos de 401 px de ancho pasa a ser una miniatura pequeña. La zona de 1080 por 600 de abajo es una regla práctica nuestra, no una cifra de ninguna plataforma.

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

El contraste también importa. Las tarjetas se muestran sobre fondos claros en unos clientes y oscuros en otros, así que una imagen que dependa de su entorno para separarse puede perder sus bordes.

Las etiquetas que rodean 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" />

Usa una URL absoluta con esquema y host, ya que un rastreador lee la etiqueta sin contexto de página. Meta dice que el ancho y el alto permiten a su rastreador mostrar la imagen en el primer envío sin descargarla antes. Y og:image:alt es la etiqueta de accesibilidad que no cuesta nada y falta casi en todas partes.

Por qué no aparece tu imagen nueva

Este es el que genera tickets de soporte. Arreglaste la imagen, ves el archivo nuevo en su URL, y la tarjeta sigue mostrando el diseño del trimestre pasado.

La documentación de Meta dice que su rastreador guarda las imágenes en caché por URL, y que cambiar la imagen no actualiza las vistas previas de envíos existentes. Tres salidas, en el orden en que las probaría:

• Fuerza un nuevo rastreo con el Sharing Debugger de Facebook. LinkedIn también tiene un Post Inspector, aunque la página de ayuda que leímos no describe su caché.
• Publica la imagen con un nombre de archivo nuevo, que es una URL distinta sin entrada en la caché. Meta lo recomienda, y es la vía fiable.
• Cambia la propia URL compartida, algo trivialmente fácil cuando lo que compartes es un enlace corto que controlas y no la dirección permanente de una página.

Antes de publicar, el verificador Open Graph gratuito obtiene una URL y muestra el título, la descripción, la imagen, el nombre del sitio y una vista previa de tarjeta de Twitter que encuentra. Solo lee etiquetas. No informa de las dimensiones de la imagen ni borra la caché de ninguna plataforma.

Vistas previas cuando compartes un enlace corto

Un enlace corto no tiene etiquetas Open Graph propias ni las necesita. El edge de Elido responde a los rastreadores con la redirección normal, porque las vistas previas de enlaces en las apps de chat necesitan seguirla, y no cuenta esas descargas como clics (el filtro de bots es una lista de user-agents, así que algunas descargas automatizadas pueden colarse). La tarjeta se construye con las etiquetas del destino. Si es incorrecta, arregla el destino.

Dos cosas sí dependen de la capa del enlace. Una redirección del lado del servidor es la opción segura, una razón más para mantener corta la cadena. Y redirigir un enlace corto a otro destino cambia su vista previa, aunque las plataformas que guardaron en caché la tarjeta antigua siguen mostrándola.

Un vacío: Elido no tiene una imagen OG ni un título alternativos por enlace, así que un enlace corto no puede llevar una tarjeta distinta de la de su destino. Las páginas de micrositio sí tienen un campo de imagen OG. Si necesitas tarjetas por enlace, dínoslo; está en nuestro backlog.

Para tener el enlace y los datos de clics en un solo lugar, crea un espacio de trabajo en tu propio dominio y revisa la tarjeta antes del envío.

Una lista de comprobación que vale la pena guardar

• 1200 por 630, PNG o JPEG, URL HTTPS absoluta, menos de 1 MB por costumbre nuestra. Esa es toda la decisión sobre el tamaño de la imagen OG.
• Nada importante fuera de los 1080 por 600 centrales (regla práctica nuestra), sin bordes finos.
• og:image:width, og:image:height y og:image:alt presentes.
• twitter:card definido como summary_large_image si quieres la tarjeta grande en X.
• Imagen nueva, nombre de archivo nuevo, y luego nuevo rastreo antes de anunciar nada.

Acierta con esos cinco una vez, ponlos en una plantilla en el head de tu página y las imágenes Open Graph dejarán de ser algo en lo que pensar. Que es la cantidad correcta de atención que darles.

Lee la serie cornerstone

Este artículo forma parte del clúster de tutoriales. Para vistas previas que fallan del todo en lugar de recortarse mal, vista previa de enlace que no aparece es la solución plataforma por plataforma, y cómo hacer un enlace en el que se pueda hacer clic cubre la capa de debajo.

Relacionado en el blog

• ¿No aparece la vista previa del enlace? 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 conviene cada una
• Enlaces cortos con dominio personalizado: DNS, TLS y el edge