Afegeix una imatge Open Graph - Docs de MetricSpot

Què comprova aquesta auditoria

Busca <meta property="og:image" content="..."> al <head> de la pàgina. La comprovació falla quan l’etiqueta no hi és, quan l’URL és relativa (ha de ser absoluta) o quan la imatge retorna un codi d’estat diferent de 200.

Per què importa

La imatge OG és l’element visual més gran d’una targeta d’enllaç compartit. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky i la majoria de lectors RSS la renderitzen tots de la mateixa manera: una targeta amb la imatge a dalt i títol/descripció a sota.

Un enllaç amb una imatge nítida de 1200×630 es clica diverses vegades més sovint que el mateix enllaç sense imatge. Els fallbacks d’URL nua semblen trencats: la majoria d’usuaris pensen que la pàgina està morta.

La imatge OG també alimenta el panell “Sobre aquest resultat” de Google i les targetes de citació d’AI search, així que no tenir-la és també un problema de SEO i de descobribilitat per IA, no només una qüestió social.

Com solucionar-ho

Posa una URL absoluta a un PNG o JPG de 1200×630 al <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 page de MetricSpot">

Les sub-etiquetes :width, :height i :alt són opcionals, però milloren la renderització en connexions lentes i l’accessibilitat per a lectors de pantalla.

Regles de mida (l’especificació de Facebook, que totes les altres plataformes segueixen):

Relació d’aspecte 1.91:1 (1200×630 és la mida canònica).
Mínim 600×315. Qualsevol cosa més petita es renderitza com a quadrat petit en lloc de targeta gran.
Mida màxima de fitxer 5 MB.
Utilitza PNG per a dissenys amb molt text, JPG per a fotos.

Imatges OG dinàmiques, genera una imatge única per entrada de manera automàtica:

Vercel OG Image, @vercel/og, JSX → PNG a l’edge.
Astro, astro-og-canvas o satori per a generació en runtime; també pots compilar a dist/og/*.png en temps de build.
WordPress, Yoast Premium, Rank Math o un plugin com “WP OG Image Auto” superposen el títol de l’entrada sobre una plantilla.
Cloudinary / Imgix, transformacions amb text superposat sobre una imatge plantilla.

WordPress, configura la imatge destacada de l’entrada, i Yoast/Rank Math la utilitzaran com a og:image automàticament.

Prova-ho abans de publicar: enganxa l’URL al Sharing Debugger de Facebook i al Post Inspector de LinkedIn. Clica “Re-scrape” per refrescar la cau després de canvis.

Preguntes freqüents

Per què no apareix la meva imatge tot i haver afegit l’etiqueta?

Tres sospitosos habituals: (1) l’URL és relativa (/og.png) en lloc d’absoluta (https://example.com/og.png), la majoria de plataformes requereixen absoluta; (2) la imatge retorna 404 o 500; (3) la plataforma mostra una previsualització en cau d’una versió anterior. Passa l’URL pel debugger de Facebook i fes re-scrape.

Necessito una imatge diferent per a Twitter/X?

No, tret que en vulguis una. X cau a og:image si no s’ha definit cap twitter:image, però twitter:card ha de ser summary_large_image per aconseguir el disseny de targeta gran. Consulta Twitter Cards.

I si la meva pàgina és dinàmica i el contingut canvia?

Genera una nova imatge en temps de build (Astro/Next.js, astro-og-canvas, @vercel/og) o en temps de petició (edge functions). Per a ecommerce, la pàgina de producte hauria d’utilitzar una foto del producte. Per a entrades de blog, una targeta amb plantilla amb el títol de l’entrada.