Open graph

Open graph in sintesi: cosa controllare prima di pubblicare

• Cos’è: un protocollo nato nel 2010 che usa meta tag con prefisso og: per controllare l’anteprima di un link sui social.
• Tag essenziali: og:title, og:type, og:url e og:image sono i quattro obbligatori citati in ogni documentazione.
• Immagine consigliata: 1200×630 pixel, rapporto 1,91:1, peso sotto i 5 MB (idealmente sotto 1 MB).
• Come si verifica: con i debugger ufficiali delle piattaforme, che mostrano anche la cache salvata dell’anteprima.
• Da non confondere con: le Twitter Card, che hanno un prefisso diverso, e i dati strutturati in JSON-LD, che parlano ai motori di ricerca e non ai social.

Che cos’è Open Graph

Open Graph nasce nel 2010 come protocollo aperto proposto da Facebook per trasformare qualunque pagina web in un oggetto leggibile dai social network, cioè un nodo dentro il social graph, la rete di relazioni che una piattaforma costruisce tra persone, pagine e contenuti condivisi. Negli anni il protocollo è stato adottato anche da LinkedIn, X, WhatsApp, Discord, Slack e dalle app di messaggistica che generano un’anteprima quando incolli un link: uno standard nato per un solo social è diventato il formato comune delle anteprime su gran parte delle piattaforme.

Il meccanismo è semplice: quando qualcuno incolla l’URL della tua pagina, il bot della piattaforma scansiona l’head del documento HTML cercando i meta tag con prefisso og:. Se li trova, costruisce la scheda con i dati che hai scelto tu; se non li trova, prova a indovinare leggendo il title SEO, la prima immagine della pagina o un H1 scritto per tutt’altro scopo, con risultati spesso incoerenti. Per chi gestisce un sito, il punto pratico è questo: senza Open Graph l’anteprima di un link condiviso è una lotteria, con i tag impostati decidi tu che cosa vede chi riceve quel link, prima ancora che clicchi.

I quattro tag Open Graph da inserire sempre

Open Graph richiede quattro proprietà di base: senza queste quattro, molte piattaforme considerano l’implementazione incompleta e tornano all’estrazione automatica dei dati.

og:title

Il titolo che vuoi mostrare nella scheda di anteprima: non deve coincidere per forza con il title SEO della pagina, perché risponde a un lettore che sta scorrendo un feed, non a un motore di ricerca.

og:type

Il tipo di oggetto che stai condividendo: website per una pagina generica, article per un contenuto editoriale, oppure tipi più specifici come video.movie o profile, ciascuno con proprietà aggiuntive proprie.

og:url

L’indirizzo permanente della pagina, che funge da identificativo univoco dell’oggetto per la piattaforma: è il valore che il social associa ai like, ai commenti e alle condivisioni accumulate su quel link.

og:image

L’URL dell’immagine di anteprima: è il tag con il maggiore impatto sul clic, perché è il primo elemento che l’occhio incontra scorrendo un post.

Nella pratica, quando preparo un template per un cliente, parto sempre da questi quattro e aggiungo gli altri solo se risolvono un problema reale, non perché una lista li elenca tutti.

Tag opzionali e avanzati

Open Graph mette a disposizione tag opzionali che rifiniscono l’anteprima oltre ai quattro essenziali. og:description è il testo riassuntivo che compare sotto il titolo nella scheda: in un sito specializzato di settore ho letto un consiglio operativo di restare intorno alle 200 battute, abbastanza per incuriosire senza essere tagliato dalla piattaforma. og:site_name indica il nome del sito nel suo complesso, utile quando l’indirizzo da solo non è riconoscibile. og:locale specifica lingua e paese, nella forma it_IT o en_US, e serve soprattutto sui siti multilingua per evitare che la piattaforma mostri la versione sbagliata della scheda.

