Informazioni sui microdati

La specifica dei microdati HTML5 consente di assegnare un'etichetta ai contenuti per descrivere un tipo di informazione specifico, ad esempio recensioni, informazioni sulle persone o eventi. Ogni tipo di informazione descrive uno specifico tipo di elemento, come una persona, un evento o una recensione. Ad esempio, un evento ha proprietà quali il luogo, l'ora di inizio, il nome e la categoria.

I microdati utilizzano semplici attributi nei tag HTML (spesso <span> o <div>) per assegnare nomi brevi e descrittivi a elementi e proprietà. Di seguito viene presentato un esempio relativo a un breve blocco di codice HTML che mostra le informazioni di contatto di base di Roberto Sacchi.

<div> 
  Mi chiamo Roberto Sacchi, ma tutti mi chiamano Bob. Questa è la mia home page:
  <a href="http://www.example.com">www.example.com</a>
  Ho una casa ad Albenga (Liguria) e lavoro come ingegnere per la ACME Corp.
</div>

Di seguito viene presentato lo stesso codice HTML sottoposto a markup con i microdati.

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  Mi chiamo <span itemprop="name">Roberto Sacchi</span> 
  ma tutti mi chiamano <span itemprop="nickname">Bob</span>. 
  Questa è la mia home page:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  Ho una casa ad Albenga (Liguria) e lavoro come <span itemprop="title">ingegnere</span>
  per la <span itemprop="affiliation">ACME Corp</span>.
</div>

Ecco come funziona questo codice di esempio.

  • Nella prima riga, itemscope indica che i contenuti racchiusi tra i tag <div> sono un elemento. itemtype="http://data-vocabulary.org/Person indica che l'elemento è una persona.
  • Ogni proprietà dell'elemento Person (persona) viene identificata con l'attributo itemprop. Ad esempio, itemprop="name" descrive il nome della persona.

Entità nidificate

L'esempio precedente mostra le informazioni di contatto di Roberto Sacchi ma non è compreso il suo indirizzo. L'esempio seguente mostra lo stesso codice HTML, ma in questo caso include la proprietà address.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   Mi chiamo <span itemprop="name">Roberto Sacchi</span>, 
   ma tutti mi chiamano <span itemprop="nickname">Bob</span>.
   Questa è la mia home page: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Ho una casa ad 
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="locality">Albenga</span> 
      <span itemprop="region">(Liguria)</span> 
   </span>
   e lavoro come <span itemprop="title">ingegnere</span>
   per la <span itemprop="affiliation">ACME Corp</span>.
</div>

Ecco come funziona questo codice di esempio:

  • La proprietà address è essa stessa un elemento contenente il proprio gruppo di proprietà. Ciò viene indicato aggiungendo l'attributo itemscope all'elemento che dichiara la proprietà address e utilizzando l'attributo itemtype per specificare il tipo di elemento descritto, in questo modo: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Per ulteriori esempi, consulta l'articolo Elementi nidificati.

Elementi a cui viene fatto riferimento

Puoi definire un elemento in una posizione e farvi riferimento da una o più posizioni diverse. L'esempio seguente descrive un indirizzo, quindi elenca due persone (Roberto e Maria Sacchi) che vivono a tale indirizzo.

<div id="smith-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
   <span itemprop="locality">Albenga</span>, 
   <span itemprop="region">(Liguria)</span> 
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="smith-address">
   Mi chiamo <span itemprop="name">Roberto Sacchi</span>, 
   ma tutti mi chiamano <span itemprop="nickname">Bob</span>.
   Questa è la mia home page: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Lavoro come <span itemprop="title">ingegnere</span>
   per la <span itemprop="affiliation">ACME Corp</span>.
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="smith-address">
   Mi chiamo <span itemprop="name">Maria Sacchi</span>.
</div>

Ecco come funziona questo codice di esempio:

  • Il codice HTML che definisce l'elemento address include un attributo id, come segue: <div id="smith-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
  • Gli elementi person relativi a Roberto e Maria Sacchi fanno riferimento all'indirizzo includendo un attributo itemref e specificando l'id dell'indirizzo, come segue: <div itemscope itemtype="http://data-vocabulary.org/Person" itemref="smith-address">.

Informazioni su data e ora

Per specificare date e orari in modo non ambiguo, utilizza l'elemento time con l'attributo datetime. Nell'esempio, la proprietà startDate indica la data di inizio di un evento. Il valore dell'attributo datetime viene specificato utilizzando il formato di data ISO. L'impiego di questo formato consente di fornire ai motori di ricerca data, ora dettagliate e (facoltativamente) il fuso orario in formato ISO ("2009-10-15T19:00-08:00"), continuando a visualizzare la data nella pagina in un modo semplice per gli utenti ("15 ottobre 2009, 19:00").

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15 ottobre 2009, 19:00</time>

Contenuti non visibili

In genere Google non mostra all'utente i contenuti che non sono visibili. In altre parole, non mostriamo i contenuti agli utenti in un solo modo e utilizziamo il testo nascosto per eseguire il markup delle informazioni per i motori di ricerca e per le applicazioni web separatamente. È necessario eseguire il markup del testo effettivamente mostrato agli utenti quando questi visitano le tue pagine web.

Esistono però alcune eccezioni a queste linee guida. In alcune situazioni, può essere utile fornire ai motori di ricerca informazioni più dettagliate, anche se non desideri che vengano visualizzate dai visitatori della tua pagina. Ad esempio, se un ristorante ha un voto di 8,5, gli utenti (ma non i motori di ricerca) supporranno che il voto si basi su una scala da 1 a 10. In tal caso, puoi indicare tale aspetto utilizzando l'elemento meta in questo modo:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   Voto: <span itemprop="value">8,5</span>
   <meta itemprop="best" content="10" />
</div>

Ecco come funziona questo codice di esempio:

  • Il meta tag serve per specificare informazioni aggiuntive non visibili nella pagina, in questo caso il fatto che il "miglior voto possibile" è 10. Il valore della proprietà viene specificato utilizzando l'attributo content.

Analogamente, l'indicazione della durata di un evento in formato di durata ISO può contribuire a garantire che essa venga visualizzata correttamente nei risultati di ricerca, in questo modo:

Duration: 
<span>1 ora 30 minuti<meta itemprop="duration" content="PT1H30M" />
</span>

Ecco come funziona questo codice di esempio:

  • Utilizza il meta tag per specificare il valore della proprietà (in questo caso una durata). Ciò ti consente di utilizzare il valore dell'attributo content ("PT1H30M") per specificare la durata in formato di durata ISO 8601 pur continuando a visualizzare la durata con un testo di facile lettura per gli utenti ("1 ora 30 minuti") nella pagina stessa.
  • Google esamina l'elemento principale dell'elemento meta per identificare le informazioni rappresentate in modo alternativo nel meta tag. Quindi, in questo caso, è importante assicurarsi che il nodo principale diretto del meta tag racchiuda il testo "1 ora 30 minuti".

Per conoscere la terminologia specifica e vedere alcuni esempi, leggi:

Per controllare il tuo markup, utilizza lo strumento di test per i dati strutturati.