Tag Open Graph: come impostare og:image e avere anteprime di link pulite

Di SEOgrinder · Pubblicato il 4 novembre 2026 · 10 min di lettura

Risposta breve: i tag Open Graph sono meta tag nell’head di una pagina che dicono a social network e messenger quale titolo, quale descrizione e quale immagine mostrare quando qualcuno condivide un link. Il protocollo ne richiede quattro (og:title, og:type, og:image e og:url), e conviene aggiungere anche og:description. Usa un’immagine di almeno 1200 × 630 pixel e sotto gli 8 MB, indica il suo indirizzo https completo e metti ogni tag nell’HTML che il tuo server consegna, non in JavaScript eseguito dopo. Un effetto sul posizionamento non è dimostrato: i tag determinano l’aspetto di un link condiviso.

Che cosa sono i tag Open Graph?

Open Graph è un protocollo con cui una pagina web si descrive come oggetto: con un titolo, un tipo, un’immagine e un indirizzo. Secondo ogp.me, il protocollo è nato in origine presso Facebook. Lo si usa aggiungendo tag meta nell’head della pagina. Quando qualcuno incolla il tuo link in un post o in una chat, la piattaforma richiama la pagina, legge questi tag e ne ricava la scheda di anteprima. Senza di essi, la piattaforma deve tirare a indovinare quale titolo, quale descrizione e quale immagine usare.

Il protocollo indica quattro proprietà obbligatorie per ogni pagina, più una facoltativa ma generalmente consigliata:

Tag	Che cosa contiene	Stato
og:title	Il titolo dell’oggetto, così come deve apparire nell’anteprima	Obbligatorio
og:type	Il genere di oggetto, per esempio `website` o `article`	Obbligatorio
og:image	L’indirizzo dell’immagine che rappresenta la pagina	Obbligatorio
og:url	L’indirizzo canonico della pagina, usato come suo identificativo permanente	Obbligatorio
og:description	Una descrizione di una o due frasi	Facoltativo, generalmente consigliato

Il valore di og:type conta più di una semplice etichetta. Secondo ogp.me, il tipo scelto può portare con sé altre proprietà. Per article il protocollo elenca campi come article:published_time e article:modified_time. Altri tag facoltativi sono og:site_name (il nome dell’intero sito) e og:locale (la lingua dei tag, predefinita en_US).

L’HTML minimo per i tag Open Graph

Ecco un insieme completo da adattare. (L’esempio su ogp.me imposta anche un attributo prefix sull’elemento html; le grandi piattaforme leggono i tag anche senza.) Va dentro l’elemento head, accanto al normale tag title:

<head>
  <title>Tag Open Graph: come impostare og:image</title>
  <meta property="og:title" content="Tag Open Graph: come impostare og:image">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Una scheda di anteprima di un link con immagine, titolo e descrizione">
  <meta property="og:description" content="I quattro tag Open Graph obbligatori, le regole per le dimensioni dell’immagine e come testare l’anteprima di un link.">
  <meta property="og:site_name" content="Esempio">
</head>

Qualche nota sui dettagli:

og:url è un identificativo permanente. ogp.me lo definisce come l’URL canonico dell’oggetto. Usa lo stesso indirizzo del tuo link canonical, senza parametri di tracciamento.
Scrivi l’indirizzo dell’immagine per intero. Tutti gli esempi su ogp.me usano un indirizzo completo. Un percorso relativo come /images/card.png dipende da come ogni crawler lo risolve, quindi non fare affidamento su questo.
Larghezza e altezza aiutano. La documentazione di Facebook dice che questi due tag permettono al suo crawler di mostrare subito l’immagine, senza doverla prima scaricare ed elaborare.
Aggiungi og:image:alt. ogp.me afferma che una pagina che indica un’immagine dovrebbe indicare anche una descrizione di ciò che contiene (una descrizione, non una didascalia).

Le regole per og:image: dimensioni, file e indirizzo

I numeri più chiari li pubblica Facebook, nella pagina sulle immagini nei link condivisi. Sono il riferimento per il resto di questa sezione:

La dimensione minima consentita è 200 × 200 pixel.
Il file non deve superare gli 8 MB.
Per la resa migliore sui dispositivi ad alta risoluzione, usa almeno 1200 × 630 pixel.
Per ottenere post con link e immagine grande servono almeno 600 × 315 pixel. Le immagini più piccole vengono mostrate comunque, ma molto più piccole.
Mantieni il rapporto d’aspetto il più possibile vicino a 1,91 : 1, così l’immagine appare intera senza ritagli. 1200 × 630 dà circa 1,905 : 1, ed è per questo che quella dimensione è la scelta abituale.
Il crawler accetta solo le codifiche gzip e deflate, quindi verifica che il tuo server o la tua CDN rispondano con una di esse.

