Informazioni sui microdati

La specifica dei microdati HTML5 è un modo per assegnare etichette ai contenuti al fine di descrivere un tipo specifico di informazioni (ad esempio recensioni, informazioni su 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 persona è 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 includono 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 è a sua volta un elemento contenente un proprio insieme 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.

Informazioni su data e ora

Per specificare date e orari in modo non ambiguo, utilizza l'elemento time con l'attributo datetime. Qui la proprietà startDate indica la data di inizio di un evento. Il valore nell'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 cerca l'elemento principale dell'elemento meta per identificare le informazioni rappresentate in un modo alternativo all'interno del meta tag. Quindi, in questo caso, è importante assicurarsi che il nodo principale diretto del meta tag racchiuda il testo "1 ora 30 minuti".

Per il vocabolario ed esempi specifici, visita:

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