Fra le innumerevoli novità introdotte dal HTML5 ci sono sicuramente i microdati o microdata che servono a specificare meglio un testo. Fino a poco tempo fa i microdati non avevano una particolare importanza. Adesso siccome i crawler di Google indicizzano i markup contenenti i microdati la situazione è cambiata. In pratica adesso i microdati forniscono informazioni aggiuntive per quanto riguarda il SEO.. Google attraverso un ssitema definito Rich Snippets Program è in grado di estrarre questi microdati e i relativi valori conformi ad un vocabolario che trovate sul sito http://data-vocabulary.org/
Il crawler di google è in grado di interpretare oltre ai Microdata anche i formati Microformats a RDF e mostra come viene visualizzata in modo piu’ completo e significativo (rich snippet) una ricerca per un utente che cerca informazioni su una persona.
Microdata e Vocabolari
Un vocabolario è un entità principale per la definizione delle nuove voci utilizzabili con gli elementi HTML. I vocabolari creati al momento da google sono i seguenti.
http://www.data-vocabulary.org/Person/ è il piu’ importante e serve per rappresentare i dati significativi di una persona. Le sue proprietà sono
- name per il nome
- nickname ovviamente per il nicknam
- photo
- link
- title
- role
- friend
- contact
- address
e altre comunque sappiate che vengono aggiornati in maniera continuativa
http://www.data-vocabulary.org/Organization/
per i dati rappresentativi di un’organizazione, e ha come proprietà nome, url, home page, adrress, tel e le coordinate geografiche per stabilire dove si trova un’organizzazione.
http://www.data-vocabulary.org/Product
Per specificare un prodotto e fra le sue proprietà contiene brand, category , description, image, identify, offerdetails
- itemreviewed il nome dell’oggetto da revisionare
- rating il gradimento
- reviewer
- dtreviewed la data della revisione
- description la descrizione
- summary un sommario breve dell’oggetto revisionato
http://www.data-vocabulary.org/Event/
In caso di conferenza o riunione o manfiazione
summary |
Richiesto il nome dell’evento |
url |
Link alla pagina di dettaglio dell’evento |
location |
La posizione o luogo della manifestazione. Opzionalmente può essere rappresentato da nidificateOrganizzazione dati, o dati di indirizzo nidificate. Consigliato (a meno che la pagina contenente il markup è una pagina di circa il luogo, e la posizione è la stessa per ogni evento.) Maggiori informazioni su entità nidificate. |
description |
Una decrizione dell’evento. |
startDate (dtstart ) |
Required. L’inizio della data dell’evento ISO date format. |
endDate (dtend ) |
La data di fine dell’evento in ISO date format. |
duration |
La durata dell’evento in ISO duration format. |
eventType (category ) |
La categoria dell’evento come “Festival”, “Concert”, “Lecture”. |
geo |
Le coordinate dell’evento come : latitude and longitude . Optional. |
photo |
Un link di una foto relazionata all’evento. |
Proprietà
Una proprietà è un nome rappresentante una voce di un vocabolario è associata ad un valore che vinee estratto a seconda dell’eelemento dove è stata assegnata. Per la maggior parte degli elementi HTML come div, span, p, tr tale valore è il loro contenuto testuale per alcuni img il valore è la proprietù src per altri a è il valore dell’attributo href.
I passi da seguire per utilizzare i Microdata sono i seguenti.
scegliere l’elemento HTML cui applicare un determinato vocabolario utilizzando l’attributo itertype . Allo stesso elemento si applica l’attributo itemscope , quindi scopo e tipo, al suo interno andranno messi gli elementi HTML riferiti alle proprietà.
scegliere gli elementi HTML , cui applicare l’attributo itemprop che li descrive.
Facciamo qualche esempio.
Prendiamo come riferimento il vocabolario che descrive una persona
<div>
Mi chiamo <span> Alessandro del Piero</span>
per gli amici <span> pinturicchio</span> e la mia home page è
<a href="http://www.juventus.com"> Juventus</a>
<span> Torino</span> Italia
e lavoro come
<span> Calciatore </span>
questa è invece la sua versione con i dati strutturati
<div>
Mi chiamo <span> Alessandro del Piero</span>
per gli amici <span> pinturicchio</span> e la mia home page è
<a href="http://www.juventus.com"> Juventus</a>
<span> Torino</span> Italia
e lavoro come
<span> Calciatore </span>
riprendiamo qualche altro esempio direttamente da google tanto per chiarire meglio il concetto
<div itemscope itemtype="http://data-vocabulary.org/Person"> Mi chiamo <span itemprop="name">Roberto Sacchi</span>, ma tutti mi chiamano <span itemprop="nickname">Bob</span>. Questa è la mia home page: <a href="http://www.example.com" itemprop="url">www.example.com</a>. Ho una casa ad <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="locality">Albenga</span>, <span itemprop="region">(Liguria)</span> </span> e lavoro come <span itemprop="title">ingegnere</span> per la <span itemprop="affiliation">ACME Corp</span>. </div>
in caso di data facciamo invece
<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15 ottobre 2009, 19:00</time>
con la data utilizzando il formato di data ISO