Open Graph
Open Graph è il protocollo con cui una pagina Web si descrive ai servizi che mostrano l'anteprima dei link: quando un URL viene incollato in Facebook, LinkedIn, WhatsApp, Telegram, Slack, Mastodon, Discord o iMessage, il servizio scarica la pagina, ne legge i tag Open Graph e costruisce una scheda con un titolo, una breve descrizione e un'immagine. Una pagina che ne è priva appare come un link nudo o con un titolo indovinato, spesso con un segnaposto al posto dell'immagine.
È stato introdotto da Facebook nel 2010 ed è specificato su ogp.me. Il nome viene dal social graph di Facebook: il protocollo doveva trasformare qualunque pagina Web in un oggetto di quel grafo.
Come funziona
I tag sono elementi <meta> nello <head> della pagina, scritti con l'attributo RDFa property anziché name:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.org/paper" />
<meta property="og:image" content="https://example.org/paper-card.jpg" />
La specifica richiede quattro proprietà — titolo, tipo, URL e immagine — e ne definisce diverse facoltative. Le proprietà possono essere strutturate con un ulteriore due punti, così l'immagine può portare dimensioni, tipo e testo alternativo.
| tag | significato |
|---|---|
| og:title | il titolo dell'oggetto, senza il nome del sito |
| og:type | il tipo di oggetto: website, article, book, profile, video.movie, music.song, … |
| og:url | l'URL canonico: l'identità dell'oggetto, sotto cui si contano condivisioni e like |
| og:image | l'URL assoluto dell'immagine mostrata nella scheda |
| og:description | una o due frasi di sintesi |
| og:site_name | il nome del sito a cui l'oggetto appartiene |
| og:locale | lingua e territorio del contenuto, come en_GB o it_IT |
| og:image:width, og:image:height | le dimensioni dell'immagine in pixel, così la scheda può essere impaginata prima di scaricarla |
| og:image:alt | una descrizione testuale dell'immagine, per l'accessibilità |
Ogni tipo può aggiungere un proprio vocabolario: un article può dichiarare article:published_time, article:author e article:tag; un book book:isbn, book:author e book:release_date; un profile profile:first_name e profile:last_name.
Twitter Card
X (già Twitter) definisce un vocabolario parallelo, le Twitter Card, scritto con name e il prefisso twitter:. Solo twitter:card non ha un equivalente Open Graph: sceglie l'impaginazione, summary (immagine piccola e quadrata accanto al testo) o summary_large_image (immagine larga sopra il testo). Per titolo, descrizione e immagine X ricade sui tag Open Graph, così una pagina di solito aggiunge solo quel tag.
Che cosa fanno i consumatori
- Scaricano in anonimo. I crawler (facebookexternalhit, LinkedInBot, WhatsApp, Slackbot, …) non sono mai autenticati, quindi sia la pagina sia la sua immagine devono essere leggibili senza login. Un'immagine dietro login è la causa più comune di una scheda senza immagine.
- Non eseguono JavaScript. I tag devono essere nell'HTML così come viene servito, non aggiunti da uno script.
- Tengono in cache. Una scheda viene costruita una volta e riusata, spesso per giorni. Cambiare i tag non cambia una scheda già costruita: le reti offrono dei debugger che forzano un nuovo scaricamento — il Sharing Debugger di Facebook e il Post Inspector di LinkedIn.
- Ritagliano le immagini in modo diverso. Facebook e LinkedIn preferiscono un'immagine orizzontale 1,91:1 (1200×630 px), WhatsApp e la scheda summary una quadrata. Nessuna immagine va bene per ogni rete; un'immagine le cui proporzioni sono dichiarate nei tag viene impaginata in modo più affidabile.
- Leggono solo i formati comuni. JPEG, PNG e GIF sono sicuri; SVG e TIFF sono in genere ignorati.
Vocabolari affini
Open Graph riguarda la presentazione: dice come deve apparire una pagina quando viene condivisa, non che cos'è l'oggetto dal punto di vista bibliografico. Altri vocabolari, spesso presenti nello stesso <head>, servono altri lettori:
| vocabolario | letto da | scopo |
|---|---|---|
| citation_* (Highwire Press) | Google Scholar, Zotero, Mendeley | descrizione bibliografica di un'opera scientifica: autori, sede, volume, pagine, DOI, PDF |
| Dublin Core (DC.*) | repository, harvester bibliotecari | metadati descrittivi generici |
| schema.org (JSON-LD) | motori di ricerca | dati strutturati su persone, organizzazioni, eventi, opere |
| Twitter Cards (twitter:*) | X | impaginazione della scheda, con ricaduta su Open Graph |
Non si sostituiscono l'uno all'altro: un social network ignora citation_*, e Google Scholar ignora og:*.
Vedi anche
- The Open Graph protocol
- X: Cards markup
- Open Graph in APICe (utenti autenticati)