Tamaño imagen open graph: 1200 × 630 para todas las superficies

El tamaño imagen open graph tiene una respuesta que sirve para todas las superficies a la vez: 1200 × 630 píxeles, JPG o PNG, menos de 5 MB. Ese único archivo cumple las dimensiones recomendadas por Meta, respeta la proporción 1.91:1, queda por debajo de los dos límites de peso documentados y sirve de respaldo para la tarjeta de X. No necesitas un juego. Necesitas una imagen y cuatro líneas de marcado.

Antes de esta página

Este capítulo supone que las cuatro propiedades Open Graph obligatorias ya están en tus páginas. Si no estás seguro, el recuento en 26 páginas de inicio reales está en open graph tags on 26 homepages (en inglés), que incluye la lista oficial de lo que cuenta como obligatorio. Para la etiqueta vecina que describe la página en los resultados, mira cómo escribir una meta description.

Por qué un solo archivo funciona

Toda superficie que muestra una vista previa lee las mismas dos familias de etiquetas, en el mismo orden, y recorta el resultado a su propio marco. La imagen que entregas es una entrada para el diseño de otra persona. Por eso un solo archivo generoso supera a una carpeta de variantes por plataforma: no controlas el recorte, así que controlas la fuente.

El protocolo Open Graph convierte og:image en una de sus cuatro propiedades obligatorias. También define las propiedades estructuradas opcionales: ancho, alto y descripción de la imagen. Y si aportas varias: «Si una etiqueta puede tener varios valores, coloca varias versiones de la misma metaetiqueta en la página. La primera etiqueta, de arriba abajo, tiene preferencia en caso de conflicto» (ogp.me, consultado el 2026-10-27).

La imagen es tu archivo. El recorte pertenece a quien la muestra. Dimensiona para el marco que no ves.

Tamaño imagen open graph: los números y su origen

Dos fuentes publicadas fijan las restricciones y no se contradicen: el límite vinculante es el más estricto de los dos. El relevamiento de 26 páginas de inicio citado abajo se hizo el 2026-08-27 y no se repitió para esta versión.

Meta pide imágenes «de al menos 1200 x 630 píxeles para una visualización óptima en pantallas de alta resolución», con un mínimo de 200 x 200 y una proporción lo más cercana posible a 1.91:1 para mostrar la imagen completa en el feed sin recortes. X indica que las imágenes deben pesar menos de 5 MB, que admite JPG, PNG, WEBP y GIF, que de un GIF animado solo se usa el primer fotograma y que SVG no es compatible (documentación de Meta y referencia de tarjetas de X, verificadas el 2026-08-27).

La intersección segura es 1200 × 630, JPG o PNG, por debajo de 5 MB. Ese es el número que hay que pasarle a quien fabrica el archivo.

El marcado que se pega

Cuatro líneas hacen el trabajo obligatorio; la quinta y la sexta ahorran una ida y vuelta y describen la imagen. Solo URL absolutas: una ruta relativa a la raíz es la forma más común de romper esto.

<meta property="og:image" content="https://ejemplo.es/og/inicio.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Una línea que describe la imagen">
<meta name="twitter:card" content="summary_large_image">

Ojo con los atributos. Los valores Open Graph van en property; los de la tarjeta de X, en name. Ambas familias se leen bien en cualquiera de los dos, y en nuestro relevamiento del 2026-08-27 sobre 26 páginas de inicio, tres sitios escribían al menos una de estas etiquetas en el atributo equivocado, incluido MDN, que pone sus diez etiquetas og: en name.

Comprobar en tres comandos

Ejecútalos contra una URL en vivo. Cada uno termina en un valor comparable con la tabla de arriba.

