Facebook ha pub­bli­ca­to Open Graph nel 2010 per poter mappare ancora meglio i siti esterni sulla propria piat­ta­for­ma. A tal fine gli svi­lup­pa­to­ri del social network hanno svi­lup­pa­to una tecnica in­te­res­san­te: Open Graph, o Open Graph Protocol (OGP), che trasforma i siti web in oggetti fa­ci­li­tan­do agli utenti della piat­ta­for­ma la con­di­vi­sio­ne nella rete di contenuti pro­ve­nien­ti da fonti esterne. Potrebbe essere una soluzione estre­ma­men­te in­te­res­san­te per molti operatori di siti web, con­si­de­ran­do che la maggior parte di loro vuole ac­cre­sce­re la propria vi­si­bi­li­tà online.

Dopo Facebook anche altre piat­ta­for­me social come Twitter, LinkedIn o Xing hanno seguito questa linea, im­ple­men­tan­do Open Graph e facendo del pro­to­col­lo un im­por­tan­te strumento del web design.

Crea il tuo sito web
Scopri le nuovi funzioni IA di MyWebsite
  • Editor facile e intuitivo con supporto IA
  • Immagini e testi d'effetto in pochi secondi
  • Dominio, indirizzo e-mail e cer­ti­fi­ca­to SSL inclusi

Come funziona Open Graph di Facebook?

Quando un utente condivide un sito web sui social media questo deve in qualche modo essere vi­sua­liz­za­to sulla piat­ta­for­ma. L'immagine di anteprima e il testo di ac­com­pa­gna­men­to do­vreb­be­ro ri­spec­chia­re il mood del sito web nel miglior modo possibile e in­co­rag­gia­re altri utenti a visitarlo. I web designer uti­liz­za­no Open Graph per as­si­cu­rar­si che non vengano mostrati contenuti casuali nel­l'an­te­pri­ma del sito web.

Questi esperti possono inserire tag Open Graph nel codice sorgente del sito web e in­fluen­za­re così l'aspetto del­l'an­te­pri­ma sui social network. Ciò rende Open Graph in­te­res­san­te anche per il marketing online. Il pro­to­col­lo offre ai pro­prie­ta­ri dei contenuti un maggiore controllo sulla pre­sen­ta­zio­ne dei contenuti condivisi e ottimizza le in­for­ma­zio­ni da tra­smet­te­re agli utenti.

I tag cor­ri­spon­den­ti sono po­si­zio­na­ti nel­l'in­te­sta­zio­ne del documento HTML sotto forma di meta property:

<meta property="og:title" content="Titolo del sito web che deve apparire su Facebook."/>

Viene, quindi, definito in­nan­zi­tut­to il tipo di tag, per poi as­se­gnar­gli un valore o contenuto.

Fatto

Twitter ha in­tro­dot­to i propri tag. Se il bot Twitter, tuttavia, non riesce a in­di­vi­duar­li durante la na­vi­ga­zio­ne sulla pagina, ricorre anch'esso a Open Graph.

Prima di iniziare a inserire le diverse meta property, è ne­ces­sa­rio definire il vo­ca­bo­la­rio in un prefisso.

<html prefix="og: http://ogp.me/ns#">

Solo allora seguirà l'in­te­sta­zio­ne del documento.

I prin­ci­pa­li tag Open Graph

Esistono molti tag Open Graph che possono essere po­si­zio­na­ti in un sito web. Le in­for­ma­zio­ni più im­por­tan­ti, tuttavia, sono le seguenti e do­vreb­be­ro essere integrate in tutti i siti web che devono essere condivisi sui social network.

Title

Quale titolo deve essere vi­sua­liz­za­to nei social network quando il sito web cor­ri­spon­den­te viene condiviso? Il tag title consente di spe­ci­fi­ca­re un nome. Su Facebook la lunghezza non deve superare i 95 caratteri. Dopo circa 50 caratteri segue un'in­ter­ru­zio­ne di riga, un fattore im­por­tan­te che influisce sul modo in cui gli utenti rea­gi­sco­no alla vi­sua­liz­za­zio­ne.

<meta property="og:title" content="Titolo del sito web"/>