Esistono poi tag più tecnici legati a un tipo specifico di contenuto: per un articolo si trova spesso article:published_time, per un’immagine og:image:alt e le dimensioni in pixel. Sono utili quando l’oggetto condiviso non è una semplice pagina ma un contenuto con una data di pubblicazione o un autore da segnalare.

Come si inseriscono i tag Open Graph

Open Graph va inserito manualmente o tramite plugin dentro l’elemento <head> della pagina HTML, prima della chiusura del tag.

1. Apri il template dell’head del tuo sito, o la sezione dedicata se usi un CMS con editor SEO integrato.
2. Inserisci i quattro tag essenziali con i valori specifici di quella pagina, non valori fissi copiati dall’homepage.
3. Aggiungi i tag opzionali che ti servono davvero: descrizione, nome del sito, lingua.
4. Pubblica la pagina e verifica subito l’anteprima con uno strumento di debug, prima di condividerla in massa.

Su WordPress trovi questa funzione quasi sempre integrata nei plugin SEO più diffusi, che generano i tag a partire dai campi title, immagine in evidenza e meta description, lasciandoti comunque la possibilità di sovrascriverli pagina per pagina. Su altri CMS, come Joomla o un ecommerce proprietario, la stessa funzione esiste come estensione a parte: nella mia pratica controllo sempre che il plugin non duplichi i tag already presenti nel tema, perché i duplicati confondono il parser della piattaforma più di un tag mancante.

Che dimensioni deve avere l’immagine og:image

Open Graph funziona meglio con un’immagine di 1200×630 pixel, rapporto 1,91:1: è la misura che la maggior parte delle piattaforme usa come riferimento per non ritagliare né sgranare l’anteprima. Sotto i 600×315 pixel l’immagine rischia di apparire sgranata su schermi ad alta densità, quindi conviene trattarla come soglia minima e non come obiettivo.

Sul peso del file le indicazioni che ho trovato nelle guide di settore concordano su un tetto di 5 MB, ma consigliano di restare molto più leggeri per i tempi di caricamento dell’anteprima: sotto 1 MB in generale, sotto 500 KB se il canale principale di condivisione è WhatsApp. Il formato JPG va bene per le fotografie, il PNG per grafiche con testo o loghi, dove serve nitidezza sui bordi. Un dettaglio che vedo trascurato spesso: tenere testo e logo nella zona centrale dell’immagine, perché alcune piattaforme ritagliano gli angoli in modi diversi tra loro.

Come si testano i tag Open Graph

Open Graph si verifica con gli strumenti di debug ufficiali delle piattaforme, non guardando semplicemente il codice sorgente: un tag scritto correttamente può comunque non comparire se il crawler ha già salvato una versione precedente della pagina. Il Facebook Sharing Debugger e il LinkedIn Post Inspector mostrano quali tag la piattaforma ha effettivamente letto, l’anteprima così come apparirà nel feed e offrono il pulsante per forzare un nuovo recupero della pagina, svuotando la cache salvata in precedenza.

Questo passaggio è quasi sempre il motivo per cui un’anteprima “non si aggiorna” dopo una modifica: la cache della piattaforma tiene la versione vecchia finché non la forzi a rileggere. La mia regola, quando aggiorno i tag di una pagina già condivisa in passato, è passare sempre dal debugger prima di avvisare il cliente che “ora è a posto”: altrimenti il primo controllo che fa lui mostra ancora l’anteprima sbagliata, e la colpa finisce sul lavoro appena fatto invece che sulla cache.

Open graph o Twitter Card: quale impostare

Open Graph e le Twitter Card rispondono alla stessa esigenza con due prefissi di tag diversi, e X (ex Twitter) legge entrambi in modo complementare.

Nella pratica, se gestisci un sito aziendale non hai bisogno di duplicare tutto: imposti bene i tag Open Graph e aggiungi solo twitter:card con il valore summary_large_image per avere un’anteprima a tutta larghezza anche su X, senza riscrivere titolo e descrizione una seconda volta.

