Tamaño de la imagen OG: vistas previas de 1200×630 que funcionan

El tamaño de imagen OG que funciona casi en todas partes es 1200×630 píxeles, una proporción horizontal de aproximadamente 1,91 a 1. Facebook, LinkedIn, X, Slack, Discord y la mayoría de las apps de mensajería crean sus vistas previas de enlace a partir de esta única imagen, declarada en la etiqueta og:image de tu página. LinkedIn indica 1200×627 para su imagen de enlace, lo bastante cerca como para que un solo archivo de 1200×630 sirva para ambos.

Open Graph 1200×630

1200 × 630

Imagen de enlace de LinkedIn 1200×627

1200 × 627

Cuadrado central 630×630

630 × 630

Qué es una imagen Open Graph y cómo se obtienen las vistas previas

Open Graph es un conjunto de etiquetas meta en el head de una página web. Cuando alguien pega tu enlace en una publicación o un chat, la plataforma envía un rastreador a la página, lee esas etiquetas, descarga la imagen y dibuja la tarjeta de vista previa. Lo hace una vez y luego guarda el resultado en caché, a veces durante días.

Tres detalles pillan a casi todo el mundo. La dirección de la imagen debe ser una URL completa, que empiece por https://, no una ruta relativa. Debe cargar para cualquiera, sin un inicio de sesión ni un banner de cookies de por medio. Y las etiquetas deben estar en el HTML que envía tu servidor, porque la mayoría de los rastreadores no ejecutan JavaScript, así que nunca ven las etiquetas que añade un script después de cargar la página.

<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />

Diseñar una imagen OG que se lea en miniatura

Una imagen de 1200×630 casi nunca se ve a 1200 píxeles. En un feed en el móvil se reduce a una franja del ancho de la pantalla, y en un chat puede ser aún más pequeña. Diseña para la versión pequeña: un titular corto, letra grande, contraste fuerte y nada importante en las esquinas.

• De tres a siete palabras. El título de la página reducido a lo esencial, no el título completo.
• Letra grande. En el lienzo de 1200×630, un titular de unos 64 a 96 píxeles de alto sigue siendo legible cuando la vista previa se reduce.
• Márgenes de unos 60 píxeles o más, para que nada toque un borde que una plataforma pueda redondear o recortar.
• Una pequeña firma de marca, como un logotipo de texto o el nombre de tu web, en el mismo sitio en todas las imágenes.
• Un fondo coherente, para que la gente reconozca tus enlaces antes de leerlos.

El contraste importa más en tamaños pequeños, no menos. Comprueba que tu titular cumple las proporciones de contraste de color y, si el fondo es un degradado, mide el contraste justo donde están las palabras. Texto sobre un degradado muestra cómo encontrar la zona tranquila.

Una imagen OG para toda la web, o una por página

Toda web necesita una imagen por defecto para las páginas que no tienen nada mejor. Pero una imagen por defecto en todas las páginas hace que todos los enlaces compartidos parezcan idénticos, y nadie puede saber por la vista previa de qué página se trata. Las páginas que más se comparten merecen la suya propia.

Hacer a mano una imagen distinta para cada artículo no escala. La mayoría de los frameworks modernos pueden generar una imagen OG a partir de una plantilla cuando se construye la página o se pide por primera vez; las imágenes OG dinámicas explican el método.

Cómo probar tus vistas previas de enlace

1. 1

   Revisa las etiquetas

   Abre la página, mira su código fuente y busca og:image. Si no está en el código fuente, los rastreadores no la verán.

2. 2

   Abre la dirección de la imagen

   Pega la URL de og:image en una ventana privada del navegador. Debe cargar directamente, por https, sin iniciar sesión.

3. 3

   Usa el inspector de la plataforma

   El Post Inspector de LinkedIn muestra cómo ve LinkedIn una URL y actualiza su caché. Facebook tiene un Depurador de contenido compartido parecido.

4. 4

   Envíatelo

   Pega el enlace en una app de chat y en un borrador de publicación. Mira la vista previa en el móvil, donde es más pequeña.

5. 5

   Vacía la caché tras los cambios

   Si sigue apareciendo una imagen antigua, da a la nueva imagen una dirección nueva, por ejemplo añadiendo ?v=2 a su URL, y vuelve a inspeccionarla.

Formato y peso del archivo

Usa PNG para tarjetas diseñadas con texto y color plano, y JPEG para imágenes fotográficas. Evita el SVG, que la mayoría de los rastreadores no aceptan para las vistas previas, y ten cuidado con los formatos más nuevos que algunas plataformas quizá no lean. Mantén el archivo ligero para que el rastreador lo descargue rápido; una tarjeta diseñada rara vez necesita pesar mucho. Un toque de grano evita que un degradado se escalone cuando una plataforma lo vuelve a comprimir.

En Gradiently, Vista previa de enlace (Open Graph) 1200×630 es uno de los tamaños integrados, así que puedes recomponer una publicación como vista previa con Copiar a tamaños y mantener un mismo estilo en la publicación y en el enlace. En un lanzamiento, la imagen OG es solo un elemento de una lista más larga; los gráficos del día del lanzamiento tienen la lista completa.