Open Graph Protocol, Facebook e il Web Semantico

29 marzo 2012

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-datoDescrizione
og:titlerappresenta il titolo del nostro oggetto nel “grafo sociale” (attenzione non è in nessun modo collegato al <title> della pagina)
og:typerappresenta il tipo di oggetto
og:imageurl di un immagine che rappresenta l’oggetto
og:urlurl 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-datoDescrizione
og:descriptionrappresenta una breve descrizione dell’oggetto
og:determinerl’articolo che appare prima del titolo dell’oggetto in una frase (sfortunatamente ora accetta solamente a, an, the, auto)
og:localeil locale di riferimento per i tag Open Graph
og:locale:alternateeventuali altri locales presenti in pagina
og:site_nameil nome del sito web che incapsula l’oggetto Open Graph
og:audioURL di un file audio che rappresenta l’oggetto
og:videoURL 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_urlrappresenta un url alternativo alla risorsa in HTTPS
og:image:typerappresenta il mime-type dell’immagine
og:image:widthrappresenta la larghezza in pixel dell’immagine
og:image:heightrappresenta 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_urlrappresenta un url alternativo alla risorsa in HTTPS
og:video:typerappresenta il mime-type del video
og:video:widthrappresenta la larghezza in pixel del video
of:video:heightrappresenta 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_urlrappresenta un url alternativo alla risorsa in HTTPS
og:audio:typerappresenta 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" />
Se vuoi aggiornamenti su Open Graph Protocol, Facebook e il Web Semantico inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Open Graph Protocol, Facebook e il Web Semantico

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy