I microdati sono una spe­ci­fi­ca­zio­ne HTML5 della community WHATWG (Web Hypertext Ap­pli­ca­tion Tech­no­lo­gy Working Group). Il formato mette a di­spo­si­zio­ne una meta-sintassi per il markup dei dati strut­tu­ra­ti, che consente ai webmaster di ar­ric­chi­re i contenuti con i metadati, rendendo leggibili le relazioni se­man­ti­che per i motori di ricerca. Questi metadati sono il punto di partenza per mostrare dei risultati ampliati nelle SERPs o per per­met­te­re l’analisi dei contenuti di un sito tramite strumenti per non vedenti, quali gli screen reader. Inoltre i dati strut­tu­ra­ti sono par­ti­co­lar­men­te im­por­tan­ti ai fini dell’ot­ti­miz­za­zio­ne per i motori di ricerca, visto che le an­no­ta­zio­ni se­man­ti­che agevolano l’in­di­ciz­za­zio­ne di un sito e per­met­to­no di vi­sua­liz­zar­lo nei risultati di ricerca con in­for­ma­zio­ni ag­giun­ti­ve. Per strut­tu­ra­re i dati, i microdati si ap­pog­gia­no sul vo­ca­bo­la­rio 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. Ori­gi­na­ria­men­te i microdati sono stati in­tro­dot­ti come modulo separato per l’HTML5, in al­ter­na­ti­va allo standard dell’epoca RDFa, il formato con­si­glia­to dal W3C per la de­scri­zio­ne dei metadati in HTML e XHTML. L’obiettivo era quello di rag­giun­ge­re una sintassi sem­pli­fi­ca­ta a parità di funzioni. Un vantaggio di questo formato è la maggiore com­pa­ti­bi­li­tà con l’ultima versione HTML, ma solo con il progetto Schema.org (un’ini­zia­ti­va promossa dai motori di ricerca Google, Bing, Yahoo e Yandex) i microdati hanno ac­qui­sta­to un maggiore peso, dato che partendo da questi è stato messo a di­spo­si­zio­ne un vo­ca­bo­la­rio comune per l’an­no­ta­zio­ne semantica. Per molto tempo sono stati il formato rac­co­man­da­to da Google, ma oggi questa pre­fe­ren­za sembra essersi af­fie­vo­li­ta. Il vo­ca­bo­la­rio di Schema.org, oltre ai microdati, continua a sostenere il markup con RDFa, mentre cresce l'in­te­res­se 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 iden­ti­fi­ca un elemento e lo si evidenzia come item, che viene assegnato ad un tipo specifico tratto dal vo­ca­bo­la­rio di Schema.org. Dopo questo secondo passaggio, alla coppia item-type vengono assegnate diverse proprietà (pro­per­ties). 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, spe­ci­fi­ca­to meglio tramite gli attributi itemtype e itemprop.

  • itemtype: questo at­tri­bui­to si può applicare a tutti gli elementi, che sono evi­den­zia­ti con l’elemento itemscope sulla base di uno schema pre­de­fi­ni­to. Così, sempre basandosi su Schema.org, è possibile ordinare gli elementi im­por­tan­ti 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’in­se­ri­men­to 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>

Ap­pli­ca­zio­ne del markup con i microdati

