Come utilizzare i microdati per il vostro sito
La redazione di IONOS
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.
Un confronto tra i microdati e gli altri formati di markup
Ormai la comunità web concorda sulla necessità di rendere l’HTML più semantico, ma si discute ancora sulla scelta di un formato unico per il markup dei metadati. Originariamente i microdati sono stati introdotti come modulo separato per l’HTML5, in alternativa allo standard dell’epoca RDFa, il formato consigliato dal W3C per la descrizione dei metadati in HTML e XHTML. L’obiettivo era quello di raggiungere una sintassi semplificata a parità di funzioni. Un vantaggio di questo formato è la maggiore compatibilità con l’ultima versione HTML, ma solo con il progetto Schema.org (un’iniziativa promossa dai motori di ricerca Google, Bing, Yahoo e Yandex) i microdati hanno acquistato un maggiore peso, dato che partendo da questi è stato messo a disposizione un vocabolario comune per l’annotazione semantica. Per molto tempo sono stati il formato raccomandato da Google, ma oggi questa preferenza sembra essersi affievolita. Il vocabolario di Schema.org, oltre ai microdati, continua a sostenere il markup con RDFa, mentre cresce l'interesse per il nuovo formato di markup basato su script JSON-LD, anche se Google non lo supporta ancora per tutti i tipi di dati. Così i microdati rimangono ancora attuali.
La sintassi dei microdati
La sintassi dei microdati si basa su coppie di nomi e valori, chiamati “items”, e si sviluppa in 3 passaggi: prima si identifica un elemento e lo si evidenzia come item, che viene assegnato ad un tipo specifico tratto dal vocabolario di Schema.org. Dopo questo secondo passaggio, alla coppia item-type vengono assegnate diverse proprietà (properties). Il markup avviene tramite attributi dell’HTML5, cioè itemscope, itemtype e itemprop:
- itemscope: questo attributo è racchiuso in un tag <div> per definire un’area ben delineata come item, specificato meglio tramite gli attributi itemtype e itemprop.
- itemtype: questo attribuito si può applicare a tutti gli elementi, che sono evidenziati con l’elemento itemscope sulla base di uno schema predefinito. Così, sempre basandosi su Schema.org, è possibile ordinare gli elementi importanti di un sito secondo tipologie generali, che possono essere elaborate da tutti i motori di ricerca comuni.
- itemprop: questo attributo fornisce una proprietà all’itemtype spiegato sopra. Per sapere quali proprietà assegnare ad un itemtype si rimanda al sito di Schema.org.
L’inserimento nel codice HTML di questi attributi avviene seguendo questo schema:
Schema di base del markup con i microdati per un item:
<div itemscope itemtype="http://schema.org/Type">
<span itemprop="Proprietà">Item</span>
</div>Applicazione del markup con i microdati
Anche i microdati, come gli altri formati per il linguaggio semantico dei documenti HTML, si basano su una serie di classici tag HTML, ma in questo caso gli attributi dei microdati sono indipendenti dal tag HTML corrispondente. Per questo i tag HTML come <div> e <span> sono visti come elementi di supporto agli attributi dei microdati perché privi di un proprio valore semantico.
| <div></div> | L’elemento <div> definisce un’area specifica in una nuova riga del testo. Generalmente un itemscope viene introdotto e concluso con questo tag. |
| <span></span> | L’elemento <span> definisce un’area generica inline (all'interno del testo) che non altera la visualizzazione del testo sul browser. Perciò viene utilizzato per mettere in risalto un itemprop. |
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.
Mettere in evidenza gli elementi grafici con i microdati
Un tipico campo di applicazione per il markup semantico dei contenuti delle pagine è rappresentato dal logo dell’azienda. Un visitatore in carne e ossa riconosce subito quale elemento grafico sia il logo dell’azienda, mentre i crawler giungono alla stessa conclusione, solo grazie alle indicazioni fornite dai microdati:
Markup di un logo aziendale:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.sitoaziendale.it/">Homepage</a>
<img itemprop="logo" src="http://www.sitoaziendale.it/logo.png" />
</div>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:
Markup di un marchio:
<div itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Nome del marchio</span>
<img itemprop="logo" src="http://www.esempiomarchio.it/logo.png" />
</div>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à.
Mettere in evidenza i dati di contatto con i microdati
Oltre al markup degli elementi grafici, per le aziende è particolarmente interessante l’annotazione semantica dei dati di contatto, dato che anche queste informazioni servono per ampliare la visualizzazione nei risultati di ricerca, rappresentati sotto forma di Sidelinks o Knowledge Graph. Il markup dettagliato con i microdati si desume dalle informazioni di contatto basate sul vocabolario di Schema.org:
Markup dei dati di contatto di Google:
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Google.org (GOOG)</span>
Contact Details:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Main address:
<span itemprop="streetAddress">38 avenue de l'Opera</span>
<span itemprop="postalCode">F-75002</span>
<span itemprop="addressLocality">Paris, France</span>
</div>
Tel: <span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
Fax: <span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
E-mail: <span itemprop="email">secretariat(at)google.org</span>
</div>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”.
Mettere in evidenza i contenuti delle pagine con i microdati per generare rich snippet
Il markup semantico di elementi specifici risulta particolarmente importante, se si vuole che il proprio sito compaia nei risultati di ricerca di Google e degli altri motori di ricerca con uno snippet ampliato, cioè il rich snippet. Infatti i motori di ricerca arricchiscono i risultati con informazioni sui prodotti, ricette, recensioni, eventi, software, video e articoli stampa, per fornire agli utenti il maggior numero di informazioni possibili, a condizione che questi contenuti siano ottimizzati per la scansione da parte dei crawler. L’esempio seguente mostra schematicamente come, ricorrendo alla sintassi dei microdati secondo Schema.org, si possano mettere in evidenza le informazioni riguardanti un’offerta per un hotel.
Un'offerta di un hotel su un sito di viaggi fornisce agli interessati informazioni sul nome dell’hotel con una breve descrizione e un’immagine del luogo. Con i microdati taggati secondo Schema.org il codice HTML di queste informazioni basilari viene mostrato nel modo seguente:
Markup delle informazioni basilari di un’offerta per un hotel:
<div itemscope itemtype="http://schema.org/Hotel">
<span itemprop="name">Nome dell’hotel</span>
<span itemprop="description">Descrizione dell‘hotel </span>
<img itemprop="image" src="http://Images/hotel.jpg" />
</div>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.
Markup per l’indicazione dei prezzi dell'hotel:
<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">400 Euro</span>
</div>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:
Markup dettagliato per un’offerta di un hotel:
<div itemscope itemtype="http://schema.org/Hotel">
<span itemprop="name">Nome dell‘hotel</span>
<span itemprop="description">Descrizione dell‘hotel </span>
<img itemprop="image" src="http://Images/hotel.jpg" />
<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">400 Euro</span>
</div>
<span itemprop="paymentAccepted">Bonifico, carta di credito, ecc.</span>
<span itemprop="map">URL della mappa</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Titolo della recensione </span>
<span itemprop="author">Autore</span>
<span itemprop="reviewBody">Testo della recensione</span>
<span itemprop="datePublished">Data di pubblicazione della recensione</span>
</div>
</div>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:
Markup per una recensione con valutazione:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
<span itemprop="name">Nome dell’hotel</span>
</div>
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">4</span>
</span> stars -
<b>"<span itemprop="name">Titolo della recensione</span>"</b>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Autore</span>
</span>
<span itemprop="reviewBody">Testo della recensione</span>
</div>Mettere in evidenza i breadcrumbs con i microdati
Un’altra possibilità per visualizzare più informazioni nelle SERPs è offerta dai breadcrumbs (letteralmente “briciole di pane”); in questo modo si segnala la struttura di navigazione di un sito tramite linguaggio di markup, che dà all’utente la possibilità di conoscere la posizione precisa di una pagina all’interno del sito. Il codice seguente mostra un tipico esempio per l’integrazione dei breadcrumbs in HTML:
Markup in HTML dei breadcrumbs
<ol>
<li>
<a href="http://www.servizio.it/hotel/">Hotel</a>
</li>
<li>
<a href="http://www.servizio.it/hotel/francia/">Hotel in Francia</a>
</li>
<li>
<a href="http://www.servizio.it/hotel/francia/parigi/">Hotel a Parigi</a>
</li>
<ol>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:
Markup dei microdati per breadcrumbs secondo Schema.org
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.servizio.it/hotel/">
<span itemprop="name">Hotel</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.servizio.it/hotel/francia/">
<span itemprop="name">Hotel in Francia</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.servizio.it/hotel/francia/parigi/">
<span itemprop="name">Hotel a Parigi</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>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.
