Perché adottare il protocollo Open Graph di Facebook
Con il sistema Open Graph possiamo comunicare molti dati che Facebook userà per creare l’anteprima della pagina all’atto della condivisione della stessa nel suo social network.
Inoltre, se volessimo lanciare uno sguardo al futuro, il protocollo Open Graph non vuole fermarsi qui, ma punta a diventare un meta linguaggio (alla stregua dei Schemi di schema.org) capace di offrire ai suoi destinatari dei meta dati utili a descrivere in maniera strutturata gli elementi presenti nella pagina. A detta della stessa pagina Open Graph – Facebook Developers:
The Open Graph lets apps tell stories on Facebook through a structured, strongly typed API.
Tradotto: L’Open Graph fanno sì che le applicazioni raccontino delle storie su Facebook
per mezzo di API strutturate e fortemente tipizzate
Come applicare Open Graph al proprio sito
Usare questo protocollo nel proprio sito significa introdurre dei meta tags nella sezione <head> . Ad esempio per il presente articolo avremo:
<meta property="og:locale" content="it_IT"/> <meta property="og:type" content="article"/> <meta property="og:title" content="Guida pazzesca per tenere in ordine i documenti dentro al PC - Marco Panichi Blog"/> <meta property="og:description" content="Guida su come tenere in ordine i documenti dentro al PC. Individua i macro contesti e i sotto-contesti. Aggiungi tasks e cartelle immanenti."/> <meta property="og:url" content="https://www.marcopanichi.com/blog/guida-pazzesca-per-tenere-in-ordine-i-documenti-dentro-al-pc/"/> <meta property="og:site_name" content="Perugia | Marco Panichi"/> <meta property="og:image" content="https://www.marcopanichi.com/wp-content/uploads/2013/08/cover8-1.jpg"/>
Open Graph di Facebook e validazione W3C: Bocciato!
Il problema è che l’introduzione di questi meta tags non piace al Validatore W3C il quale ci restituirà un errore simile al seguente:
Il messaggio è chiaro: non è permesso usare l’attributo property nell’elemento meta.
Di seguito fornirò tutte le soluzioni che si trovano in giro per il web oltre a segnalarvi la soluzione da me adottata e perchè.
Soluzione 1: Mettere da parte l’ansia da prestazione
Una prima soluzione, molto “zen”, potrebbe essere quella di non curarsi degli alert del validatore in relazione agli open graph. Il validatore del resto è e dovrebbe rimanere un supporto allo sviluppo dei siti e non certo un limite fine a se stesso.
Inutile bloccarsi davanti al validatore quando il vero obiettivo di un sito web è comunicare con efficacia e fare gli interessi dell’azienda che rappresenta. Per cui parafrasando Dante: “Non ti curar di lor, ma guarda e passa”!
Soluzione 2: Cambiare l’attributo property in name
Ecco un esempio:
<meta name="og:title" content="Questo meta tag passerà la validazione!" />
Sfortunatamente in questo modo sarà il validatore di Facebook a restituirci un errore:
Open Graph Warnings That Should Be Fixed
Inferred Property: The ‘og:title’ property should be explicitly provided, even if a value can be inferred from other tags.
Usa un Doctype “XHTML-with-RDFa”
Con questo particolare doctype il tuo validatore vedrà di buon occhio l’attributo property, poiché Open Graph si fonda sul protocollo RDFa il quale prevede tale attributo.
Ecco la modifica da apportare:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Inutile dire che mi sembra alquanto pazzesco luogo modificare il Doctype del proprio progetto solo per risolvere la questione Open Graph di Facebook e validazione W3C. Certo che anche tu sarai della stessa opinione, passiamo alla prossima ed ultima soluzione.
Soluzione 3: Dare i meta tags solo a Facebook
La soluzione qui esaminata è certamente poco elegante e pericolosa. Poco elegante perché si tratta di un walk around e in quanto tale ne faremmo sicuramente a meno. Pericoloso poiché potrebbe vincolare eventuali sviluppi futuri. Ora mi spiego. Il codice da inserire è il seguente:
if (stristr( $_SERVER["HTTP_USER_AGENT"], 'facebook' ) !== false) echo ' <meta property="og:title" content="Title of the page" /> <meta property="og:url" content="http://www.example.com/" /> <meta property="og:type" content="website" /> <meta property="fb:admins" content="123456789" /> <meta property="og:image" content="http://www.example.com/images/thumb.jpg" /> ';
Come puoi notare lo sporco trucco non fa altro che servire i meta tags solo a Facebook, rendendoli invisibili a qualsiasi altro interlocutore. Open Graph di Facebook e validazione W3C: Promosso! Vittoria, giusto? No!
Il grande punto a sfavore di questa soluzione è che Facebook non è l’unico destinatario dell’Open Graph. Tanto per dirne una, anche Twitter usa gli Open Graph stando a quanto scritto nella pagina Twitter Cards and Open Graph:
If you’re already using Open Graph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property.
Tradotto: Se stai già usando Open Graph per descrivere i dati nella tua pagina, è facile generare una Twitter Card senza duplicare tags e dati. Quand il generatore di card di Twitter cerca un tag nella tua pagina, dapprima controlla la presenza di proprietà Twitter e se queste non sono presenti prende in considerazione le proprietà Open Graph.
La mia soluzione
Al fine di questa trattazione ti espongo la mia soluzione. La mia scelta di partenza è quella di non dare troppo peso ai meta dati Open Graph.
Per i meta dati nei miei siti tendo ad utilizzare i meta dati di Schema.org poiché li ritengo molto più dettagliati ed efficaci, soprattutto per quello che concerne l’ottimizzazione nei motori di ricerca. Stando a quanto scritto nello stesso sito di :
Search engines including Bing, Google, Yahoo! and Yandex rely on this markup to improve the display of search results, making it easier for people to find the right web pages.
Tradotto: I motori di ricerca, ivi inclusi Bing, Google, Yahoo! e Yandex, fanno affidamento su questa marcatura per migliorare la visualizzazione dei risultati di ricerca e rendere più facile per le persone trovare le pagine giuste.
Visto che la parte meta dati la sistemo (egregiamente direi) con Schema.org, posso lasciare ad Open Graph il compito di rendere il mio sito simpatico a Facebook ed eventualmente Twitter. Dunque applico la Soluzione 3 modificandola opportunamente per servire i meta tags anche a Twitter:
if ( stristr( $_SERVER["HTTP_USER_AGENT"], 'facebook' ) !== false or stristr( $_SERVER["HTTP_USER_AGENT"], 'twitterbot' ) !== false ) echo ' <meta property="og:title" content="Title of the page" /> <meta property="og:url" content="http://www.example.com/" /> <meta property="og:type" content="website" /> <meta property="fb:admins" content="123456789" /> <meta property="og:image" content="http://www.example.com/images/thumb.jpg" /> ';
Commenti? Soluzioni alternative?
La perfezione non esiste. Esistono soluzioni più o meno efficaci, questo si. Pertanto ti invito a condividere con me ed i lettori qualsiasi tuo parere in merito alla questione.
Quale soluzione adotti tu? Ritieni importante validare il sito al 100% o lasci correre? Hai provato ad applicare la mia soluzione ma qualcosa è andato storto? Invia un commento!
Buona validazione!