Meta tag Open Graph: la guida completa alle anteprime dei link social
I meta tag Open Graph sono tag <meta property="og:…"> che inserisci nell’<head> di una pagina HTML. Controllano il titolo, la descrizione e l’immagine che compaiono quando qualcuno condivide il tuo link su Facebook, LinkedIn, Slack, Discord, WhatsApp e la maggior parte delle altre piattaforme. Li definisci una volta sola e quasi ogni rete mostra un’anteprima ricca al posto di un URL nudo. X (Twitter) legge i propri tag Twitter Card ma ripiega sui tuoi tag Open Graph quando manca quello corrispondente, così un unico set di tag ben costruito copre quasi ovunque possa arrivare un link.
Quell’unico protocollo fa la differenza tra un link che mostra un titolo, un riassunto e una nitida immagine 1200×630 e un indirizzo spoglio su cui nessuno clicca.
Questa guida copre l’intero set di meta tag per la condivisione social: i quattro tag Open Graph obbligatori, le regole di dimensionamento di og:image, il fallback alle Twitter Card, come ogni piattaforma mostra e mette in cache le anteprime, gli errori che lasciano le condivisioni vuote e come fare il debug del risultato dopo il deploy.
Cosa sono i meta tag Open Graph?
Open Graph è un protocollo aperto, creato in origine da Facebook e documentato su ogp.me, che permette a qualsiasi pagina web di descriversi come un oggetto ricco. Invece di indovinare di cosa parla il tuo link, una piattaforma legge una manciata di tag e li trasforma in una scheda di anteprima.
La sintassi è un semplice meta tag HTML con un attributo property e un valore content, collocato all’interno dell’<head> del documento:
<meta property="og:title" content="How Open Graph Tags Work">Nota l’attributo property. I classici meta tag HTML per la SEO (la meta description, robots, viewport) usano name. Open Graph usa property, mentre le Twitter Card tornano a name. Azzeccare quell’attributo conta: un crawler che si aspetta property="og:title" non leggerà name="og:title".
Quasi ogni piattaforma che trasforma un link in una scheda legge Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest e Telegram lo parlano tutti. X è l’eccezione degna di nota. Preferisce i propri tag twitter:* ma ripiega sui tuoi tag og:* per tutto ciò che non trova, ed è per questo che raramente serve duplicarli.
Open Graph affianca i classici meta tag SEO invece di sostituirli. Il <title> e il link canonico guidano ancora la ricerca; la meta description modella ancora il tuo snippet nei risultati. I tag Open Graph non toccano il ranking: governano la scheda social. Un <head> completo di solito porta con sé tutte e tre le famiglie insieme.
Scriverli a mano è ripetitivo e facile da sbagliare in modo sottile. Il Generatore di Meta Tag costruisce l’intero blocco da un breve modulo, ne mostra l’anteprima in tempo reale e mantiene coerenti i dettagli insidiosi (nomi degli attributi, URL assoluti, dimensioni dell’immagine) così non devi ricordarteli.
I tag Open Graph fondamentali che ti servono davvero
Open Graph definisce decine di proprietà, ma una buona condivisione ne richiede solo una manciata. Parti dai quattro obbligatori, aggiungi una descrizione e per la maggior parte delle pagine fermati lì.
I quattro tag obbligatori: og:title, og:type, og:image, og:url
Quattro tag sono obbligatori secondo il protocollo. Ne salti uno e le piattaforme o eliminano la scheda o la riempiono con una supposizione approssimativa.
<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">og:title è il titolo in grassetto sulla scheda. og:type classifica l’oggetto (ne parliamo più avanti). og:image è l’immagine di anteprima e deve essere un URL HTTPS assoluto. og:url è l’indirizzo canonico della pagina, che le piattaforme usano per deduplicare le condivisioni e aggregare l’engagement.
og:description e come si distingue dalla meta description SEO
og:description è il breve riassunto stampato sotto il titolo su una scheda di condivisione:
<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">È un tag diverso dalla <meta name="description"> SEO e si rivolge a un lettore diverso. La meta description compete per i clic in una pagina di risultati Google e si misura su circa 155 caratteri. La descrizione Open Graph viene letta su una scheda social, dove lo spazio è più stretto e la prima frase porta tutto il peso. Se ometti og:description, la maggior parte delle piattaforme ripiega sulla tua meta description, quindi spesso puoi saltarla. Scrivine una dedicata solo quando il gancio social deve differire dallo snippet di ricerca.
og:type e cosa sblocca
og:type indica alle piattaforme che tipo di cosa è la tua pagina. I valori comuni sono website, article, product e profile. Una homepage o una landing page è un website; un articolo di blog è un article.
Scegliere article sblocca proprietà e funzionalità aggiuntive che il tipo website semplice non può usare:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">Quei tag article:* alimentano le schede con date di pubblicazione e firme e qualificano la pagina per i Rich Pin di Pinterest, che estraggono i dati strutturati direttamente dal tuo markup Open Graph. Imposta og:type su article per i post e su website per tutto il resto, e i campi corrispondenti seguono a ruota.
Ecco un riferimento per i tag che la maggior parte delle pagine usa davvero:
| Tag | Cosa controlla | Valore di esempio |
|---|---|---|
og:title | Titolo mostrato sulla scheda | How Open Graph Tags Work |
og:type | Tipo di oggetto: website, article, product, profile | article |
og:image | Immagine di anteprima (URL HTTPS assoluto) | https://example.com/og/cover.png |
og:url | URL canonico della pagina | https://example.com/open-graph-guide |
og:description | Riassunto sotto il titolo | A practical guide to social meta tags. |
og:site_name | Nome complessivo del sito | Example |
og:locale | Lingua e regione del contenuto | en_US |
og:image — dimensioni, proporzioni e le regole che rompono le condivisioni
L’immagine è la parte di un’anteprima che le persone vedono per prima, ed è il punto in cui la maggior parte delle condivisioni va in pezzi. Azzecca dimensione e formato di og:image e un solo file funziona ovunque.
Lo standard universale 1200×630 (1.91:1)
La dimensione consigliata per og:image è 1200×630 pixel, con proporzioni 1.91:1. Quella singola immagine viene resa correttamente su Facebook, LinkedIn, Slack, Discord e sulla scheda summary_large_image di X, quindi non ti serve un file diverso per ogni piattaforma.
Contano anche le soglie minime di dimensione. Facebook ignora qualsiasi immagine più piccola di 200×200 e mostra una miniatura quadrata e compressa per tutto ciò che sta sotto i 600×315. Sotto i 1200 pixel di larghezza, le schede grandi iniziano a sembrare sfocate. Punta a 1200×630 e superi ogni soglia in un colpo solo.
Perché og:image:width e og:image:height contano
Quando una piattaforma incontra il tuo link per la prima volta, non ha ancora scaricato l’immagine: la recupera in modo asincrono. Se dichiari le dimensioni in anticipo, la piattaforma può riservare lo spazio giusto e comporre subito la scheda:
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">Salta questi tag e la primissima condivisione di una pagina può risultare vuota mentre il crawler si mette in pari. Aggiungili e la scheda è corretta al primo incolla. Il tag og:image:alt descrive l’immagine per gli screen reader sulle piattaforme che lo supportano.
Formato e dimensione del file
Usa JPG o PNG. Entrambi si decodificano in modo affidabile su ogni crawler, ed è tutto il senso di un og:image: deve essere resa su server che non controlli. Come regola pratica mantieni il file sotto 1 MB, e sotto 300 KB per WhatsApp, che è più severo degli altri. Se il tuo export è più pesante, passalo nel compressore immagini per portarlo sotto 1 MB senza intaccare visibilmente la qualità.
Viene voglia di puntare su un formato moderno qui, ma questo è l’unico punto in cui resistere. I formati più recenti risparmiano byte per i browser, eppure alcuni crawler social li decodificano in modo incoerente, così un og:image in WebP o AVIF può tornare vuota su una piattaforma che non riesce a leggerla. I compromessi sono trattati nella guida WebP vs AVIF vs JPEG; per le immagini di condivisione, nello specifico, resta su JPG o PNG. Poiché le piattaforme ritagliano i bordi in modo diverso, tieni il logo e il titolo dentro una safe zone 1080×600 centrata così nulla di importante viene tagliato.
La regola dell’URL HTTPS assoluto
og:image e og:url devono essere URL https://… completi, non percorsi relativi. Un percorso come /cover.png si risolve senza problemi nel tuo editor e sulla pagina in produzione, ma un crawler che recupera il tuo URL non ha una base rispetto a cui risolverlo, quindi la condivisione torna vuota. L’immagine deve anche essere raggiungibile pubblicamente: se robots.txt blocca il crawler o il file è protetto da autenticazione, l’anteprima resta vuota.
Un ultimo vincolo decide tutto quanto sopra: i crawler non eseguono JavaScript. Facebook, LinkedIn, WhatsApp, Telegram e Discord recuperano il tuo HTML grezzo e leggono ciò che c’è. I tag iniettati lato client da un framework dopo il caricamento della pagina sono invisibili per loro, quindi i tuoi tag Open Graph devono vivere in HTML statico o renderizzato lato server.
Twitter/X Card: un tag, poi fallback su Open Graph
X usa i propri meta tag Twitter Card, ma la sovrapposizione con Open Graph fa sì che tu scriva molto meno di quanto ti aspetteresti. In pratica aggiungi un tag e lasci che il resto ripieghi sui fallback.
twitter:card è l’unico tag Twitter obbligatorio
X non mostra alcuna scheda se twitter:card non è presente, anche quando hai un set completo di tag Open Graph. È l’unico tag Twitter Card obbligatorio:
<meta name="twitter:card" content="summary_large_image">Il valore sceglie il layout. summary_large_image produce la grande scheda a banner pensata per un’immagine 1200×630. summary produce una scheda compatta con una piccola miniatura quadrata accanto al testo:
<meta name="twitter:card" content="summary">Nota l’attributo name. I tag Twitter Card usano name, non il property usato da Open Graph.
Come X ripiega su og:* per titolo, descrizione e immagine
Per titolo, descrizione e immagine, X legge i tuoi og:title, og:description e og:image quando il tag twitter:* corrispondente è assente. Ecco perché raramente scrivi twitter:title o twitter:image. Imposta twitter:card, mantieni puliti i tuoi tag Open Graph e X assembla la scheda a partire da loro.
La trappola del twitter:image vuoto
Il fallback ha un lato tagliente: un tag vuoto conta come presente. Se emetti twitter:image con un valore vuoto, X usa quel valore vuoto invece di ripiegare su og:image, e la tua scheda perde l’immagine.
<!-- Wrong: blocks the fallback and leaves the card imageless -->
<meta name="twitter:image" content="">
<!-- Right: omit the tag entirely and X reads og:image -->La regola è semplice: non emettere mai un tag social vuoto. Omettilo quando non hai un valore.
Specificità di Slack e Discord
Slack legge prima la Twitter Card, poi Open Graph, e può far emergere due campi aggiuntivi tramite twitter:label e twitter:data:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">Compaiono come piccoli dettagli etichettati sotto un’anteprima espansa di Slack. Discord legge Open Graph e aggiunge un tocco che nessun altro usa: colora la barra d’accento a sinistra dell’embed con il theme-color della tua pagina.
<meta name="theme-color" content="#5865F2">Come vengono rese le anteprime dei link su ogni piattaforma
Gli stessi tag producono anteprime dei link social diverse a seconda di chi le legge. Ogni piattaforma sceglie il proprio sottoinsieme di tag, mette in cache per la propria finestra temporale e aggiunge una stranezza o due. Questa tabella è il riferimento rapido.
| Piattaforma | Tag che legge | Cache | Comportamento notevole |
|---|---|---|---|
| Open Graph | ~30 giorni | Ignora le immagini sotto 200×200; mostra un piccolo quadrato sotto 600×315 | |
| Open Graph | ~7 giorni | Svuota un’anteprima obsoleta con il Post Inspector | |
| X (Twitter) | twitter:card + ripiega su og:* | breve | Nessun twitter:card significa nessuna scheda |
| Slack | Twitter Card, poi Open Graph | per messaggio | Rende twitter:label/twitter:data come campi extra |
| Discord | Open Graph | per messaggio | Usa theme-color per la barra d’accento dell’embed |
og:title + og:image | per messaggio | Vuole i metadati vicino all’inizio; tieni l’immagine sotto 300 KB | |
| Telegram | Open Graph | per messaggio | Rende in modo affidabile solo da JPEG o PNG |
| Open Graph o Schema.org | — | I Rich Pin per gli articoli richiedono og:type=article |
La colonna della cache spiega una sorpresa comune: correggi i tag, ricondividi e Facebook mostra ancora il vecchio titolo per settimane. Facebook conserva i dati Open Graph per circa 30 giorni e LinkedIn per circa 7, quindi una modifica non comparirà finché la cache non scade o non forzi un aggiornamento. I debugger qui sotto fanno esattamente questo.
Errori comuni con Open Graph (e come individuarli)
La maggior parte delle anteprime rotte si riconduce a un breve elenco di errori. Ognuno sembra a posto in locale e fallisce solo quando un crawler recupera la pagina in produzione.
Percorso og:image relativo
Un percorso relativo viene reso nel tuo browser e si rompe quando lo condividi, perché il crawler non ha un URL di base rispetto a cui risolverlo.
<!-- Blank when shared -->
<meta property="og:image" content="/cover.png">
<!-- Renders everywhere -->
<meta property="og:image" content="https://example.com/cover.png">og:url mancante o canonico che non concorda
Senza og:url, i conteggi delle condivisioni e l’engagement si disperdono tra le varianti dell’URL (con e senza www, con parametri di tracciamento, con uno slash finale). Fai puntare sia il tuo link canonico sia og:url allo stesso identico URL così i segnali restano uniti.
Immagine troppo piccola o proporzioni sbagliate
Un’immagine sotto 200×200 viene ignorata del tutto, e una lontana da 1.91:1 viene ritagliata in modi che non avevi previsto. Pubblica 1200×630 e l’inquadratura è prevedibile su ogni piattaforma.
Dimenticare twitter:card
Un set completo di tag Open Graph non produce comunque alcuna scheda su X senza twitter:card. È il motivo più comune per cui un link appare benissimo su LinkedIn e non mostra nulla su X.
Tag renderizzati lato client che un crawler non può vedere
Se una single-page app inietta i tag Open Graph dopo il caricamento, i crawler che non eseguono JavaScript non li vedono mai. Renderizza i tag lato server o pre-renderizza l’HTML.
charset collocato dopo i primi 1024 byte
La dichiarazione <meta charset="utf-8"> deve comparire entro i primi 1024 byte del documento, altrimenti il browser la ignora e può storpiare i caratteri non-ASCII nel titolo e nella descrizione. Mettila per prima dentro l’<head>:
<head>
<meta charset="utf-8">
<!-- everything else follows -->
</head>Come testare e fare il debug dei tuoi tag Open Graph
Non fidarti mai di un’anteprima che non hai verificato su un URL live. Tre strumenti coprono le piattaforme che contano, e tutti possono forzare un aggiornamento della cache.
Facebook Sharing Debugger
Il Facebook Sharing Debugger recupera il tuo URL live, mostra esattamente cosa ha interpretato Facebook ed elenca tutti i tag mancanti o malformati. Il suo pulsante più utile è “Scrape Again”, che aggiorna su richiesta la cache di ~30 giorni di Facebook: il modo più veloce per far comparire una correzione senza aspettare un mese.
LinkedIn Post Inspector
Il LinkedIn Post Inspector fa lo stesso lavoro per LinkedIn. Incolla un URL e ricarica la pagina svuotando la cache di ~7 giorni di LinkedIn, così un titolo o un’immagine aggiornati compaiono alla tua prossima condivisione invece che giorni dopo.
La validazione delle card X è passata nel developer portal
X ha ritirato il suo Card Validator autonomo. Dal 2026 la validazione delle card vive dentro il developer portal di X anziché a un URL pubblico, quindi la maggior parte dei team verifica le card X in un altro modo: poiché X ripiega su og:*, i debugger di Facebook e LinkedIn confermano già i tag che X leggerà, e uno strumento di anteprima di terze parti colma la lacuna per il layout twitter:card in sé.
Anteprima prima di fare il deploy
I debugger possono ispezionare solo un URL già live, un pessimo momento per scoprire un’immagine vuota. Vedi l’anteprima della scheda mentre stai ancora modificando. Il Generatore di Meta Tag rende le anteprime di Google, Facebook, X, LinkedIn, Slack e Discord dai valori che digiti, legge nel browser le dimensioni reali della tua og:image per intercettare una proporzione sbagliata e può importare un <head> esistente così puoi diagnosticare una condivisione rotta prima che vada in produzione.
Checklist rapida
Ecco il minimo che ogni pagina dovrebbe portare con sé. Copialo, sostituisci i tuoi valori e hai un’anteprima che viene resa ovunque:
<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">
<meta name="twitter:card" content="summary_large_image">Passa in rassegna gli elementi essenziali prima di pubblicare: un og:image HTTPS assoluto a 1200×630, og:url che coincide con il tuo canonico, twitter:card presente e i tag renderizzati lato server. Se vuoi un giro più completo delle utility che velocizzano tutto questo, la guida agli strumenti per sviluppatori raccoglie il resto. Quando sei pronto a generare e vedere l’anteprima dell’intero blocco in una volta, il Generatore di Meta Tag lo scrive, lo verifica e mostra ogni scheda prima del deploy.
Domande frequenti
Qual è la differenza tra i tag Open Graph e Twitter Card?
Open Graph è un protocollo multipiattaforma letto da Facebook, LinkedIn, Slack e altri; i tag Twitter Card (twitter:*) sono specifici di X. X ripiega sui tuoi tag OG quando manca il tag twitter:* corrispondente, quindi di solito ti servono i tag OG più un singolo valore twitter:card.
I tag Open Graph influenzano il ranking nella ricerca Google?
No. I tag Open Graph e Twitter Card non influenzano il ranking di Google: controllano come appaiono i link quando vengono condivisi, alimentando il traffico social. I classici tag <title> e canonico contano per la SEO; la meta description modella il tuo snippet e il click-through ma non è un fattore di ranking diretto.
Dove vanno i tag Open Graph nell’HTML?
Dentro l’elemento <head>, nell’HTML statico o renderizzato lato server. I crawler di Facebook, LinkedIn, WhatsApp e Telegram non eseguono JavaScript, quindi i tag iniettati lato client non verranno visti. Metti <meta charset> per primo così finisce entro i primi 1024 byte.
Una sola immagine può funzionare per Facebook, X e LinkedIn?
Sì. Una singola immagine 1200×630 (1.91:1) viene resa correttamente su Facebook, LinkedIn, Slack, Discord e sulla scheda summary_large_image di X. Servila via HTTPS a un URL pubblico e dichiara og:image:width/og:image:height così la prima condivisione non è vuota.
Perché la mia anteprima del link non mostra alcuna immagine?
Cause comuni: un percorso og:image relativo invece di un URL HTTPS assoluto, un’immagine sotto 200×200, un twitter:card mancante su X, oppure tag iniettati da JavaScript che il crawler non può eseguire. Dopo aver corretto, riesegui lo scrape con il Facebook Sharing Debugger.
Tutte le pagine hanno bisogno dei propri tag Open Graph?
Idealmente sì: ogni pagina dovrebbe avere un og:title, un og:description, un og:image e un og:url canonico che riflettano quella specifica pagina, così i link condivisi mostrano anteprime pertinenti. Un fallback valido per l’intero sito è meglio di niente, ma i tag per singola pagina conquistano molti più clic social.