Open Graph Protocol, Facebook e il Web Semantico

Come sfruttare il Web Semantico “made in Facebook”

Il Web Semantico è un argomento trattato da moltissimo tempo, ma concretamente si è fatto ancora troppo poco per far sì che questa idea prenda realmente piede. Il re dei social network, Facebook, si è mosso da qualche anno in questa situazione implementando il cosidetto Open Graph Protocol per sopperire ad alcune mancanze ancora troppo evidenti nel mondo del Web.

Del protocollo ci siamo già occupati analizzando come integrare Facebook all’interno del proprio sito Web. In questa sede vedremo invece più da vicino e più in dettaglio le sue caratteristiche.

Questo protocollo, che rispecchia la specifica RDF (Resource Description Framework) in quanto sfrutta i meta-tag in pagina, permette a ciascuna pagina presente in Internet di essere rappresentata sotto forma di un oggetto, caratterizzato da alcune proprietà chiave, e di poter essere inclusa in quello che viene chiamato “grafo sociale” ovvero una sorta di mappatura di tutte le pagine Internet e di quello che esse rappresentano e contengono.

L’Open Graph Protocol è fortemente apprezzato perché, nonostante realizzato da una piattaforma di tiratura mondiale, non preclude nessun utilizzo “privato” anche da altri portali o applicazioni in genere che possono ottenere le informazioni da ciascuna pagina web senza prescindere da Facebook. Esistono infatti altre piattaforme che usano l’Open Graph Protocol per realizzare un proprio “grafo sociale” interno (ad esempio LinkedIn).

Implementare i nodi dell’open graph

Uno degli aspetti chiave verso il quale Facebook si è orientato è stata la facilità di implementazione. Per configurare una pagina web come un oggetto in grado di entrare a far parte di un “grafo sociale” più grande è necessario impostare una serie di meta-tag all’interno del tag <head> della pagina con le informazioni richieste dallo specifico tag.

I meta-dati necessari possono essere raggruppati in diverse sottocategorie:

  • meta-dati di base
  • meta-dati opzionali
  • meta-dati strutturati

Meta-dati di base

Sono i meta-dati obbligatori per qualsiasi tipologia di oggetto e sono:

Meta-dato Descrizione
og:title rappresenta il titolo del nostro oggetto nel “grafo sociale” (attenzione non è in nessun modo collegato al <title> della pagina)
og:type rappresenta il tipo di oggetto
og:image url di un immagine che rappresenta l’oggetto
og:url url che identifica l’oggetto e che rappresenta l’id univoco che l’oggetto avrà

Un esempio di implementazione di base dell’Open Graph Protocol di questo articolo è la seguente:


<meta property="og:title" content="Open Graph Protocol, Facebook e il Web Semantico" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://xml.html.it/articoli/leggi/3987/open-graph-protocol-facebook-e-il-web-semantico/"/>
<meta property="og:image" content="http://utenti.html.it/tmp_img/articolo_42dbbb815bdbc3b3.gif"/>

Meta-dati opzionali

Sono i meta-dati che arricchiscono ulteriormente la pagina nel “grafo sociale” ma non sono richiesti da nessun parser:

Meta-dato Descrizione
og:description rappresenta una breve descrizione dell’oggetto
og:determiner l’articolo che appare prima del titolo dell’oggetto in una frase (sfortunatamente ora accetta solamente a, an, the, auto)
og:locale il locale di riferimento per i tag Open Graph
og:locale:alternate eventuali altri locales presenti in pagina
og:site_name il nome del sito web che incapsula l’oggetto Open Graph
og:audio URL di un file audio che rappresenta l’oggetto
og:video URL di un file video che rappresenta l’oggetto

Sempre prendendo considerando questo articolo (come si può vedere non tutti sono stati implementati):


<meta property="og:site_name" content="HTML.it" />
<meta property="og:description" content="Come sfruttare il Web Semantico 'made in Facebook' - Xml.HTML.it" />

