Con l'avvento dell'HTML5 sono cambiate molte cose. Tra queste anche la possibilità di strutturare e rendere accessibile il contenuto delle noste pagine HTML5.

L'avvento di tag come "footer", "aside", "nav", ecc.. non ha fatto altro che permettere di suddividere "semanticamente" un documento. Tuttavia questi strumenti potrebbero essere insufficienti se si vuole "scendere in profondità". Perchè questo? Perchè non basta suddividere una pagina HTML nelle giuste sezioni. Anche il contenuto testuale dovrebbe essere "compreso" (ad esempio da Google) in maniera univoca e inequivocabile. Indubbiamente un lavoro certosino e quasi maniacale ma che ci ripagherà degli sforzi profusi. D'altronde i motori di ricerca prediligono dati strutturati per avere informazioni più contingenti possibile con quanto richiesto dall'utente.

Adibiti a svolgere questo tipo di compito, ecco i "microdata".

I microdata sono "delle informazioni" di dati che ci permettono di contrassegnare quanto desideriamo in modo corretto e soprattutto coerente.

Occorre però che queste informazioni siano "condivise" o quanto meno universali. Per questo scopo abbiamo un progetto online molto utile e valido: schema.org.

Questo progetto è la risulante di un accordo a tre tra Google, Yahoo e Bing riguardo i microdata. Al seguente indirizzo potete cominciare a prendere dimestichezza con il progetto e la sua logica: http://www.schema.org/docs/gs.html

Immaginiamo ora di dover creare una pagina HTML di recensioni di album discografici e prendiamo da esempio il seguente snippet:


    <h1>River Of Change</h1>
    <h2>Where Reality Cannot Enter</h2>
    <a href="gleams.mp3">Gleams In The Dark</a>(6:05)
    <a href="memories.mp3"><span i>Memories</span></a>(6:21)
 

A occhio (ovviamente sono stato volutamente sommario nella definizione delle varie parti) la suddivsione ci è chiara. A livello di smentica però un pò meno.

Utilizzando i microdata, saremo in grado di specificare nel dettagli ogni singolo elemento: brano, autore, durata…. e altro ancora, dando come esempio di risultato quanto mostrato nell'immagine sottostante:

Esempio di lettura dei microdati con Google

Anzitutto dalla pagina di scheme.org guardiamo l'elenco delle info che possiamo indicare. Alla seguente pagina (http://www.schema.org/MusicRecording) possiamo individuare quanto ci occorre: titolo, durata, ecc…

Quindi, già il nome del gruppo potrebbe essere "tradotto" così:

<div itemscope itemtype="http://schema.org/MusicGroup">
    <h1 itemprop="name">River Of Change</h1>

"itemscope" permette di indicare (come dice la parola) lo scope di intervento. Quindi "itemprop"  il nome del gruppo tramite il valore "name".

Il titolo del disco potrebbe invece essere specificato così:

 <h2  itemprop="inAlbum">Where Reality Cannot Enter</h2>

tramite il valore "inAlbum".

Ogni singola canzone invece sarebbe bene fosse così definita:

<div itemprop="tracks" itemscope itemtype="http://schema.org/MusicRecording">
    <meta itemprop="url" content ="gleams.mp3">
    <a href="gleams.mp3" itemprop="audio"><span itemprop="name">Gleams In The Dark</span></a>
    <meta itemprop="duration" content="PT6M5S">(6:05)
</div>

Se entriamo quindi nell'ottica dei microdata la lettura è sostanzialmente semplice: url, name, duration,…. sono tutti valori che identificano il dato successivo.

Riguardo alla duration il valore (ad esempio) PT6M5S identifica negli ultimi 4 valori la durata effettiva, cioè 6M (6 minuti) e 5S (5 secondi).

Nel complesso la pagina diventerebbe quindi:

<div itemscope itemtype="http://schema.org/MusicGroup">
    <h1 itemprop="name">River Of Change</h1>

    <h2  itemprop="inAlbum">Where Reality Cannot Enter</h2>
    <div itemprop="tracks" itemscope itemtype="http://schema.org/MusicRecording">
        <meta itemprop="url" content ="gleams.mp3">
        <a href="gleams.mp3" itemprop="audio"><span itemprop="name">Gleams In The Dark</span></a>
        <meta itemprop="duration" content="PT6M5S">(6:05)
     </div>

    <div itemprop="tracks" itemscope itemtype="http://schema.org/MusicRecording">
        <meta itemprop="url" content ="memories.mp3">
        <a href="memories.mp3" itemprop="audio"><span itemprop="name">Memories</span></a>
        <meta itemprop="duration" content="PT6M21S">(6:21)
    </div>
</div>

Da qui potete scaricare il file presentato in questo tutorial

The following two tabs change content below.