1. Lee lo que declara la página: curl -sL --compressed -A 'Mozilla/5.0' https://ejemplo.es/ | grep -o '<meta[^>]*og:image[^>]*>'. Si no devuelve nada, la etiqueta la inyecta un script y la mayoría de los lectores no la verá.
2. Confirma que la URL es absoluta y accesible: copia el valor de content y ejecuta curl -sI <url> | head -3. Quieres un 200 y un tipo de contenido de imagen. Un 404 aquí no produce imagen ni error visible.
3. Confirma que el tamaño real en píxeles coincide con lo declarado. En macOS: sips -g pixelWidth -g pixelHeight archivo.jpg. Declarar 1200 × 630 sobre un archivo de 800 × 600 es peor que no declarar nada, porque un lector puede reservar un espacio que nunca recibirá.

Tres formas de equivocarse

Las tres se ven en el marcado o en una petición HTTP, así que ninguna necesita una vista previa renderizada para detectarse.

1. Una ruta relativa en og:image. El protocolo espera una URL. En el relevamiento del 2026-08-27 sobre 26 páginas de inicio, un sitio declaraba og:image y twitter:image como /dev-cdn/v/marketing/…. Un lector que no resuelve contra la URL de la página no obtiene nada, y tu navegador nunca te mostrará el problema.
2. Un logo en lugar de una banner. Un archivo cuadrado en un marco 1.91:1 queda con bandas o recortado al centro. En el mismo relevamiento, de los siete sitios que declaraban dimensiones, cuatro anunciaban menos de 1200 × 630: 400 × 400, 512 × 512, 800 × 600 y 1024 × 1024.
3. Texto incrustado en la imagen. Lo que escribas ahí lo recortarán marcos que no ves, y es invisible para todo lo que lee texto. Pon las palabras en og:title, donde ya se leen.

Dónde deja de ayudar

Acertar el tamaño no refresca la vista previa. Cada superficie cachea lo que trajo la primera vez y ninguna vuelve a leer según tu calendario. Si cambias el archivo, cambia también la URL: una ruta nueva es el único mecanismo de invalidación de caché que funciona igual en todas partes.

La segunda frontera es la medición. No hemos verificado una vista previa renderizada en ninguna superficie. Hacerlo con honestidad obligaría a publicar un enlace real en cada una, y los validadores que respondían esa pregunta están detrás de un inicio de sesión. Todo aquí viene de requisitos publicados y de lo que 26 páginas de inicio declaran de verdad. Si una plataforma recorta tu imagen de una forma que esta página no prevé, la plataforma tiene razón y esta página está incompleta.

Preguntas frecuentes

¿Cuál es el tamaño correcto de una imagen Open Graph?

1200 × 630 píxeles, el mínimo recomendado por Meta para pantallas de alta resolución y la proporción 1.91:1 que pide. Mantén el archivo por debajo de 5 MB para cumplir también el límite de X, y en JPG o PNG para pasar todas las listas de formatos.

¿Hace falta una imagen distinta para X?

No. La referencia de tarjetas de X documenta og:image como respaldo de twitter:image, así que un archivo cubre ambos. Añade otro solo si de verdad deben diferir, sabiendo que tendrás dos archivos que mantener sincronizados.

¿Por qué mi vista previa no muestra imagen?

Por orden de frecuencia: la URL es relativa, no devuelve 200, la etiqueta la inyecta un script y no estaba en el HTML entregado, o el archivo es SVG. X dice claramente que SVG no es compatible.

¿Debo declarar og:image:width y og:image:height?

Son opcionales y ayudan, porque un lector que conoce las dimensiones puede reservar la tarjeta antes de que llegue la imagen. Decláralas solo si son verdaderas. En nuestro relevamiento, solo siete de 26 páginas las declaraban.

¿Importa og:image:alt?

Es la descripción accesible de la imagen de la tarjeta, y casi nadie la escribe: tres de 26 en nuestro relevamiento. Cuesta una línea. Para lo que esas mismas páginas envían del lado de X, mira twitter card tags on 26 homepages (en inglés), y para entender qué recibe un motor de tu página antes de analizarla, mira el registro de promoción de QueryWin.