Open graph e dati strutturati non sono la stessa cosa

Open Graph parla ai bot dei social network per costruire l’anteprima di un link condiviso; i esempi pratici di dati strutturati in JSON-LD parlano invece ai motori di ricerca, per ottenere un risultato arricchito nella pagina dei risultati. In un confronto tecnico che ho letto in una guida di settore questa distinzione viene segnalata proprio per evitare l’errore più comune: pensare che inserendo uno dei due formati si copra anche l’altro bisogno. Un sito può e dovrebbe avere entrambi, ma rispondono a due pubblici diversi: chi clicca un link su un social e chi legge un risultato su Google.

Chi lavora anche sul lato motori di ricerca, oltre che sui social, trova il resto del lavoro sui tag nella pagina sull’ottimizzazione dei meta tag, dove title e meta description restano separati da og:title e og:description.

Errori frequenti e casi limite

Se og:url è diverso dall’url canonico

Il valore di og:url funge da identificativo permanente dell’oggetto per la piattaforma: se metti un indirizzo diverso da quello canonico della pagina, è quello il link a cui la piattaforma assocerà like e condivisioni accumulate, non il canonico usato da Google. Per evitare di sdoppiare quei dati su due URL, la mia regola è far coincidere sempre i due valori, salvo un motivo specifico da documentare.

Se il sito è costruito in JavaScript o è una SPA

Nel mio lavoro su siti con rendering lato client, la prima cosa che controllo è se i tag Open Graph escono già nell’HTML restituito dal server, prima che il browser esegua lo script: molti bot dei social non eseguono JavaScript e leggono solo quello che arriva nella risposta iniziale. Se i tag compaiono solo dopo il rendering, la soluzione pratica è spostarne la generazione lato server o usare il pre-rendering per quelle pagine.

Un’ultima precisazione che vale la pena di separare dal resto: Open Graph non risulta tra i fattori di posizionamento diretti e documentati nei risultati di Google, la sua funzione è il clic su chi riceve il link condiviso sui social, non la classifica organica. Chi lavora sul posizionamento trova gli strumenti giusti nella pagina sulla SEO.

Domande frequenti su open graph

Che cos’è Open Graph?

Open Graph è il protocollo di meta tag che indica ai social network titolo, immagine e descrizione da mostrare quando un link viene condiviso, al posto dell’estrazione automatica che la piattaforma farebbe altrimenti.

Quali sono i tag Open Graph obbligatori?

I quattro tag essenziali sono og:title, og:type, og:url e og:image: senza di loro la piattaforma ricostruisce l’anteprima da sola, con risultati meno affidabili.

Che dimensioni deve avere l’immagine og:image?

1200×630 pixel, rapporto 1,91:1, è la misura di riferimento: formato JPG per le fotografie, PNG per grafiche con testo, peso sotto 1 MB per un caricamento rapido dell’anteprima.

Perché dopo aver aggiornato i tag appare ancora la vecchia anteprima?

Perché la piattaforma ha salvato in cache la versione precedente della pagina: va forzato un nuovo recupero con il debugger ufficiale, non basta modificare il codice sorgente.

Qual è la differenza tra Open Graph e Twitter Card?

Open Graph usa il prefisso og: e lo leggono quasi tutte le piattaforme; le Twitter Card usano il prefisso twitter: e X le preferisce, usando comunque i tag Open Graph come ripiego se mancano.

L’og:url deve coincidere con l’url canonico della pagina?

Conviene farli coincidere, perché og:url diventa l’identificativo permanente dell’oggetto per il social: un valore diverso dal canonico sposta su un altro indirizzo i like e le condivisioni accumulate.

Open Graph serve anche per il posizionamento su Google?

No, non è un fattore di ranking diretto e documentato: la sua funzione è migliorare il clic su chi riceve il link condiviso sui social, non il posizionamento organico nei risultati di ricerca.