La potenza dei microdati

21 marzo 2011

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.

Link utili

Google: informazioni sui microdati

Vocabolario Breadcumbs

Vocabolario Businesses and Organizations

Vocabolario Person

Vocabolario Address

Vocabolario Events

Vocabolario Products

Vocabolario Offer

Vocabolario Aggregate

Vocabolario Recipes

Vocabolario Reviews

Vocabolario Review-aggregate

Vocabolario Rating

Consultare anche il portale Schema.org

Tutte le lezioni

1 ... 32 33 34 ... 51

Se vuoi aggiornamenti su La potenza dei microdati inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su La potenza dei microdati

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