Ogni documento web dispone comunque di un tag title, im­por­tan­te, ad esempio, per la vi­sua­liz­za­zio­ne nel browser o nei motori di ricerca. In linea di principio è possibile ri­pren­der­lo nel tag Open Graph, ma il pro­to­col­lo Facebook permette agli operatori di siti web di definire anche un'al­ter­na­ti­va adattata ai social media. Si potrebbe, ad esempio, sfruttare meglio la lunghezza pre­sta­bi­li­ta da Facebook sce­glien­do un'al­ter­na­ti­va adeguata invece del tag standard che si utilizza nei motori di ricerca. Con un tag title al­ter­na­ti­vo è inoltre possibile adattare il titolo in modo più preciso al target dei social media.

De­scrip­tion

Anche il tag de­scrip­tion è parte in­te­gran­te di ogni documento HTML. Con un simile tag Open Graph i web designer adattano la de­scri­zio­ne del contenuto ai social network. Facebook prevede una lunghezza di circa 300 caratteri. A seconda del titolo o dell'URL, lo spazio può anche essere più breve, motivo per cui è buona norma limitarsi a un massimo di 200 caratteri.

<meta property="og:description" content="Descrizione del sito web"/>
Consiglio

A dif­fe­ren­za della de­scrip­tion HTML, la variante Open Graph non è rilevante per il SEO. Le keyword non sono im­por­tan­ti.

Image

Oltre al titolo e al testo de­scrit­ti­vo, può essere inclusa anche un’immagine nel­l'an­te­pri­ma del sito web. Con il tag Open Graph gli operatori di siti web im­pe­di­sco­no a Facebook e ad altre piat­ta­for­me di social media di scegliere un'im­ma­gi­ne più o meno casuale della ri­spet­ti­va pagina, evitando errori gros­so­la­ni come quando, ad esempio, viene se­le­zio­na­ta l'im­ma­gi­ne di un banner pub­bli­ci­ta­rio al posto del­l'im­ma­gi­ne del­l'ar­ti­co­lo vero e proprio.

<meta property="og:image" content="http://www.example.org/images/anteprima.jpeg" />

La cosa migliore è creare ap­po­si­ta­men­te un'im­ma­gi­ne per l'an­te­pri­ma per in­cre­men­ta­re il numero di clic. Dovete prestare at­ten­zio­ne sia al contenuto del­l'im­ma­gi­ne, sia al suo formato. Una com­bi­na­zio­ne valida è quella immagine-testo, con il testo po­si­zio­na­to in modo centrale, dato che Facebook potrebbe tagliare il bordo del­l'im­ma­gi­ne. Il formato ottimale è 1200 x 627 pixel. Se se­le­zio­na­te queste im­po­sta­zio­ni di di­men­sio­ne, Facebook vi­sua­liz­ze­rà l'im­ma­gi­ne sopra il title e la de­scrip­tion. Se scegliete un formato più piccolo, l'im­ma­gi­ne potrebbe scivolare come thumbnail accanto al testo.

Al tag image è possibile ag­giun­ge­re altre in­for­ma­zio­ni per garantire una vi­sua­liz­za­zio­ne perfetta:

<meta property="og:image" content=" http://www.example.org/images/anteprima.jpeg" />
<meta property="og:image:secure_url" content="https://www.example.org/images/anteprima.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Cascata tropicale" />
  • secure_url: fornisce un'al­ter­na­ti­va valida se il sito web richiede il pro­to­col­lo HTTPS.
  • type: il tipo di media di un'im­ma­gi­ne è sempre "image", ma questa riga indica anche il formato uti­liz­za­to. (IANA ha creato una lista di tutti i tipi di media uti­liz­za­bi­li.)
  • width: questo record indica all'altro sito web quanto è larga l'im­ma­gi­ne in pixel.
  • height: questo record indica all'altro sito web quanto è alta l'im­ma­gi­ne in pixel.
  • alt: il testo alt viene vi­sua­liz­za­to come de­scri­zio­ne del contenuto del­l'im­ma­gi­ne, come anche nel caso dell'HTML, se l'im­ma­gi­ne di anteprima non può essere vi­sua­liz­za­ta.

URL

Il tag URL definisce l'indirizzo web del sito condiviso. Può apparire ri­don­dan­te perché l'URL è comunque noto. Alcuni operatori di siti web hanno, tuttavia, diversi URL per lo stesso contenuto, una strategia uti­liz­za­ta, ad esempio, per garantire una migliore rin­trac­cia­bi­li­tà. Il tag Open Graph assicura che il col­le­ga­men­to rimandi sempre al sito web corretto.

