Añade una imagen Open Graph - Docs de MetricSpot

Q: ¿Por qué no se muestra mi imagen aunque he añadido la etiqueta?

Tres culpables habituales: (1) la URL es relativa (/og.png) en vez de absoluta (https://example.com/og.png) — la mayoría de plataformas exigen absoluta, (2) la imagen devuelve 404 o 500, (3) la plataforma muestra una previsualización cacheada de una versión anterior. Pasa la URL por el depurador de Facebook y haz re-scrape.

Q: ¿Necesito una imagen distinta para Twitter/X?

No, salvo que quieras una. X cae a og:image si no hay twitter:image, pero twitter:card debería ser summary_large_image para conseguir el layout de tarjeta grande. Consulta Etiquetas Twitter Card.

Q: ¿Y si mi página es dinámica y el contenido cambia?

Genera una imagen nueva en build time (Astro/Next.js — astro-og-canvas, @vercel/og) o en request time (edge functions). Para ecommerce, la página de producto debe usar una foto de producto. Para posts de blog, una tarjeta con plantilla y el título del post superpuesto.

Qué comprueba esta auditoría

Busca <meta property="og:image" content="..."> en el <head> de la página. La comprobación falla cuando falta la etiqueta, cuando la URL es relativa (debe ser absoluta), o cuando la imagen devuelve un código de estado distinto de 200.

Por qué importa

La imagen OG es el elemento visual más grande de una tarjeta de enlace compartido. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky y la mayoría de lectores de RSS la renderizan igual: una tarjeta con la imagen arriba y el title/descripción debajo.

Un enlace con una imagen nítida de 1200×630 recibe varias veces más clics que el mismo enlace sin imagen. Las URLs desnudas como fallback parecen rotas — la mayoría de usuarios asume que la página está caída.

La imagen OG también alimenta el panel “Acerca de este resultado” de Google y las tarjetas de cita en búsqueda con IA, así que faltar también es un problema de SEO y descubribilidad por IA, no solo social.

Cómo solucionarlo

Pon una URL absoluta a un PNG o JPG de 1200×630 en el <head> de la página:

<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Captura de la home de MetricSpot">

Las sub-etiquetas :width, :height y :alt son opcionales pero mejoran el renderizado en conexiones lentas y la accesibilidad para lectores de pantalla.

Reglas de tamaño (la spec de Facebook — todas las demás plataformas la siguen):

Relación de aspecto 1.91:1 (1200×630 es el tamaño canónico).
Mínimo 600×315 — cualquier cosa menor se renderiza como cuadrado pequeño en lugar de tarjeta grande.
Máximo 5 MB de archivo.
Usa PNG para diseños con mucho texto, JPG para fotos.

Imágenes OG dinámicas — genera una imagen única por entrada automáticamente:

Vercel OG Image — @vercel/og, JSX → PNG en el edge.
Astro — astro-og-canvas o satori para generación en runtime; hornéala en dist/og/*.png en build time.
WordPress — Yoast Premium, Rank Math o un plugin como “WP OG Image Auto” superponen el título del post sobre una plantilla.
Cloudinary / Imgix — transformaciones de texto superpuesto sobre una imagen base.

WordPress — define la imagen destacada del post y Yoast/Rank Math la usarán como og:image automáticamente.

Pruébalo antes de publicar — pega la URL en el Sharing Debugger de Facebook y en el Post Inspector de LinkedIn. Pulsa “Re-scrape” para refrescar la caché tras los cambios.

Preguntas frecuentes

¿Por qué no se muestra mi imagen aunque he añadido la etiqueta?

Tres culpables habituales: (1) la URL es relativa (/og.png) en vez de absoluta (https://example.com/og.png) — la mayoría de plataformas exigen absoluta, (2) la imagen devuelve 404 o 500, (3) la plataforma muestra una previsualización cacheada de una versión anterior. Pasa la URL por el depurador de Facebook y haz re-scrape.

¿Necesito una imagen distinta para Twitter/X?

No, salvo que quieras una. X cae a og:image si no hay twitter:image, pero twitter:card debería ser summary_large_image para conseguir el layout de tarjeta grande. Consulta Etiquetas Twitter Card.

¿Y si mi página es dinámica y el contenido cambia?

Genera una imagen nueva en build time (Astro/Next.js — astro-og-canvas, @vercel/og) o en request time (edge functions). Para ecommerce, la página de producto debe usar una foto de producto. Para posts de blog, una tarjeta con plantilla y el título del post superpuesto.