
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
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).
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:
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"/>
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" />
Alcune proprietà legate agli allegati multimediali possono avere ulteriori meta-dati che specificano ulteriormente l’oggetto.
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 |
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 |
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" />
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.
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:
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:
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:
Se vuoi aggiornamenti su Open Graph Protocol, Facebook e il Web Semantico inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Impariamo ad utilizzare Takamaka, una blockchain Java Full Stack, per scrivere codice Java installabile ed eseguibile su una blockchain
Potenziare la gestione delle collezioni, con funzionalità avanzate e automatismi
Orientarsi tra formati e opzioni di ASP e VBScript
Come creare un’applicazione per la gestione di un negozio di commercio elettronico con il framework PHP Laravel. Una guida completa che, partendo dalla configurazione di un ambiente di sviluppo basato su Laravel, descrive nel dettaglio tutti i passaggi necessari per pubblicare un e-commerce con cui promuovere e vendere i propri prodotti online