Anche i microdati, come gli altri formati per il lin­guag­gio semantico dei documenti HTML, si basano su una serie di classici tag HTML, ma in questo caso gli attributi dei microdati sono in­di­pen­den­ti dal tag HTML cor­ri­spon­den­te. 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. Ge­ne­ral­men­te un itemscope viene in­tro­dot­to e concluso con questo tag.
<span></span> L’elemento <span> definisce un’area generica inline (al­l'in­ter­no del testo) che non altera la vi­sua­liz­za­zio­ne del testo sul browser. Perciò viene uti­liz­za­to per mettere in risalto un itemprop.

Ge­ne­ral­men­te i metadati si possono integrare in tutti i tag HTML grazie agli attributi dei microdati. Gli esempi seguenti mostrano l’in­se­ri­men­to dei metadati nei tag <div> e <span>, nei col­le­ga­men­ti iper­te­stua­li, negli elementi grafici e negli elementi per le liste.

Mettere in evidenza gli elementi grafici con i microdati

Un tipico campo di ap­pli­ca­zio­ne per il markup semantico dei contenuti delle pagine è rap­pre­sen­ta­to dal logo dell’azienda. Un vi­si­ta­to­re in carne e ossa riconosce subito quale elemento grafico sia il logo dell’azienda, mentre i crawler giungono alla stessa con­clu­sio­ne, solo grazie alle in­di­ca­zio­ni 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 pre­sen­ta­to un nuovo elemento <div>, che comprende nella riga 02 sia l’URL sia il codice HTML per l'e­le­men­to grafico inserito nella riga 03. Il tag <div> è segnalato dall’attributo itemscope come elemento a supporto dell’in­for­ma­zio­ne, mentre l’attributo itemtype rimanda al tipo “Or­ga­ni­za­tion” secondo lo standard di Schema.org. In questo modo viene co­mu­ni­ca­to al crawler che gli elementi racchiusi in un tag <div> con­ten­go­no in­for­ma­zio­ni sull’azienda. Inoltre all’itemtype sono assegnate le proprietà “url” e “logo” indicate con i ri­spet­ti­vi valori. Il motore di ricerca riconosce così l'e­le­men­to grafico come logo aziendale e lo associa con il sito dell’azienda, oltre che uti­liz­zar­lo 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 è con­tras­se­gna­to 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 è par­ti­co­lar­men­te in­te­res­san­te l’an­no­ta­zio­ne semantica dei dati di contatto, dato che anche queste in­for­ma­zio­ni servono per ampliare la vi­sua­liz­za­zio­ne nei risultati di ricerca, rap­pre­sen­ta­ti sotto forma di Sidelinks o Knowledge Graph. Il markup det­ta­glia­to con i microdati si desume dalle in­for­ma­zio­ni di contatto basate sul vo­ca­bo­la­rio 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 “Or­ga­ni­za­tion”. A questo vengono assegnati tramite diversi attributi itemprop le proprietà “name”, “address”, “telephone”, “faxNumber” e “email” con i ri­spet­ti­vi valori. Fin qui lo schema rimane lo stesso degli esempi pre­ce­den­ti. Un caso par­ti­co­la­re è presente nella riga 04: la sintassi dei microdati prevede che il valore di una proprietà possa essere anche un item. Qui le in­di­ca­zio­ni sotto “Main address” vengono annidate tramite un secondo elemento <div> con un proprio itemscope e “Po­sta­lAd­dress” è definito come itemtype secondo Schema.org, meglio spe­ci­fi­ca­to tramite le proprietà “stree­tAd­dress”, “po­stal­Co­de” e “ad­dres­sLo­ca­li­ty”.

Mettere in evidenza i contenuti delle pagine con i microdati per generare rich snippet

Il markup semantico di elementi specifici risulta par­ti­co­lar­men­te im­por­tan­te, 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 ar­ric­chi­sco­no i risultati con in­for­ma­zio­ni sui prodotti, ricette, re­cen­sio­ni, eventi, software, video e articoli stampa, per fornire agli utenti il maggior numero di in­for­ma­zio­ni possibili, a con­di­zio­ne che questi contenuti siano ot­ti­miz­za­ti per la scansione da parte dei crawler. L’esempio seguente mostra sche­ma­ti­ca­men­te come, ri­cor­ren­do alla sintassi dei microdati secondo Schema.org, si possano mettere in evidenza le in­for­ma­zio­ni ri­guar­dan­ti un’offerta per un hotel.

Un'of­fer­ta di un hotel su un sito di viaggi fornisce agli in­te­res­sa­ti in­for­ma­zio­ni sul nome dell’hotel con una breve de­scri­zio­ne e un’immagine del luogo. Con i microdati taggati secondo Schema.org il codice HTML di queste in­for­ma­zio­ni basilari viene mostrato nel modo seguente:

Markup delle in­for­ma­zio­ni 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 pre­de­fi­ni­to "hotel". A questo sono assegnati dalla riga 02 alla 04 le proprietà con i ri­spet­ti­vi valori, cioè “name”, “de­scrip­tion” e “image”.

A questa struttura di base possono essere aggiunte un numero in­de­fi­ni­to di in­for­ma­zio­ni, indicate con itemprops o item­sco­pes su­bor­di­na­ti; bisogna però tenere presente che gli elementi <div> su­bor­di­na­ti devono essere po­si­zio­na­ti all’interno del tag <div> dell’itemscope so­vraor­di­na­to. Il seguente codice amplia l’an­no­ta­zio­ne semantica per le offerte del­l'ho­tel con l’in­di­ca­zio­ne del prezzo.

Markup per l’in­di­ca­zio­ne dei prezzi del­l'ho­tel: 

<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
    <span itemprop="price">400 Euro</span>
</div>

Nella riga 01 viene in­tro­dot­ta la proprietà “ma­keOf­fers” (fare offerte) e “Offer” (offerta) viene indicato con l'e­le­men­to itemtype. Una ca­rat­te­ri­sti­ca propria delle offerte è che hanno un prezzo, inserito nella riga 02 con l'i­tem­prop “price” e spe­ci­fi­ca­to con il valore di “400 Euro”.

Inoltre si possono anche mettere in evidenza le in­for­ma­zio­ni sulle modalità di pagamento (itemprop="pay­men­tAc­cep­ted"), sulla posizione (itemprop="map") e sulle re­cen­sio­ni (itemprop="reviews"). In­te­gran­do questi elementi nella struttura di base si ottiene il seguente markup:

Markup det­ta­glia­to 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 so­vraor­di­na­to per le in­for­ma­zio­ni suc­ces­si­ve che si estendono fino alla riga 15; a queste seguono le in­for­ma­zio­ni di base quali nome, de­scri­zio­ne e immagine, con­tras­se­gna­te come proprietà (itemprops) dell’item "hotel". Il markup del prezzo dell’hotel avviene dalla riga 05 alla 07 tramite l’attributo itemscope su­bor­di­na­to “offer”. Seguono le modalità di pagamento e le in­di­ca­zio­ni della posizione assegnate all’item so­vraor­di­na­to “hotel”. Le in­for­ma­zio­ni contenute dalla riga 10 alla 15 vengono con­tras­se­gna­te con un altro itemscope su­bor­di­na­to e con l’itemtype “review”, ap­par­te­nen­te alla tipologia re­cen­sio­ne, messe in evidenza con gli itemprops titolo, in­for­ma­zio­ni sull’autore, testo della re­cen­sio­ne e data di pub­bli­ca­zio­ne.

Se una re­cen­sio­ne di un hotel deve comparire nei rich snippet con un sistema di va­lu­ta­zio­ne a stelle, si applica il seguente markup:

Markup per una re­cen­sio­ne con va­lu­ta­zio­ne: 

<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 brea­d­crumbs con i microdati

Un’altra pos­si­bi­li­tà per vi­sua­liz­za­re più in­for­ma­zio­ni nelle SERPs è offerta dai brea­d­crumbs (let­te­ral­men­te “briciole di pane”); in questo modo si segnala la struttura di na­vi­ga­zio­ne di un sito tramite lin­guag­gio di markup, che dà all’utente la pos­si­bi­li­tà di conoscere la posizione precisa di una pagina all’interno del sito. Il codice seguente mostra un tipico esempio per l’in­te­gra­zio­ne dei brea­d­crumbs in HTML: 

Markup in HTML dei brea­d­crumbs 

<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 sot­to­pa­gi­ne di un sito. Per mettere in evidenza questa struttura di na­vi­ga­zio­ne per i programmi come browser o crawler, si può uti­liz­za­re il seguente markup con i microdati secondo Schema.org:

Markup dei microdati per brea­d­crumbs 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 “Brea­d­crum­bLi­st”. Per ogni posizione della struttura di na­vi­ga­zio­ne viene pre­sen­ta­to un itemscope specifico con un itemtype “ListItem”. Ad ogni ListItem dei brea­d­crumbs sono assegnati gli itemprops (proprietà) “name”, “item” e “position”, che indicano con i valori cor­ri­spon­den­ti il nome, l’URL e la posizione di un elemento nei brea­d­crumbs, pre­sen­ta­ti così in una forma leggibile dai motori di ricerca.

Vai al menu prin­ci­pa­le