<meta property="og:url" content="http://www.example.org/articles/id3498/" />
N.B.

Facebook non mostra l'URL completo nel­l'an­te­pri­ma, ma solo il dominio.

Type

Il tipo indica la natura concreta del contenuto. La maggior parte dei siti web rientra nei tipi website, blog o article, ma ce ne sono anche altri:

  • website
  • article
  • blog
  • profile
  • book
  • video
    • video.movie
    • video.episode
    • video.tv_show
    • video.other
  • music
    • music.song
    • music.album
    • music.playlist
    • music.radio_station
N.B.

Per uti­liz­za­re cor­ret­ta­men­te il tipo music, Facebook deve prima attivare l'o­pe­ra­to­re del sito web cor­ri­spon­den­te. La whitelist include prin­ci­pal­men­te grandi aziende come Spotify.

Oltre a quelli elencati ve ne sono di ulteriori tipi, per cui si fa ri­fe­ri­men­to a un elenco su schema.org. I tipi pre­sen­ta­ti in questo articolo sono tutti spe­ci­fi­ca­ti sul sito ufficiale di Open Graph.

Fatto

Molti tipi con­sen­to­no ulteriori spe­ci­fi­ca­zio­ni elencate come meta property separate dopo la de­fi­ni­zio­ne del tipo. In questo esempio spe­ci­fi­chia­mo più det­ta­glia­ta­men­te un articolo. Per gli altri tipi potete trovare ulteriori spe­ci­fi­ca­zio­ni sulla homepage di Open Graph.

<meta property="og:type" content="article">
<meta property="article:published_time" content="2019-04-25">
<meta property="article:section" content="Multimedia">

Il codice in questo esempio indica ai social network non solo che l'oggetto è un articolo, ma anche quando è stato pub­bli­ca­to e in quale categoria appare.

Pa­no­ra­mi­ca dei tag Open Graph

Oltre ai più im­por­tan­ti tag Open Graph pre­sen­ta­ti sopra, ce ne sono altri che possono essere inseriti nel codice sorgente di un sito web per adattare ancora di più i contenuti ai social network.

Ogni tag Open Graph definisce un contenuto che deve essere inserito nel posto giusto sul social network e, per fare questo, deve essere fornito nel formato giusto. Per esempio, il tag og:title richiede una o più parole, cioè una stringa. Ma sono possibili anche i valori seguenti:

  • Boolean: valori di tipo vero o falso (true, false, 1, 0)
  • DateTime: in­di­ca­zio­ne temporale nel formato aaaa-mm-ggThh:mm:ss
  • Enum: set di spe­ci­fi­che pre­de­fi­ni­te (es. male, female)
  • Float: valore numerico decimale a 64 bit
  • Integer: valore numerico intero a 32 bit
  • String: sequenza di caratteri Unicode
  • URL: URL fun­zio­nan­te che utilizza i pro­to­col­li HTTP o HTTPS
  • Array: insieme di valori
Tag De­scri­zio­ne Contenuto
og:title Titolo del sito web String
og:de­ter­mi­ner Articolo gram­ma­ti­ca­le prima del titolo Enum
og:de­scrip­tion De­scri­zio­ne del sito web String
og:site_name Nome del sito web String
og:url URL canonico URL
og:locale In­di­ca­zio­ni su paese e lingua String (language_TERRITORY)
og:locale:alternate In­di­ca­zio­ne di paese al­ter­na­ti­vo Array
og:type Tipo di contenuto String
og:image Fonte di un'im­ma­gi­ne URL
og:image:secure_url URL al­ter­na­ti­vo e sicuro (HTTPS) URL
og:image:type Tipo di media del­l'im­ma­gi­ne String
og:image:width Larghezza in pixel Integer
og:image:height Altezza in pixel Integer
og:image:alt Testo al­ter­na­ti­vo del­l'im­ma­gi­ne String
og:audio Fonte per un file audio URL
og:audio:secure_url URL al­ter­na­ti­vo e sicuro (HTTPS) URL
og:audio:type Tipo di media del file audio String
og:audio:alt Testo al­ter­na­ti­vo del file audio String
og:video Fonte di un video URL
og:video:secure_url URL al­ter­na­ti­vo e sicuro (HTTPS) URL
og:video:type Tipo di media del video String
og:video:width Larghezza del video in pixel Integer
og:video:height Altezza del video in pixel Integer

