Come utilizzare i microdati per il vostro sito

I microdati sono una specificazione HTML5 della community WHATWG (Web Hypertext Application Technology Working Group). Il formato mette a disposizione una meta-sintassi per il markup dei dati strutturati, che consente ai webmaster di arricchire i contenuti con i metadati, rendendo leggibili le relazioni semantiche per i motori di ricerca.

Questi metadati sono il punto di partenza per mostrare dei risultati ampliati nelle SERPs o per permettere l’analisi dei contenuti di un sito tramite strumenti per non vedenti, quali gli screen reader. Inoltre i dati strutturati sono particolarmente importanti ai fini dell’ottimizzazione per i motori di ricerca, visto che le annotazioni semantiche agevolano l’indicizzazione di un sito e permettono di visualizzarlo nei risultati di ricerca con informazioni aggiuntive. Per strutturare i dati, i microdati si appoggiano sul vocabolario di Schema.org.

Generalmente i metadati si possono integrare in tutti i tag HTML grazie agli attributi dei microdati. Gli esempi seguenti mostrano l’inserimento dei metadati nei tag <div> e <span>, nei collegamenti ipertestuali, negli elementi grafici e negli elementi per le liste.

Nella riga 01 viene presentato un nuovo elemento <div>, che comprende nella riga 02 sia l’URL sia il codice HTML per l'elemento grafico inserito nella riga 03. Il tag <div> è segnalato dall’attributo itemscope come elemento a supporto dell’informazione, mentre l’attributo itemtype rimanda al tipo “Organization” secondo lo standard di Schema.org. In questo modo viene comunicato al crawler che gli elementi racchiusi in un tag <div> contengono informazioni sull’azienda. Inoltre all’itemtype sono assegnate le proprietà “url” e “logo” indicate con i rispettivi valori. Il motore di ricerca riconosce così l'elemento grafico come logo aziendale e lo associa con il sito dell’azienda, oltre che utilizzarlo per generare un Knowledge Graph, come nel caso di Google.

Nel caso si tratti di un marchio si potrebbe applicare il markup seguente di Schema.org:

L’elemento all’interno di un itemscope è contrassegnato secondo Schema.org come "Brand”; il nome del marchio e il percorso in cui è stato salvato il logo sono invece indicati come proprietà.

Nella riga 01 l’attributo itemtype definisce l’elemento, racchiuso nel tag <div>, dalle righe 01 a 13 come “Organization”. A questo vengono assegnati tramite diversi attributi itemprop le proprietà “name”, “address”, “telephone”, “faxNumber” e “email” con i rispettivi valori. Fin qui lo schema rimane lo stesso degli esempi precedenti. Un caso particolare è presente nella riga 04: la sintassi dei microdati prevede che il valore di una proprietà possa essere anche un item. Qui le indicazioni sotto “Main address” vengono annidate tramite un secondo elemento <div> con un proprio itemscope e “PostalAddress” è definito come itemtype secondo Schema.org, meglio specificato tramite le proprietà “streetAddress”, “postalCode” e “addressLocality”.

L’attributo itemtype nella riga 01 si riferisce allo schema predefinito "hotel". A questo sono assegnati dalla riga 02 alla 04 le proprietà con i rispettivi valori, cioè “name”, “description” e “image”.

A questa struttura di base possono essere aggiunte un numero indefinito di informazioni, indicate con itemprops o itemscopes subordinati; bisogna però tenere presente che gli elementi <div> subordinati devono essere posizionati all’interno del tag <div> dell’itemscope sovraordinato. Il seguente codice amplia l’annotazione semantica per le offerte dell'hotel con l’indicazione del prezzo.

Nella riga 01 viene introdotta la proprietà “makeOffers” (fare offerte) e “Offer” (offerta) viene indicato con l'elemento itemtype. Una caratteristica propria delle offerte è che hanno un prezzo, inserito nella riga 02 con l'itemprop “price” e specificato con il valore di “400 Euro”.

Inoltre si possono anche mettere in evidenza le informazioni sulle modalità di pagamento (itemprop="paymentAccepted"), sulla posizione (itemprop="map") e sulle recensioni (itemprop="reviews"). Integrando questi elementi nella struttura di base si ottiene il seguente markup:

Nella riga 01 l’item “hotel” viene definito come schema sovraordinato per le informazioni successive che si estendono fino alla riga 15; a queste seguono le informazioni di base quali nome, descrizione e immagine, contrassegnate come proprietà (itemprops) dell’item "hotel". Il markup del prezzo dell’hotel avviene dalla riga 05 alla 07 tramite l’attributo itemscope subordinato “offer”. Seguono le modalità di pagamento e le indicazioni della posizione assegnate all’item sovraordinato “hotel”. Le informazioni contenute dalla riga 10 alla 15 vengono contrassegnate con un altro itemscope subordinato e con l’itemtype “review”, appartenente alla tipologia recensione, messe in evidenza con gli itemprops titolo, informazioni sull’autore, testo della recensione e data di pubblicazione.

Se una recensione di un hotel deve comparire nei rich snippet con un sistema di valutazione a stelle, si applica il seguente markup:

L’esempio mostra una lista (ordered list, ol), che contiene i link alle diverse sottopagine di un sito. Per mettere in evidenza questa struttura di navigazione per i programmi come browser o crawler, si può utilizzare il seguente markup con i microdati secondo Schema.org:

Il tag <ol> viene definito come item con l’attributo itemscope e assegnato tramite itemtype allo schema “BreadcrumbList”. Per ogni posizione della struttura di navigazione viene presentato un itemscope specifico con un itemtype “ListItem”. Ad ogni ListItem dei breadcrumbs sono assegnati gli itemprops (proprietà) “name”, “item” e “position”, che indicano con i valori corrispondenti il nome, l’URL e la posizione di un elemento nei breadcrumbs, presentati così in una forma leggibile dai motori di ricerca.