Meta-dati strutturati

Alcune proprietà legate agli allegati multimediali possono avere ulteriori meta-dati che specificano ulteriormente l’oggetto.

Immagini

Relativamente all’immagine associata è possibile implementare le seguenti proprietà:

Proprietà Descrizione
og:image:secure_url rappresenta un url alternativo alla risorsa in HTTPS
og:image:type rappresenta il mime-type dell’immagine
og:image:width rappresenta la larghezza in pixel dell’immagine
og:image:height rappresenta l’altezza in pixel dell’immagine

Video

Relativamente all’eventuale contenuto di tipo video associato è possibile implementare le seguenti proprietà:

Proprietà Descrizione
og:video:secure_url rappresenta un url alternativo alla risorsa in HTTPS
og:video:type rappresenta il mime-type del video
og:video:width rappresenta la larghezza in pixel del video
of:video:height rappresenta l’altezza in pixel del video

Audio

Relativamente all’eventuale contenuto di tipo audio associato è possibile implementare le seguenti proprietà:

Proprietà Descrizione
og:audio:secure_url rappresenta un url alternativo alla risorsa in HTTPS
og:audio:type rappresenta il mime-type del file audio

Un sito dedicato ai video come Vimeo implementa, ad esempio, i seguenti meta-tag:


<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="472" />

Il meta-dato og:type e Facebook

Uno dei meta-dati considerati obbligatori è og:type. Esso rappresenta il tipo di oggetto che rappresentato nella pagina all’interno del vasto insieme definito “grafo sociale”. Facebook, inteso come consumer di pagine che implementano l’Open Graph Protocol, supporta un insieme ampio ma limitato di tipi possibili.

Questo è un vincolo della piattaforma Facebook e non del protocollo in sé che potenzialmente prevede tipi di oggetto infiniti. L’elenco dei tipi accettati da Facebook è disponibile qui.

Estendere l’Open Graph Protocol

Come tutti i più recenti protocolli, anche l’Open Graph Protocol è estendibile. Questo significa che non è solamente possibile definire nuovi tipi, ma anche nuove proprietà che ciascun oggetto può possedere. Le proprietà viste fin’ora utilizzano il namespace og che nient’altro non è che un acronimo per Open Graph.

Oltre a queste proprietà è possibile definirne di nuove all’interno di un dizionario già presente oppure appartenente ad un nuovo dizionario. I dizionari possono essere a loro volta annidiati: per esempio esiste il dizionario music che a sua volta implementa music:album e music:song.

Alcuni dizionari già implementati possono essere analizzati, tramite descrittori scrittin in formato JSON sul sito ufficiale del protocollo Open Graph. Ecco alcuni link:

  • Music
  • Book
  • Article

    • Strumenti di supporto, risorse e librerie

    Tra tutti gli strumenti web a disposizione il migliore rimane senza dubbio il Facebook Debugger che permette in tempo reale di visualizzare i meta-dati raccolti da una particolare pagina web. Ecco l’esempio a partire dalla pagina di Vimeo analizzata in precedenza:

    Figura 1. Visulizzare i meta dati con il Facebook Debugger
    (clic per ingrandire)

    Visulizzare i meta dati

    Un altro strumento simile è OpenGraph.in che offre un servizio web in tempo reale per parsare meta-dati Open Graph da remoto sfruttando il formato JSON. Possiamo per avere i meta-dati estratti in un indirizzo come questo.

    Altri link utili

    Tra le principali risorse segnaliamo:

    Altri articoli interessanti sono:

    Riguardo alle librerie infine bisogna dire che esistono implementazioni sia a livello di generazione che di interpretazione dell’Open Graph Protocol per tutti i principali linguaggi. Ecco le principali librerie organizzate per linguaggio:

    Per ultimo ma non per importanza il plugin per implementare l’Open Graph Protocol in WordPress:

    I Video di HTML.it

    Emanuele Del Bono