Tag Open Graph per diversi tipi di oggetti:

Tag De­scri­zio­ne Contenuto
music:duration Durata della canzone in secondi Integer (>=1)
music:album Album della canzone Array (music.album)
music:album:disc Disco (CD, LP) della canzone Integer (>=1)
music:album:track Numero della canzone nel­l'al­bum Integer (>=1)
music:musician Nome dei musicisti Array (profile)
music:song Canzone sul­l'al­bum String (music.song)
music:song:disc Disco (CD, LP) della canzone Integer (>=1)
music:song:track Numero della canzone nel­l'al­bum Integer (>=1)
music:release_date Data di uscita del­l'al­bum DateTime
music:creator Creatore della playlist o della stazione radio Array (profile)
video:actor Attori nel video Array (profile)
video:actor:role Ruolo di un attore String
video:director Registi del video Array (profile)
video:writer Sce­neg­gia­to­ri del video Array (profile)
video:duration Durata del video in secondi Integer (>=1)
video:release_date Data di uscita del video DateTime
video:tag Parole chiave del video Array (String)
video:series Serie a cui ap­par­tie­ne l'e­pi­so­dio String (video.tv_show)
article:published_time Data di pub­bli­ca­zio­ne del­l'ar­ti­co­lo DateTime
article:modified_time Ultima modifica del­l'ar­ti­co­lo DateTime
article:ex­pi­ra­tion_time Data di scadenza del­l'ar­ti­co­lo DateTime
article:author Autori del­l'ar­ti­co­lo Array (profile)
article:section Categoria del­l'ar­ti­co­lo String
article:tag Parole chiave del­l'ar­ti­co­lo Array (String)
book:author Autori del libro Array (profile)
book:isbn ISBN del libro String
book:release_date Data di pub­bli­ca­zio­ne del libro DateTime
book:tag Parole chiave del libro Array (String)
profile:first_name Nome della persona String
profile:last_name Cognome della persona String
profile:username Pseu­do­ni­mo della persona String
profile:gender Sesso della persona Enum

Come uti­liz­za­re Open Graph: esempio di codice

L'esempio seguente mostra un documento HTML molto semplice che è stato preparato uti­liz­zan­do i tag Open Graph per i social network:

<!DOCTYPE html>
<html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>First Article</title>
<meta property="og:type" content="article">
<meta property="og:title" content="My first article">
<meta property="og:description" content="This is a very cool article.">
<meta property="og:site_name" content="Our Website">
<meta property="og:url" content="http://www.example.org/ogp_test.html">
<meta property="og:image" content="http://www.example.org/teddy.png">
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A teddy bear" />
<meta property="article:published_time" content="2019-04-25">
<meta property="article:author" content="Carl">
</head>
<body>
<h1>My First Article</h1>
<p>This is a test.</p>
</body>
</html>

Nei tag Open Graph si specifica che il documento è un articolo, si definisce il titolo, la de­scri­zio­ne e l'URL e si seleziona un'im­ma­gi­ne rap­pre­sen­ta­ti­va. Vengono fornite, inoltre, ulteriori in­for­ma­zio­ni sia sul­l'ar­ti­co­lo stesso che sul­l'im­ma­gi­ne.

Per ve­ri­fi­ca­re se il codice viene compreso cor­ret­ta­men­te da Facebook non è ne­ces­sa­rio attendere che qualcuno condivida il contenuto: con il debugger di con­di­vi­sio­ne, Facebook offre uno strumento per con­trol­la­re che il codice sorgente non contenga errori e venga vi­sua­liz­za­to cor­ret­ta­men­te. Con questo strumento potete inoltre vedere come l'an­te­pri­ma apparirà su Facebook.

Immagine: Il debugger di condivisione di Facebook per la verifica di Open Graph
I web designer usano il debugger di con­di­vi­sio­ne di Facebook per ve­ri­fi­ca­re se i tag Open Graph sono stati inseriti cor­ret­ta­men­te.

Per uti­liz­za­re il debugger è suf­fi­cien­te un account Facebook. Il sito web da con­trol­la­re deve, tuttavia, essere già di­spo­ni­bi­le online.

Vai al menu prin­ci­pa­le