Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 33 di 51
  • livello principiante
Indice lezioni

La potenza dei microdati

Definire contenuti semantici in HTML5
Definire contenuti semantici in HTML5
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.

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

Consultare anche il portale Schema.org

Questo articolo contiene link di affiliazione: acquisti o ordini effettuati tramite tali link permetteranno al nostro sito di ricevere una commissione nel rispetto del codice etico. Le offerte potrebbero subire variazioni di prezzo dopo la pubblicazione.

Ti consigliamo anche