Aggiungi un'immagine Open Graph - Docs di MetricSpot

Q: Perché la mia immagine non appare anche se ho aggiunto il tag?

Tre sospetti soliti: (1) l'URL è relativo (/og.png) invece di assoluto (https://example.com/og.png) — la maggior parte delle piattaforme richiede assoluto, (2) l'immagine ritorna 404 o 500, (3) la piattaforma sta mostrando un'anteprima cachata da una versione precedente. Passa l'URL nel debugger di Facebook e fai re-scrape.

Q: Mi serve un'immagine diversa per Twitter/X?

Non a meno che tu non ne voglia una. X ripiega su og:image se nessuna twitter:image è impostata, ma twitter:card dovrebbe essere summary_large_image per ottenere il layout a card grande. Vedi tag Twitter Card.

Q: E se la mia pagina è dinamica e il contenuto cambia?

Genera una nuova immagine al build time (Astro/Next.js — astro-og-canvas, @vercel/og) o al request time (edge function). Per l'e-commerce, la pagina prodotto dovrebbe usare una foto del prodotto. Per i post del blog, una card su template con il titolo del post.

Cosa controlla questo check

Cerca <meta property="og:image" content="..."> nel <head> della pagina. Il check fallisce quando il tag manca, quando l’URL è relativo (deve essere assoluto) o quando l’immagine ritorna un codice di stato diverso da 200.

Perché è importante

L’immagine OG è il singolo elemento visivo più grande di una card di link condivisa. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky e la maggior parte dei lettori RSS la renderizzano tutti allo stesso modo: una card con l’immagine in cima e titolo/descrizione sotto.

Un link con un’immagine nitida 1200×630 riceve diversi multipli di click in più rispetto allo stesso link senza immagine. I fallback con URL nudo sembrano rotti — la maggior parte degli utenti presume che la pagina sia morta.

L’immagine OG alimenta anche il pannello “Informazioni su questo risultato” di Google e le card di citazione delle ricerche IA, quindi non averla è un problema di SEO e di scopribilità per IA, non solo social.

Come risolvere

Metti un URL assoluto a un PNG o JPG 1200×630 nel <head> della pagina:

<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="Screenshot della home page di MetricSpot">

I sub-tag :width, :height e :alt sono opzionali ma migliorano il rendering su connessioni lente e l’accessibilità per gli screen reader.

Regole di dimensione (specifica Facebook — ogni altra piattaforma la segue):

Aspect ratio 1.91:1 (1200×630 è la dimensione canonica).
Minimo 600×315 — qualsiasi cosa più piccola viene renderizzata come piccolo quadrato invece che come card grande.
Dimensione file massima 5 MB.
Usa PNG per design ricchi di testo, JPG per le foto.

Immagini OG dinamiche — genera un’immagine unica per post automaticamente:

Vercel OG Image — @vercel/og, da JSX a PNG all’edge.
Astro — astro-og-canvas o satori per la generazione runtime; precotti in dist/og/*.png al build.
WordPress — Yoast Premium, Rank Math o un plugin tipo “WP OG Image Auto” sovrappongono il titolo del post a un template.
Cloudinary / Imgix — trasformazioni di text-overlay su un’immagine template di base.

WordPress — imposta l’immagine in evidenza del post, e Yoast/Rank Math la useranno come og:image automaticamente.

Testa prima di pubblicare — incolla l’URL nello Sharing Debugger di Facebook e nel Post Inspector di LinkedIn. Clicca “Re-scrape” per rinfrescare la cache dopo le modifiche.

Domande frequenti

Perché la mia immagine non appare anche se ho aggiunto il tag?

Tre sospetti soliti: (1) l’URL è relativo (/og.png) invece di assoluto (https://example.com/og.png) — la maggior parte delle piattaforme richiede assoluto, (2) l’immagine ritorna 404 o 500, (3) la piattaforma sta mostrando un’anteprima cachata da una versione precedente. Passa l’URL nel debugger di Facebook e fai re-scrape.

Mi serve un’immagine diversa per Twitter/X?

Non a meno che tu non ne voglia una. X ripiega su og:image se nessuna twitter:image è impostata, ma twitter:card dovrebbe essere summary_large_image per ottenere il layout a card grande. Vedi tag Twitter Card.

E se la mia pagina è dinamica e il contenuto cambia?

Genera una nuova immagine al build time (Astro/Next.js — astro-og-canvas, @vercel/og) o al request time (edge function). Per l’e-commerce, la pagina prodotto dovrebbe usare una foto del prodotto. Per i post del blog, una card su template con il titolo del post.