La potenza dei microdati

Link copiato negli appunti

Introduzione: semantica e rich snippet

Leggendo questa guida dovrebbe essere chiaro che un punto focale di HTML5 è la semantica.

HTML5 ha introdotto infatti diversi tag semantici (come header, article o nav) che permettono di strutturare il contenuto secondo una logica, appunto, semantica. Ma questa suddivisione non assolve a tutte le necessità semantiche di cui il web ha bisogno.

L'obbiettivo è quello di dare la possibilità a programmi come crawler dei motori di ricerca o screen reader di comprendere il significato del testo. Queste informazioni sono accessibili da questi programmi e rimangono (attualmente) invisibili per l'utente. Entrano qui in gioco i cosiddetti microdati.

Ecco come Google li descrive, all'interno della Guida di Strumenti per i Webmaster:

"La specifica dei microdati HTML5 è un modo per assegnare etichette ai contenuti al fine di descrivere un tipo specifico di informazioni (ad esempio recensioni, informazioni su persone o eventi). Ogni tipo di informazione descrive uno specifico tipo di elemento, come una persona, un evento o una recensione. Ad esempio, un evento ha proprietà quali il luogo, l'ora di inizio, il nome e la categoria."

Attualmente, la cosa forse più interessante relativa ai microdati è in effetti uscita fuori dai laboratori di Google: si tratta dei cosiddetti rich snippet. I rich snippet sono risultati della ricerca di Google in cui, oltre alle comuni informazioni, compaiono altri dati allegati, come nelle immagini qui sotto:

Figura 39 - Rich snippet relativo a un hotel

screenshot

Figura 40 - Rich snippet con informazioni personali

screenshot

I microdata in pratica

Applicare i microdati è semplice: per ogni tag HTML possiamo specificare degli attributi che ci permettono di definire gli oggetti semantici.

Prima di tutto dobbiamo applicare a un elemento radice (cioè un elemento che contiene tutte le informazioni che vogliamo specificare) itemscope e itemtype.

itemscope definisce l'elemento a cui è applicato è un contenitore dell'oggetto che andremo a descrivere.

itemtype definisce il vocabolario che specifica il tipo di oggetto che andremo a descrivere.

Per finire, sugli elementi che discendono dall'elemento radice specifichiamo l'attributo itemprop che definisce la proprietà che verrà valorizzata con il testo contenuto nel tag.

Ecco un esempio semplice:

<div itemscope itemtype="http://data-vocabulary.org/Person">My name is
  <span itemprop="name">Simone Bonati</span> and my nickname is
  <span itemprop="nickname">svarione</span> on several site (like twitter).
  Here is my twitter account:
  <a href="http://www.example.com" itemprop="url">http://twitter.com/svarione</a> I live in
  Milano, Italy and work as
  <span itemprop="role">web developer</span>.
</div>

Possiamo anche nidificare gli oggetti. Ecco un esempio:

<div itemscope itemtype="http://data-vocabulary.org/Person">My name is
  <span itemprop="name">Simone Bonati</span> and my nickname is
  <span itemprop="nickname">svarione</span> on several site (like twitter).
  Here is my twitter account:
  <a href="http://www.example.com" itemprop="url">http://twitter.com/svarione</a> I live in
  <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">Milano</span>,
    <span itemprop="country-name">Italy</span>
  </span> and work as
  <span itemprop="role">web developer</span>.
</div>

I vocabolari

Per sfruttare al massimo la potenza dei microdati e per ottenere i rich snippet dobbiamo usare i vocabolari (che specifichiamo, come abbiamo visto, con itemtype) supportati da Google.

I vocabolari descrivono l'insieme di proprietà che possono essere definite per un determinato oggetto.

I vocabolari più popolari supportati da Google sono:

Breadcrumbs: questo vocabolario serve a rappresentare un insieme di link che può aiutare un utente a comprendere e navigare all'interno del sito.
Businesses and organizations: questo vocabolario definisce una società, un negozio e più in generale un luogo.
Person: questo vocabolario definisce una persona.
Address: questo vocabolario definisce un indirizzo.
Events: questo vocabolario definisce un evento (con informazioni come il titolo, la data e il luogo).
Product: questo vocabolario definisce un prodotto.
Offer: questo vocabolario definisce un'offerta.
Offer-aggregate: questo vocabolario definisce un aggregato di offerte (con prezzo minimo, prezzo massimo, etc).
Recipes: questo vocabolario definisce una ricetta.
Review: questo vocabolario definisce una singola recensione.
Review-aggregate: questo vocabolario definisce una recensione aggregata.
Rating: questo vocabolario definisce una valutazione.