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:
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)
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:
- il sito web dell'Open Graph Protocol
- la documentazione Facebook sulla sua implementazione dello standard
Altri articoli interessanti sono:
- Open Graph protocol 1.1 Niall Kennedy's Weblog
- Understanding the Open Graph Protocol FactoryCity
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:
- PHP: Open Graph Protocol helper for PHP
- Python: PyOpenGraph 0.2
- Java: OpenGraph for Java
- Ruby: A Ruby wrapper for the Open Graph protocol
Per ultimo ma non per importanza il plugin per implementare l'Open Graph Protocol in WordPress:
