Microdata HTML5
Cosa sono i Microdata? Cosa si intende per Rich Snippet? Qual’è la loro utilità?
L’HTML 5 ha introdotto la specifica definita MICRODATA che consente di etichettare gli elementi HTML dotandoli di informazioni aggiuntive. Google, nella Guida di Strumenti per i Webmaster, li descrive nel seguente modo:La specifica dei microdata 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. I microdata HTML5 utilizzano un set di proprietà definite in un vocabolario, in modo da fornirgli una semantica interpretabile dai browsers che, dopo avere interpretato tali MICRODATA, forniscono un determinato output. Al momento però non tutti gli elementi HTML 5 sono supportati dai principali browser, come Internet Explorer, Firefox e Chrome. Il crawler di Google è invece in grado, attraverso il Rich Snippets Program, di interpretare i microdata inseriti nella pagina web, producendo risultati nelle SERP con maggiori informazioni, come nella seguente immagine:
Vocabulary
I vocabolari sono entità che specificano il tipo di oggetto che andremo a descrivere (persona, organizzazione, prodotto, evento,..) aventi determinate proprietà. I vocabolari possono essere creati ex-novo, ma è più conveniente utilizzare quelli già creati da Google (data-vocabulary.org), di seguito riportati:
- Person: viene utilizzato per rappresentare una persona. Possiede le seguenti proprietà: name (nome), nickname (nickname), photo (link ad una immagine), title (titolo), role (ruolo), url (link ad un sito), affiliation (nome di una organizzazione a cui è affiliata), friend (amico), contact(contatto), address (indirizzo);
- Organization: viene utilizzato per rappresentare una organizzazione. Possiede le seguenti proprietà: name (nome), url (link alla home page del sito aziendale), address (indirizzo), tel (telefono), geo (coordinate geografiche);
- Product: viene utilizzato per rappresentare un prodotto. Possiede le seguenti proprietà: brand (marchio), category (categoria), description(descrizione), name (nome), price (prezzo), photo (link alla foto del prodotto), url (link alla pagina wbe del prodotto);
- Review: viene utilizzato per rappresentare una recensione di un prodotto, di una organizzazione,... Possiede le seguenti proprietà:itemreviewed (nome dell’item recensito), rating (voto da 1 a 5), reviewer (autore recensione), dtreviewed (data recensione), description (descrizione recensione), summary (breve descrizione);
- Event: viene utilizzato per rappresentare un evento. Possiede le seguenti proprietà: summary (nome evento), url (url evento), location (locazione evento), description (descrizione evento), startDate (data inizio evento), endDate (data fine evento), duration (durata evento), eventType (tipo evento), geo (coordinate geografiche evento), photo (link ad immagine evento);
Per vedere tutti i vocabolari già esistenti visitate il sito schema.org.
Esempi pratici (applicazione dei Microdata HTML5)
Vediamo alcuni esempi di applicazione dei microdata. I passi da seguire sono i seguenti:
- scegliere l’elemento HTML cui applicare un determinato vocabolario, utilizzando l’attributo itemscope come contenitore dell’oggetto che andremo a descrivere;
- attraverso l’attributo itemtype definiamo il vocabolario da utilizzare;
- attraverso l’attributo itemprop applichiamo la proprietà che descrive gli elementi HTML.
Forma usuale (Persona)
<div>
Il mio nome è Stefano Basso.
Il mio nickname SBM.
La mia home page è <a href=”http://www.atuttoseo.it”>SEO (Search Engine Optimization)</a>.
Vivo a Pavia, in Italia. Lavoro come Web Master.
</div>
Forma strutturata (Vocabolaro che descrive una persona)
<div itemscope itemtype=”http://data-vocabulary.org/Person”>
Il mio nome è <span itemprop=”name”>Stefano Basso</span>
Il mio nickname è <span itemprop=”nickname”>SBM</span>
Il mio sito web è <a href=”http://www.miositoweb.it” itemprop=”url”>SEO (Search Engine Optimization)</a>
Vivo a <span itemprop=”address” itemscope itemtype=”http://data-vocabulary.org/Address”>
<span itemprop=”locality”>Pavia</span>,
<span itemprop=”country-name”>Italia</span>
</span>
Lavoro come <span itemprop=”role”>Web Master</span>.
</div>
Forma usuale (Prodotto)
<div>
Il tablet Samsung 2.1 <img src=”tablet.jpg” /> permette di collegarsi in 3G a Internet.
</div>
<div>
Categoria: Hardware; prezzo €399,00
</div>
Forma strutturata (Vocabolaro che descrive un prodotto)
<div itemscope itemtype=”http://data-vocabulary.org/Product”>
<span itemprop=”brand”>Samsung</span>
<span itemprop=”name”>Tablet 2.1</span>
<img itemprop=”photo” src=”tablet.jpg” />
<span itemprop=”description”>Il tablet Samsung 2.1 permette di collegarsi in 3G a Internet.</span>
Categoria: <span itemprop=”category”>Hardware</span>
Prezzo: <span itemprop=”price”>€ 399,00</span>
</div>