Queste sono le regole di Facebook. Altre app e messenger leggono gli stessi tag, ma questo articolo non documenta i loro limiti, quindi prova nei posti che per te contano. Come riferimento, le pagine del blog di SEOgrinder usano un’immagine di anteprima di 1200 × 630 pixel.

Altre due condizioni riguardano l’accesso, non le dimensioni. L’immagine deve essere pubblica: nessun login davanti e nessuna regola del robots.txt che blocchi la cartella in cui si trova. Se un crawler non riesce a richiamare il file, l’anteprima resta senza immagine, per quanto buono sia il file.

Dai a ogni pagina i suoi tag Open Graph

Poiché og:url è l’identificativo permanente di un oggetto, deve essere diverso su ogni pagina. Lo stesso vale per il resto:

og:title dovrebbe dire di che cosa parla questa pagina, non il nome dell’intero sito.
og:description dovrebbe riassumere questa pagina in una o due frasi.
og:image dovrebbe mostrare qualcosa che si adatti alla pagina. Tieni un’immagine predefinita per le pagine che non ne hanno una propria.
og:type può variare a sua volta: website per una home page, article per un articolo del blog o una notizia.

Qualunque sia il tuo stack, genera i tag dai dati di ciascuna pagina invece di scriverli a mano. Un piccolo esempio in Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

La funzione esc è importante: un titolo con le virgolette chiuderebbe in anticipo l’attributo e romperebbe il tag. Se usi un CMS, cerca il campo che imposta l’immagine di condivisione per ogni pagina. Il risultato da verificare resta lo stesso: i tag nell’HTML consegnato.

I tag Open Graph devono stare nell’HTML consegnato

Molti siti moderni inviano un guscio HTML quasi vuoto e lasciano che sia JavaScript a costruire la pagina nel browser. Google se la cava: secondo la sua documentazione su JavaScript, la Ricerca esegue il rendering delle pagine con una versione evergreen di Chromium. La stessa pagina dice anche che il rendering lato server o il pre-rendering restano una buona idea, perché non tutti i bot sono in grado di eseguire JavaScript.

Per i crawler IA esiste una misurazione: a dicembre 2024 Vercel e MERJ hanno rilevato che nessuno dei principali crawler IA da loro esaminati eseguiva JavaScript. È un’istantanea del 2024 e da allora non è stata riconfermata. Per le anteprime dei link la regola sicura segue dalla stessa logica: se i tuoi tag compaiono solo dopo l’esecuzione di uno script, un crawler che non esegue script non li vede mai. SEOgrinder segnala queste pagine come «La pagina viene costruita solo nel browser», con l’avviso che molti crawler IA non eseguono JavaScript e vedono una pagina quasi vuota.

Puoi verificarlo in dieci secondi:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

Se i tag tornano indietro, sono nell’HTML così com’è consegnato. Se non torna nulla, ma i tag compaiono negli strumenti per sviluppatori del browser, uno script li aggiunge troppo tardi. Per lo stesso test puoi usare «Visualizza sorgente pagina» nel browser: mostra l’HTML consegnato, non la pagina viva che mostrano gli strumenti per sviluppatori. La soluzione è fare il rendering sul server o generare le pagine in anticipo, in modo che titolo, testo e tag siano già nella prima risposta.

Come testare l’anteprima del link

Lo Sharing Debugger di Facebook mostra quali tag ha letto il crawler ed eventuali errori. Richiede un login a Facebook. Secondo la documentazione di Facebook sulle immagini, inserire un URL nel debugger ne richiama in anticipo anche i metadati, cosa che conta per via della cache:

Facebook mette in cache ogni immagine in base al suo indirizzo. Se sostituisci un’immagine, usa un nuovo URL per la nuova, altrimenti resta quella vecchia.
Non cancellare la vecchia immagine, perché i post esistenti potrebbero ancora puntare a essa.
Cambiare l’immagine di un URL non aggiorna l’anteprima delle vecchie condivisioni. Quelle vanno aggiornate.
Il crawler deve vedere un’immagine almeno una volta prima di poterla mostrare. Senza richiamo anticipato, la prima persona che condivide un link potrebbe non vedere l’immagine.

Prima di pubblicare, passa in rassegna questa lista:

Richiama la pagina con curl e conferma che i cinque tag siano nella prima risposta.
Apri da solo l’indirizzo dell’immagine. Deve caricarsi senza login, con stato 200.
Controlla le dimensioni: almeno 1200 × 630 pixel, sotto gli 8 MB.
Controlla la pagina nello Sharing Debugger e leggi errori e avvisi.
Ripeti per una pagina di ogni tipo: la home page, un articolo, un prodotto.

