La etiqueta og:image es una de las metaetiquetas con más impacto de tu página: es la miniatura que aparece cuando alguien comparte tu URL en Facebook, LinkedIn, WhatsApp, Slack, Discord o X. Pero hay una regla que confunde constantemente a los desarrolladores: la URL que pones en og:image **debe ser absoluta**. Una ruta relativa falla en silencio y tu vista previa no mostrará ninguna imagen. Esta guía explica por qué existe ese requisito, qué significa realmente «URL absoluta» y cómo configurarla correctamente.
¿Qué es og:image y por qué importa?
Open Graph es un protocolo introducido por Facebook en 2010 que te permite controlar cómo aparece una URL cuando se comparte en plataformas sociales. La metaetiqueta `og:image` define la imagen de vista previa: la miniatura grande que llama la atención en un feed, un mensaje de chat o una tarjeta de enlace. Hoy la admiten prácticamente todas las plataformas que generan vistas previas: Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage y muchas más.
Sin una og:image válida, las plataformas no muestran ninguna imagen o intentan extraer una al azar de la página, normalmente algo irrelevante o demasiado pequeño para verse bien. Una og:image bien elaborada puede aumentar drásticamente la tasa de clics del contenido compartido, lo que la convierte en una de las metaetiquetas con mayor impacto que puedes añadir.
La sintaxis básica
<meta property="og:image" content="https://example.com/images/article-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A descriptive alt text for the preview image" />Note
Por qué og:image requiere una URL absoluta
Cuando un usuario comparte un enlace en Facebook, LinkedIn o WhatsApp, el rastreador web de la plataforma visita esa URL para leer sus metaetiquetas. Y aquí está la clave: el rastreador es un cliente HTTP independiente, no tiene noción de «de qué página viene». Cuando lee una ruta relativa como `/images/cover.jpg`, no tiene una URL base con la que resolverla, así que ignora la etiqueta o lanza un error.
Una URL absoluta, en cambio, es autosuficiente. Incluye el protocolo, el dominio y la ruta completa: todo lo que el rastreador necesita para descargar la imagen desde cualquier contexto, sin depender de la página que acaba de leer. Por eso la documentación de Open Graph indica explícitamente que og:image debe ser una URL absoluta, y por eso todas las plataformas importantes imponen este requisito.
La URL de og:image debe ser una URL absoluta. No se admiten URL relativas, URL relativas al protocolo ni URI de datos.
Los tres formatos de URL y cuáles funcionan
| Formato de URL | Ejemplo | ¿Funciona como og:image? |
|---|---|---|
| URL absoluta | https://example.com/og.jpg | ✓ Sí - siempre funciona |
| URL relativa al protocolo | //example.com/og.jpg | ✗ No - falta el esquema |
| Ruta raíz-relativa | /images/og.jpg | ✗ No - sin dominio |
| Ruta relativa | images/og.jpg | ✗ No - sin dominio ni raíz |
| URI de datos | data:image/png;base64,… | ✗ No - no es una URL |
Warning
Qué significa realmente «URL absoluta»
Una URL absoluta identifica por completo la ubicación del recurso en internet, independientemente del contexto en el que aparezca. Consta de cuatro componentes, todos ellos obligatorios:
- Esquema - el protocolo: `https://` (usa siempre HTTPS; las imágenes HTTP pueden bloquearse por reglas de contenido mixto en páginas HTTPS)
- Host - tu nombre de dominio: `example.com` o `www.example.com`
- Ruta - la ubicación del archivo: `/images/og-cover.jpg`
- Opcional: puerto - solo necesario si se ejecuta en un puerto no estándar (p. ej. `:8080`). No lo incluyas en sitios en producción.
https://example.com/images/og-cover.jpg
│ │ │
│ │ └-- ruta al archivo de imagen
│ └-------------- nombre de host (tu dominio)
└---------------------- esquema (siempre https://)HTTPS frente a HTTP
Usa siempre `https://` en la URL de tu og:image. Si tu og:image apunta a una URL HTTP pero tu página se sirve por HTTPS, los navegadores y algunos rastreadores bloquearán la petición por contenido mixto. Facebook, LinkedIn y WhatsApp descargan las imágenes por HTTPS y fallarán en silencio o no mostrarán imagen si tu URL usa HTTP.
Tip
Cómo generar la URL absoluta correcta en distintos frameworks
La causa más común de errores de URL relativa es que los desarrolladores construyen el valor de og:image con concatenación de cadenas sin incluir explícitamente el origen. Aquí tienes el patrón correcto para los frameworks y entornos más populares.
Next.js (App Router)
En Next.js 13+ con App Router, usa la propiedad `metadataBase` en tu layout raíz. Esto indica a Next.js qué origen usar al resolver rutas de imagen relativas en `openGraph.images`.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'), // ← define la base
openGraph: {
images: ['/images/og-cover.jpg'], // Next.js la resuelve a URL absoluta
},
};Sin `metadataBase`, Next.js emitirá una ruta relativa en el HTML y los rastreadores sociales no podrán cargar la imagen. Es una de las configuraciones que más se olvidan en los despliegues de Next.js.
Next.js (Pages Router)
En el Pages Router con `next/head` debes construir manualmente la URL absoluta completa, normalmente usando una variable de entorno para el origen del sitio.
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
<Head>
<meta
property="og:image"
content={`${SITE_URL}/images/og-cover.jpg`}
/>
</Head>HTML plano / sitios estáticos
Aquí no hay magia de framework: escribe la URL completa directamente. La única variable a controlar es asegurarte de usar el dominio de producción y no localhost.
<meta property="og:image" content="https://example.com/images/og-cover.jpg" />WordPress
Plugins como Yoast SEO, Rank Math o All in One SEO generan automáticamente URL absolutas de og:image combinando `home_url()` con la ruta de la imagen subida. Si defines og:image manualmente en un tema, usa `get_site_url()` para construir la URL absoluta en lugar de fijar el dominio en el código.
$og_image = get_site_url() . '/wp-content/uploads/og-cover.jpg';
echo '<meta property="og:image" content="' . esc_attr($og_image) . '" />';Enfoque con variables de entorno (recomendado en cualquier stack)
Fijar el dominio en el código es frágil: los entornos de staging y producción usan dominios distintos y una errata rompe las vistas previas en todas partes. El patrón más limpio es guardar la URL base del sitio en una variable de entorno y referenciarla al construir los valores de og:image.
NEXT_PUBLIC_SITE_URL=https://example.comexport const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
export function absoluteOgImage(path: string): string {
// Asegura que la ruta empiece por /
const normalized = path.startsWith('/') ? path : `/${path}`;
return `${SITE_URL}${normalized}`;
}
// Uso:
// absoluteOgImage('/images/og-cover.jpg')
// → 'https://example.com/images/og-cover.jpg'Optimizador de texto de vista previa Open Graph
Comprueba la longitud de og:title y og:description, el riesgo de truncado y la calidad del texto de la vista previa social, al instante en tu navegador.
Requisitos específicos de WhatsApp para og:image
Las vistas previas de WhatsApp las genera su propio rastreador, que en varios aspectos es más estricto que Facebook o LinkedIn. Si tu og:image funciona en Facebook pero no en WhatsApp, normalmente la causa es una de estas restricciones.
- URL HTTPS absoluta - igual que en el resto de plataformas; WhatsApp no sigue redirecciones de HTTP a HTTPS.
- La imagen debe ser de acceso público - sin autenticación ni protección antibots que bloquee los rangos de IP del rastreador de WhatsApp.
- Tamaño mínimo de imagen: 300×200 px - las imágenes más pequeñas suelen ser ignoradas por el renderizador de vistas previas de WhatsApp.
- Tamaño máximo de archivo: ~300 KB - el rastreador de WhatsApp tiene un tiempo de espera corto para descargar imágenes. Las imágenes grandes expiran o se omiten.
- Formato JPEG o PNG - la compatibilidad con WebP varía según la versión y la plataforma de WhatsApp. Usa JPEG para máxima compatibilidad.
- Se recomienda encarecidamente og:image:width y og:image:height - permiten a WhatsApp dimensionar el contenedor de la vista previa antes de descargar.
Warning
Configuración recomendada de og:image para WhatsApp
<!-- og:image principal - debe ser una URL HTTPS absoluta -->
<meta property="og:image" content="https://example.com/og/article-cover.jpg" />
<!-- Complementos muy recomendados -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Título del artículo o descripción breve" />
<!-- Necesarias para que WhatsApp muestre una tarjeta completa (no solo una URL) -->
<meta property="og:title" content="El título de tu página" />
<meta property="og:description" content="Descripción breve del contenido de la página." />
<meta property="og:url" content="https://example.com/tu-pagina" />Generador de metaetiquetas
Genera un bloque completo de Open Graph, Twitter Card y metaetiquetas estándar en segundos, con vista previa en tiempo real y avisos de auditoría SEO.
Errores comunes y cómo solucionarlos
Incluso desarrolladores con experiencia repiten los mismos errores con og:image. Estos son los problemas más frecuentes y sus soluciones exactas.
Error 1: usar una ruta relativa
<meta property="og:image" content="/images/og-cover.jpg" /><meta property="og:image" content="https://example.com/images/og-cover.jpg" />Error 2: usar localhost en compilaciones de producción
Suele ocurrir cuando una variable de entorno de staging o desarrollo local se sube al repositorio sin sobrescribirse para producción.
<meta property="og:image" content="http://localhost:3000/og.jpg" />Error 3: no incluir og:image en absoluto
Si no hay og:image, las plataformas intentarán buscar una imagen en el contenido de la página, normalmente con malos resultados. Proporciona siempre una og:image explícita en cada página que esperes que se comparta. Puedes usar el Analizador de metaetiquetas de Aback para auditar al instante cualquier URL en vivo y confirmar si og:image está presente y bien formateada.
Error 4: la imagen devuelve un estado 4xx o 5xx
Una URL absoluta correcta en su forma pero rota en la práctica (404, 403, 500) producirá el mismo resultado que no tener imagen: una vista previa en blanco. Verifica siempre que la URL de la imagen devuelve un 200 OK con la cabecera `Content-Type` correcta.
Error 5: la imagen está detrás de autenticación
Los rastreadores sociales no envían cookies ni cabeceras de autenticación. Si tu URL de og:image requiere inicio de sesión o está en un servidor de staging protegido con autenticación básica HTTP, el rastreador recibirá un 401 o el HTML de la página de login en lugar de la imagen. Los archivos de og:image deben ser siempre de acceso público, incluso cuando la página esté detrás de un muro de pago.
Error 6: dimensiones de imagen incorrectas
Las imágenes demasiado pequeñas (menos de 200×200 px) pueden ignorarse. Las imágenes con relaciones de aspecto inusuales pueden mostrarse recortadas o con barras. Las dimensiones seguras universales son 1200×630 px con relación 1.91:1. Puedes generar una og:image del tamaño correcto en segundos con el Generador de imágenes OG.
| Problema | Síntoma | Solución |
|---|---|---|
| Ruta relativa | No se muestra imagen al compartir | Antepón https://tudominio.com |
| URL de localhost | No se muestra imagen al compartir | Usa el dominio de producción; revisa las variables de entorno |
| HTTP (no HTTPS) | Sin imagen o error de contenido mixto | Sirve la imagen por HTTPS |
| Imagen 404/403 | No se muestra imagen al compartir | Corrige la ruta o los permisos de acceso |
| Imagen protegida por autenticación | No se muestra imagen al compartir | Mueve la imagen a una ruta pública del CDN |
| Dimensiones incorrectas | Vista previa recortada o ausente | Usa JPEG o PNG de 1200×630 px |
| Sin og:image:width/height | Vista previa lenta o ausente en WhatsApp | Añade og:image:width y og:image:height |
Cómo verificar que tu og:image es correcta
Configurar la etiqueta correctamente en el código es una cosa; confirmar que realmente funciona es otra. Estas son las formas más rápidas de verificarlo.
Usa el Analizador de metaetiquetas
El Analizador de metaetiquetas de Aback Tools te permite introducir cualquier URL en vivo y ver todas las metaetiquetas que emite la página, incluida og:image. Comprueba si el valor está presente, si la URL es absoluta y señala problemas de formato habituales. Es la verificación inicial más rápida.
Usa el Sharing Debugger de Facebook
El Sharing Debugger de Facebook (`developers.facebook.com/tools/debug`) descarga y renderiza los datos de Open Graph de cualquier URL, te muestra exactamente qué imagen aparecerá y te permite forzar un nuevo rastreo para limpiar la caché. Es la fuente autorizada para las vistas previas de Facebook e Instagram.
Usa el Post Inspector de LinkedIn
El Post Inspector de LinkedIn (`linkedin.com/post-inspector`) cumple la misma función para las vistas previas de LinkedIn. Es especialmente útil porque el comportamiento del rastreador de LinkedIn difiere del de Facebook en cómo gestiona la caché y las redirecciones HTTPS.
Inspecciona directamente el código HTML
Muestra el código fuente (`Ctrl+U` / `Cmd+U`) o usa las DevTools del navegador para leer el HTML sin procesar. Busca la metaetiqueta `og:image` y copia su valor. Si no empieza por `https://`, fallará en cualquier rastreador.
Prueba la URL de la imagen de forma independiente
Pega la URL de og:image directamente en una pestaña del navegador. Si obtienes un 404, una página de login o cualquier cosa que no sea la imagen, los rastreadores recibirán la misma respuesta. La URL debe devolver la imagen sin procesar con un 200 OK.
Analizador de metaetiquetas
Audita cualquier URL en vivo para comprobar la presencia de og:image, el formato de URL absoluta, las etiquetas Twitter Card y más de 15 señales SEO en un solo escaneo.
og:image en las distintas plataformas
Cada plataforma trata og:image de forma ligeramente distinta. Entender esas diferencias te ayuda a escribir una sola metaetiqueta que funcione en todas partes.
| Plataforma | Tamaño mínimo | Tamaño recomendado | Formato | Caché |
|---|---|---|---|---|
| Facebook / Instagram | 200×200 px | 1200×630 px | JPG, PNG, GIF | Persistente; usa el Debugger para limpiarla |
| 200×200 px | 1200×627 px | JPG, PNG | Persistente; usa el Post Inspector | |
| 300×200 px | 1200×630 px | JPG, PNG | Por dispositivo; difícil de limpiar | |
| Telegram | 200×200 px | 1200×630 px | JPG, PNG, WebP | Duradera; se regenera al recompartir |
| Discord | 256×256 px | 1200×630 px | JPG, PNG, GIF | Corta; se refresca automáticamente |
| Slack | 500×500 px | 1200×630 px | JPG, PNG | Por espacio de trabajo; se limpia a los ~30 días |
| X (Twitter) | 144×144 px | 1200×600 px | JPG, PNG, WebP | ~7 días; usa el Card Validator para limpiarla |
Note
og:images dinámicas
Un patrón cada vez más habitual es generar las og:image dinámicamente por página: por ejemplo, la og:image de un artículo puede incluir el título y el nombre del autor, generados en el servidor como PNG. Frameworks como Next.js lo permiten con la API `ImageResponse` (`next/og`). El resultado sigue siendo una URL absoluta: la generación dinámica ocurre en el servidor y los rastreadores solo ven una URL de imagen `https://` normal.
Si prefieres un enfoque sin código, el Generador de imágenes OG te permite diseñar una imagen de vista previa social de 1200×630 px con tu propio texto, colores y diseño, y descargarla como PNG, lista para subirla a tu CDN y referenciarla como URL absoluta.
og:image junto al conjunto completo de etiquetas Open Graph
og:image rara vez funciona de forma aislada. Las plataformas usan el conjunto completo de etiquetas Open Graph para decidir si muestran una tarjeta enriquecida o solo una URL simple. Si añades og:image a una página, estas son las otras etiquetas que deberías incluir a la vez:
- og:title - el titular de la tarjeta (normalmente coincide con `<title>`, pero puede ser más corto)
- og:description - un resumen de 1-2 frases que aparece bajo el título; comprueba su longitud con el Optimizador de texto de vista previa OG
- og:url - la URL canónica de la página (usa la misma que en tu `<link rel="canonical">`)
- og:type - `website` para la mayoría de páginas; `article` para artículos del blog
- og:site_name - el nombre de tu sitio web o marca
- og:image - la URL absoluta de tu imagen de vista previa (el tema de este artículo)
- og:image:width y og:image:height - muy recomendadas para un renderizado más rápido
- og:image:alt - texto alternativo descriptivo por accesibilidad y contexto legible por IA
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief, compelling description under 155 characters." />
<meta property="og:url" content="https://example.com/blog/your-article" />
<meta property="og:image" content="https://example.com/og/your-article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Visual description of the preview image" />
<!-- Alternativa para Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/your-article.jpg" />Puedes generar y validar todo este bloque, incluida la og:image con comprobación de URL absoluta, con el Generador de metaetiquetas, o validar una página existente con el Analizador de metaetiquetas.
Key takeaways
- og:image debe ser una URL absoluta: las rutas relativas, las URL relativas al protocolo y las URI de datos fallan en silencio.
- Usa siempre https://: las imágenes HTTP se bloquean por reglas de contenido mixto y muchos rastreadores las rechazan.
- El tamaño recomendado de og:image es 1200×630 px (relación 1.91:1) y un peso inferior a ~300 KB en JPEG.
- Incluye og:image:width y og:image:height para acelerar el renderizado de la vista previa en WhatsApp y Telegram.
- En el App Router de Next.js, define metadataBase para evitar rutas relativas; en el Pages Router, construye la URL completa con una variable de entorno.
- Verifica con el Analizador de metaetiquetas, el Sharing Debugger de Facebook y el Post Inspector de LinkedIn antes de publicar.
- Los rastreadores no pueden acceder a localhost, a servidores de staging con autenticación ni a imágenes que devuelven 4xx/5xx: los archivos de og:image deben ser de acceso público.