L’Open Graph risolve un’importante sfida del social media marketing: consente ai webmaster di definire esattamente l’aspetto dell’anteprima di una pagina. Si tratta di un protocollo di rete (Internet Protocol) sviluppato originariamente da Facebook, ora disponibile anche su altre piattaforme social come Twitter.
Che cos’è un Open Graph?
Quando qualcuno condivide un link su un social network, il post corrispondente contiene solitamente un titolo, un’immagine e un URL. Le piattaforme social generano tutto ciò automaticamente a partire dai dati esistenti sul sito web.
Per lungo tempo i webmaster non hanno avuto alcuna influenza sull’aspetto di questa anteprima. Tuttavia, sappiamo bene che il successo di post e pagine condivise dipende fortemente dalla loro apparenza anche sui social network: solitamente se una pagina appare interessante e possiede un titolo accattivante, le persone sono invogliate a cliccarci sopra.
L’Open Graph consente di predefinire sul proprio sito dei tag precisi in modo da garantire che il post contenga tutti i dati importanti, compresa una foto. Così facendo, Facebook & co. non dovranno indovinare da soli quali dati sono particolarmente importanti e adeguati, bensì semplicemente utilizzare quelli previsti dal webmaster e definiti con l’Open Graph.
Non utilizzando questa opzione, costringerai Facebook a estrarre i dati autonomamente, rischiando di commettere errori. Questo perché i webmaster utilizzano a volte le possibilità che Facebook mette a disposizione per il riconoscimento di dati importanti in modo diverso dal social network. Se un sito di notizie utilizza ad esempio maggiormente l’H1 come elemento di struttura inserendovi le keyword, e “nasconde” il titolo nell’H2, potrebbe succedere che Facebook utilizzi l’H1 per l’anteprima, rendendola poco attraente. Altri siti utilizzano invece l’H1 come titolo.
Questa mancanza di uniformità rende difficile per Facebook & co. trovare sempre i dati corretti. Inoltre, con l’Open Graph puoi anche realizzare funzioni a cui non avresti accesso normalmente: ad esempio, hai la possibilità di creare un carosello di immagini utilizzando semplicemente diversi tag og:image.
In generale, l’Open Graph non è utile solamente nel social media marketing. Ogni webmaster può e dovrebbe utilizzarlo. Esso permette infatti d’impostare come verranno condivisi i post sui social network, anche nel caso lo facesse qualcun altro al tuo posto.
Come faccio ad aggiungere un tag Open Graph a una pagina?
I tag Open Graph li puoi aggiungere molto facilmente nel codice sorgente del tuo sito all’interno dell’header. Ti basterà solamente sapere quali dati definire, quindi adattare i comandi alle tue esigenze.
Inizia con la seguente riga di codice:
<html prefix=“og: http://ogp.me/ns#“>
In questo modo indichi che stai lavorando con l’Open Graph e Facebook troverà i suggerimenti corrispondenti nel tuo codice sorgente.
La maggior parte dei webmaster utilizza principalmente quattro tag Open Graph: og:title, og:type, og:url e og:image. Ad esempio, per inserire il titolo del tuo sito, dovrai utilizzare il seguente codice:
<meta property=”og:title“ content=“Il titolo del tuo sito web“ />
Gli altri tag li puoi utilizzare in modo analogo. Molti dei tag più obsoleti servono principalmente per definire in modo ancora più preciso i dati già realizzati con gli altri quattro tag principali o a includere altri media come video o audio. Oltre a questi esistono anche molti altri tag, alcuni dei quali sono piuttosto recenti e sono stati creati appositamente per identificare meglio l’autore e la fonte di un post.
Di norma non hai quindi bisogno di tutti i tag. Spesso ne bastano una manciata per pagina.
– article:published_time orario di pubblicazione dell’articolo
– article:publisher fonte dell’articolo
– article:author autore dell’articolo
– og:determiner articolo grammaticale che appare prima del titolo
– og:description descrizione del sito web
– og:site_name nome del sito web
– og:locale specifica del paese e della lingua
– og:image:type media-type dell’immagine
– og:image:width larghezza in pixel
– og:image:height altezza in pixel
– og:image:alt testo alternativo all’immagine
– og:audio:secure_url URL alternativo e sicuro per un file audio
– og:audio:type media-type del file audio
– og:audio:alt testo alternativo al file audio
– og:video:secure_url URL alternativo e sicuro di un video
– og:video:type media-type del video
– og:video:width larghezza del video in pixel
– og:video:height altezza del video in pixel
Se non hai domestichezza con il codice sorgente e utilizzi uno dei CMS più diffusi, puoi scaricare un plug-in per definire e inserire i tag Open Graph.
Se vuoi controllare come appariranno i tuoi contenuti puoi utilizzare il debugger di condivisione di Facebook, che ti mostrerà un’anteprima di come verrebbe condivisa la tua pagina: l’ideale per individuare e risolvere i problemi. Il debugger ti supporta anche mostrandoti le segnalazioni.
Errore comune: mancanza dei quattro tag Open Graph (og:title, og:type, og:image e og:url)
Se osservi l’anteprima di un’immagine su Facebook, puoi notare subito quali tag sono particolarmente importanti: og:title, og:type, og:image e og:url. Visto che questi tag vengono utilizzati con particolare frequenza sono spesso fonte di errori.
Con og:title puoi decidere il titolo esatto dell’anteprima. Essendo il secondo elemento che attira l’attenzione dopo l’immagine del post, è decisivo per far sì che una persona ci clicchi o meno. Il titolo fornisce infatti delle indicazioni importanti sul contenuto e risveglia la curiosità del lettore, per cui ti consigliamo di utilizzarlo sempre e d’investire del tempo per ottimizzarlo al meglio.
Il tag og:image impedisce che Facebook estragga un’immagine qualsiasi dal tuo sito per mostrarla nell’anteprima. Anche questo tag è di grande importanza, perché ne vale della prima impressione.
Con il tag og:type puoi definire il tipo di contenuti trattati nella tua pagina: un sito, un video, un post sul blog o altro. Questa definizione la devi spesso rafforzare con altri tag, inserendo per esempio la fonte del tuo video.
Con il tag og:url definisci il tipo di URL esatto con cui il tuo post dovrebbe essere condiviso. In questo modo eviterai URL inutilmente lunghi e tutte le condivisioni e i like verranno assegnati a questo link. Di norma, si tratta di URL canonici.
Devo usare tutti i tag Open Graph per i miei post?
I tag Open Graph non devono essere per forza utilizzati tutti: dopo tutto ci sono più di 20 tag e non sono sempre pertinenti. Fondamentalmente puoi anche rinunciare del tutto ai tag Open Graph o definire solo quelli che consideri particolarmente importanti. Devi solo essere consapevole che stai cedendo il controllo del design ad una piattaforma esterna e che quindi i tuoi post potrebbero non risultare così attraenti. A questo punto Facebook può solo provare ad indovinare quali dati utilizzare, rischiando più probabilmente errori.
Se non sai ancora quali tag prediligere per i tuoi post può avere senso sperimentare con il debugger di condivisione di Facebook. In questo modo potrai scoprire nello specifico quali tag hanno quale effetto e quali dovresti integrare per ciascuna delle tue pagine. Se utilizzi un CMS tra i più diffusi, puoi anche far sì che i plug-in creino automaticamente i tag Open Graph.
In quest’ultimo caso dovrai solo verificare se i dati trasferiti corrispondono a quello che avevi in mente. Questi plug-in non solo ti risparmiano molto lavoro, sono anche un buon promemoria per questo piccolo compito che può essere facilmente dimenticato.
L’URL dell’Open Graph dovrebbe essere identico all’URL canonico?
In precedenza l’Open Graph debugger di Facebook emetteva un avviso se i link dell’Open Graph portavano a un URL diverso, ma tale segnalazione non è più attiva da un paio d’anni. Ci sono quindi poche eccezioni in cui ha senso usare un URL diverso per l’Open Graph rispetto all’URL canonico.
Può avere invece senso, ad esempio, nel caso la tua azienda operasse a livello internazionale e possedesse diverse varianti linguistiche di uno stesso URL. L’URL canonico conterrà sempre un identificatore per la lingua, ma l’URL dell’Open Graph sarà sempre lo stesso, cosa sensata perché gli URL canonici porteranno al contenuto di una pagina, mentre gli URL Open Graph a un oggetto.
I risultati impaginati e filtrati sono un altro motivo per cui i due URL potrebbero differire. L’URL dell’Open Graph potrebbe contenere dei filtri, mentre l’URL canonico puntare alla versione non impaginata o non filtrata del contenuto.
