Tamaño de imagen Open Graph y etiquetas OG: la guía completa

Cuando se pega un enlace en Facebook, LinkedIn, X, Telegram, Slack o WhatsApp, la plataforma no toma una captura de pantalla de la página. Su crawler descarga el HTML, lee un puñado de etiquetas Open Graph en el <head> y construye con ellas una tarjeta de vista previa: un título, una descripción breve y una imagen. Si las etiquetas faltan o son incorrectas, la plataforma intenta adivinar, y lo habitual es que muestre un logo recortado o ninguna imagen. Esta guía explica qué etiquetas necesitas, qué tamaño debe tener la imagen OG y cómo hacer que las plataformas olviden una vista previa antigua.

La respuesta corta: tamaño de la imagen OG

Usa una sola imagen de 1200×630 píxeles (relación de aspecto 1.91:1) en JPG o PNG, y procura que el archivo sea ligero. Esa única imagen funciona como tarjeta grande en Facebook, LinkedIn y X, y las apps de mensajería la reducen para sus vistas previas más pequeñas. Mantén el titular y el logo dentro de la zona central, porque algunas apps recortan los lados o muestran una miniatura cuadrada.

La relación 2:1 de X y la 1.91:1 de las demás plataformas son lo bastante parecidas como para que una imagen de 1200×630 sirva para ambas: X recorta unos pocos píxeles arriba y abajo. Las plataformas cambian sus diseños de vez en cuando, así que usa la tabla como punto de partida y revisa la tarjeta actual en la herramienta de cada red antes de un lanzamiento importante.

Qué etiquetas Open Graph son obligatorias

El protocolo Open Graph (ogp.me) define cuatro propiedades obligatorias: og:title, og:type, og:image y og:url. En la práctica, también conviene incluir una descripción y el tipo de tarjeta de X. Un conjunto completo para un artículo se ve así:

<meta property="og:title" content="How to choose running shoes for flat feet">
<meta property="og:description" content="Five checks before you buy, from a physiotherapist.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/running-shoes-flat-feet">
<meta property="og:image" content="https://example.com/img/og/running-shoes-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Runner's feet on a treadmill in neutral shoes">
<meta property="og:site_name" content="Example Running">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">

Las etiquetas de Open Graph usan el atributo property, mientras que las de X usan name. Muchos parsers aceptan ambos, pero seguir la convención evita sorpresas. Si no quieres escribir el código a mano, el generador de meta tags produce el bloque de Open Graph y X junto con el título y la descripción.

twitter:card y los valores de respaldo

X lee primero sus propias etiquetas twitter:*. Cuando faltan twitter:title, twitter:description o twitter:image, usa como respaldo og:title, og:description y og:image. Así, una página con Open Graph completo solo necesita una línea más: twitter:card, con el valor summary_large_image para una imagen grande o summary para una miniatura cuadrada pequeña. Añade etiquetas twitter:* independientes solo cuando quieras un texto o una imagen distintos en X.

LinkedIn, Telegram, Slack, Discord y WhatsApp también funcionan a partir de Open Graph. Cuando una plataforma no encuentra ninguna etiqueta OG, puede recurrir al <title>, la meta description y la primera imagen adecuada de la página, y así es como los enlaces compartidos acaban mostrando un píxel de seguimiento o el logo del pie de página.

Por qué importa que la URL de la imagen sea absoluta

Una ruta relativa como /img/cover.jpg funciona en un navegador porque este sabe en qué página está. Los crawlers no siempre la resuelven correctamente, y muchos simplemente mostrarán una tarjeta sin imagen. Escribe siempre la dirección completa con el protocolo. Tres comprobaciones relacionadas:

• Sin inicio de sesión ni cookies. La imagen debe abrirse en una ventana privada. Las imágenes protegidas contra hotlinking, detrás de un desafío de firewall o con una URL firmada que caduca rompen los enlaces compartidos más adelante.
• Sin JavaScript. Los crawlers de redes sociales por lo general no ejecutan scripts. Si una aplicación de una sola página define las meta tags en el cliente, el crawler ve la plantilla vacía. Renderiza las etiquetas en el servidor o prerenderiza las páginas.
• Crawler no bloqueado. Un Disallow en robots.txt o un filtro de bots demasiado agresivo devuelve una página de error al crawler, y la tarjeta se construye con ella.

Cómo almacenan en caché las vistas previas las plataformas y cómo actualizarlas

Cada red analiza una URL una vez y guarda el resultado durante un tiempo. Después de corregir las etiquetas, tu página es correcta, pero la tarjeta antigua sigue apareciendo hasta que la red vuelve a obtener la página. Las formas oficiales de forzarlo:

• Facebook (y los enlaces en mensajes directos de Messenger e Instagram): abre el Depurador de recursos compartidos en developers.facebook.com, pega la URL y haz clic en Scrape Again. El depurador también muestra las etiquetas que leyó y las advertencias que encontró.
• LinkedIn: pasa la URL por Post Inspector (linkedin.com/post-inspector). Al inspeccionar la URL, LinkedIn la vuelve a obtener.
• Telegram: envía el enlace al bot oficial @WebpageBot. Este actualiza la vista previa que Telegram guarda para esa URL; puede que tengas que enviarlo más de una vez si la primera respuesta aún muestra la tarjeta antigua.
• X: actualmente no hay ninguna herramienta pública para borrar la caché. Una solución habitual es compartir la URL con un parámetro inofensivo, como ?v=2, que X trata como una dirección nueva.
• WhatsApp, Slack, Discord: que sepamos, no tienen un botón oficial de actualización. Recogen los cambios con el tiempo; de nuevo, la solución práctica es añadir un parámetro nuevo a la URL.

Errores comunes

1. La misma tarjeta en todas las páginas. Un tema que muestra el título y el logo de la página de inicio en todas partes hace que todos los enlaces compartidos se vean idénticos. Genera og:title, og:description y og:image para cada página.
2. og:url apuntando a la página de inicio. Facebook trata og:url como canónica y muestra la tarjeta de la página de inicio para todos los artículos.
3. Etiquetas duplicadas. Un plugin de SEO y el tema imprimen ambos og:image. Normalmente gana la primera, y puede que no sea la correcta.
4. Texto demasiado pequeño o demasiado cerca de los bordes. La tarjeta suele mostrarse con unos cientos de píxeles de ancho en un teléfono; un texto de 20 píxeles se vuelve ilegible.
5. Imagen demasiado pequeña. Por debajo de 600×315, Facebook cambia al diseño pequeño con una miniatura al lado.
6. Cambios probados solo en un navegador. El navegador muestra la página nueva; las redes todavía tienen la antigua. Vuelve a analizar siempre la URL.

Cómo comprobar tus etiquetas

Pega la URL en el depurador de Open Graph. Obtiene la página desde nuestro servidor sin ejecutar JavaScript, igual que lo hacen los rastreadores de las redes sociales, y muestra tarjetas aproximadas de Facebook, X y LinkedIn, la lista de etiquetas encontradas y faltantes, el tamaño real en píxeles de la imagen y una advertencia sobre las URL relativas. Las vistas previas se parecen mucho a las reales, pero el diseño actual de cada red y su caché tienen la última palabra.

Open Graph no afecta al posicionamiento en Google: los snippets de búsqueda se construyen a partir del <title>, la meta descripción y el contenido de la página. Revisa ese aspecto por separado con el analizador de metaetiquetas y la vista previa de SERP. Para más detalles, lee cómo revisar las metaetiquetas y el snippet en los resultados de búsqueda y la vista previa del snippet.