Come SEOgrinder controlla i tag Open Graph

Inserisci in SEOgrinder l’indirizzo di una pagina pubblica e il report include un’anteprima social, che mostra l’aspetto della pagina quando viene condivisa. Lo strumento legge i tuoi tag, carica l’immagine e riporta ciò che trova. Non richiede un account e non costa nulla. Questi sono i rilievi che qui contano:

Anteprima di condivisione incompleta elenca quali tra immagine, titolo e descrizione mancano.
L’immagine di anteprima non si carica compare quando l’immagine risponde con uno stato di errore. Il rilievo indica quello stato e rimanda alle cause consuete: un indirizzo sbagliato, un login davanti al file o un blocco nel robots.txt. Secondo il rilievo, i link compaiono allora senza immagine su LinkedIn, WhatsApp e X.
L’immagine di anteprima è molto piccola compare sotto i 600 × 315 pixel (Facebook mostra allora solo una piccola miniatura) e segnala a parte le immagini sotto il minimo di 200 × 200.
La pagina viene costruita solo nel browser è il rilievo per le pagine che costruiscono la propria interfaccia nel browser.

SEOgrinder non può mostrarti come ogni rete disegna la scheda. Controlla i tag e il file, cioè la parte che puoi controllare tu. Per l’aspetto finale usa il debugger.

Errori comuni

Un percorso relativo per l’immagine. Usa l’indirizzo completo con https://.
Un’immagine che non si può richiamare. Un login, una regola del firewall o una riga del robots.txt sulla cartella delle immagini lascia l’anteprima senza immagine.
Un’immagine troppo piccola. Sotto i 600 × 315 pixel viene mostrata piccola; sotto i 200 × 200 potrebbe non comparire affatto.
Nessuna descrizione. og:description è facoltativo nel protocollo, ma senza di esso la piattaforma tira a indovinare.
Gli stessi tag su ogni pagina. Allora ogni articolo condiviso assomiglia alla home page, e og:url non identifica più niente.
Sostituire l’immagine mantenendo lo stesso indirizzo. Facebook mette in cache in base all’URL, quindi pubblica il nuovo file con un nuovo nome.
Tag che esistono solo dopo l’esecuzione di JavaScript. Mettili nell’HTML consegnato.
Virgolette senza escape nei valori. Chiudono l’attributo e tagliano il tag.
Un indirizzo di tracciamento in og:url. Il tag dovrebbe contenere l’indirizzo canonico.

Domande frequenti

I tag Open Graph sono un fattore di posizionamento?

Non ci sono prove che lo siano. Open Graph determina l’aspetto di un link condiviso sui social network e nei messenger. Nelle fonti usate qui non c’è nulla che lo colleghi al posizionamento.

Che dimensione deve avere og:image?

1200 × 630 pixel, con un rapporto d’aspetto vicino a 1,91 : 1 e sotto gli 8 MB. È in linea con la raccomandazione di Facebook ed è la dimensione dell’immagine di anteprima sulle pagine del blog di SEOgrinder.

Mi serve og:description?

Il protocollo lo elenca come facoltativo e generalmente consigliato. Senza di esso la piattaforma deve indovinare una descrizione dalla tua pagina, quindi scrivine una.

Perché vedo ancora la mia vecchia immagine?

Facebook mette in cache le immagini in base all’indirizzo. Pubblica la nuova immagine con un nuovo URL, poi controlla la pagina nello Sharing Debugger. Le vecchie condivisioni non vengono aggiornate automaticamente.

E twitter:card?

Quel tag non fa parte del protocollo Open Graph. Il suggerimento di correzione di SEOgrinder per un’anteprima incompleta consiglia anche di impostare twitter:card su summary_large_image. Questo articolo non tratta le regole di X, quindi verificale nella documentazione di X.

Un agente di coding può aggiungere i tag al posto mio?

Può fare la parte meccanica: scrivere i tag nei tuoi template e controllarli con curl. Nel report, Passa all’IA produce i rilievi come ordine di lavoro in Markdown, con una condizione obiettivo verificabile per ogni attività. Scegliere l’immagine e le parole resta compito tuo.

Il prossimo passo

Avvia l’analisi gratuita della tua home page e guarda l’anteprima social e i rilievi elencati qui sopra. Correggili in ordine, pubblica una nuova immagine con un nuovo indirizzo se devi sostituirne una e controlla la pagina nello Sharing Debugger. Poi analizza di nuovo per confermare che l’anteprima sia completa.