HTML5 - Microdati

I microdati sono un modo standardizzato per fornire semantica aggiuntiva nelle tue pagine web.

Microdata ti consente di definire i tuoi elementi personalizzati e iniziare a incorporare proprietà personalizzate nelle tue pagine web. Ad un livello elevato, i microdati sono costituiti da un gruppo di coppie nome-valore.

I gruppi vengono chiamati itemse ogni coppia nome-valore è un file property. Gli elementi e le proprietà sono rappresentati da elementi regolari.

Esempio

Per creare un elemento, il file itemscope viene utilizzato l'attributo.
Per aggiungere una proprietà a un elemento, il itemprop l'attributo è utilizzato su uno dei discendenti dell'articolo.

Qui ci sono due elementi, ognuno dei quali ha la proprietà "nome":

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

Le proprietà generalmente hanno valori che sono stringhe ma possono avere i seguenti tipi di dati:

Attributi globali

Microdata introduce cinque attributi globali che sarebbero disponibili per qualsiasi elemento da utilizzare e forniscono un contesto per le macchine sui dati.

Sr.No.	Attributo e descrizione
1	itemscope Viene utilizzato per creare un oggetto. L'attributo itemscope è un attributo booleano che dice che ci sono Microdati su questa pagina, ed è qui che inizia.
2	itemtype Questo attributo è un URL valido che definisce l'elemento e fornisce il contesto per le proprietà.
3	itemid Questo attributo è l'identificatore globale dell'articolo.
4	itemprop Questo attributo definisce una proprietà dell'articolo.
5	itemref Questo attributo fornisce un elenco di elementi aggiuntivi di cui eseguire la scansione per trovare le coppie nome-valore dell'elemento.

Tipi di dati delle proprietà

Le proprietà generalmente hanno valori che sono stringhe come menzionato nell'esempio precedente, ma possono anche avere valori che sono URL. L'esempio seguente ha una proprietà, "immagine", il cui valore è un URL:

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Le proprietà possono anche avere valori che sono date, ore o date e ore. Ciò si ottiene utilizzando iltime elemento e il suo datetime attributo.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

Le proprietà possono anche essere gruppi di coppie nome-valore, inserendo l'attributo itemscope sull'elemento che dichiara la proprietà.

Supporto API per microdati

Se un browser supporta l'API dei microdati HTML5, sarà presente una funzione getItems () sull'oggetto documento globale. Se il browser non supporta i microdati, la funzione getItems () non sarà definita.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr non supporta ancora il controllo dell'API dei microdati, quindi dovrai utilizzare la funzione come quella sopra elencata.

Lo standard dei microdati HTML5 include sia il markup HTML (principalmente per i motori di ricerca) che una serie di funzioni DOM (principalmente per i browser).

Puoi includere il markup dei microdati nelle tue pagine web e i motori di ricerca che non comprendono gli attributi dei microdati li ignoreranno. Ma se devi accedere o manipolare i microdati tramite il DOM, dovrai verificare se il browser supporta l'API DOM dei microdati.

Definizione del vocabolario dei microdati

Per definire il vocabolario dei microdati è necessario un URL dello spazio dei nomi che punti a una pagina web funzionante. Ad esempio, https://data-vocabulary.org/Person può essere utilizzato come spazio dei nomi per un vocabolario di microdati personale con le seguenti proprietà denominate:

name - Nome della persona come una semplice stringa
Photo - Un URL a un'immagine della persona.
URL - Un sito web appartenente alla persona.

L'utilizzo delle proprietà dei microdati di una persona potrebbe essere il seguente:

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

Google supporta i microdati come parte del proprio programma Rich Snippet. Quando il web crawler di Google analizza la tua pagina e trova le proprietà dei microdati conformi al vocabolario http://datavocabulary.org/Person, analizza tali proprietà e le memorizza insieme al resto dei dati della pagina.

Puoi testare l'esempio sopra utilizzando lo strumento di test dei rich snippet utilizzando http://www.tutorialspoint.com/html5/microdata.htm

Per ulteriori sviluppi su Microdata puoi sempre fare riferimento a HTML5 Microdata .