schema.org e microdata

Benchè l’html5 orbiti attorno al concetto di “semantica”, i nuovi tag inseriti non sono sufficienti ad affrontare le necessità di catalogazione e analisi dei risultati dei motori di ricerca.

Per questo possiamo arricchire i nostri tag con degli attributi ad-hoc, detti microdati, che consentono di specificare al meglio il contesto e il significato di alcuni particolari tipo di dati.

Le principali risorse a cui fare riferimento sono:

richsnippet

  • schema.org che è il sito di riferimento per la gestione dei dati strutturati su internet e contiene gli schemas ovvero, le strutture modellate ad oggi e i loro attributi.

Ok, ma che tipo di dati possiamo rappresentare?

Particolari contenuti come film, ricette, articoli, libri, oggetti audio  (registrazioni), eventi, luoghi, persone, prodotti, offerte, valutazioni etc…

Lo standard è in continua evoluzione, così come il modo in cui i motori di ricerca vi interagiscono. Ad esempio, prendendo sempre come caso Google, non tutti i tipi di dato vengono rappresentati in maniera particolare nelle serp, tuttavia, utilizzare i mocrodata rappresenta una chance in più per far notare il nostro contenuto tra milioni di risultati.

Alcuni esempi:

Eventi, viene indicata data e luogo
Eventi, viene indicata data e luogo
Valutazioni: rating (stelline) e numero di recensioni
Valutazioni: rating (stelline) e numero di recensioni
Luoghi: indirizzo e contatti
Luoghi: indirizzo e contatti
Ricette: tempo di preparazione e calorie
Ricette: tempo di preparazione e calorie

A livello di codice, la scrittura dei microdati comporta

  • l’inserimetno di itemscope e itemtype sulla radice, ovvero sul tag che conterrà l’elemento che stiamo modellando. Itemscope, identifica il tag a cui è applicato come contentirore, itemtype vuole come attributo un url al vocabolario su schema.org
<div itemscope itemtype="http://schema.org/Movie">
  • l’inserimento dell’attributo itemprop che definisce la proprietà che si sta descrivendo, seguendo lo schema scelto tramite itemtype
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Pirates of the Carribean: On Stranger Tides (2011)</h1>
<span itemprop="description">Jack Sparrow and Barbossa embark on a quest to
 find the elusive fountain of youth, only to discover that Blackbeard and
 his daughter are after it too.</span>
Director:
 <div itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Rob Marshall</span>
</div>
Writers:
 <div itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Ted Elliott</span>
</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Terry Rossio</span>
</div>
, and 7 more credits
Stars:
 <div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Johnny Depp</span>,
 </div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Penelope Cruz</span>,
</div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Ian McShane</span>
</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  <span itemprop="ratingValue">8</span>/<span itemprop="bestRating">10</span> stars from
  <span itemprop="ratingCount">200</span> users.
  Reviews: <span itemprop="reviewCount">50</span>.
</div>
</div>

See the Pen schema movie by Mariachiara Pezzotti (@merissimissima) on CodePen.

Vedete come all’interno dello stesso itemscope possono esserne annidati altri, se necessari per rappresentare determinate caratteristiche dell’oggetto che stiamo modellando: nel caso del film, il registra, in quanto persona fa riferimento allo schema all’itemtype “person“, mentre la valutazione del film a “aggregatingRating“.

Per verificare se i microdata sono stati scritti nella maniera corretta potete utilizzare lo strumento di testing dei dati strutturati messo a disposizione da google.