Informazioni sui microformati

Markup dei dati con i microformati

I microformati sono semplici convenzioni (note come entità) utilizzate nelle pagine web per descrivere uno specifico tipo di informazioni (ad esempio una recensione, un evento, un prodotto, un'azienda o una persona). Ogni entità possiede delle proprietà. Ad esempio, una persona ha proprietà quali nome (name), indirizzo (address), qualifica lavorativa (title), azienda e indirizzo email.

In generale, i microformati utilizzano l'attributo class nei tag HTML (spesso <span> o <div>) per assegnare nomi brevi e descrittivi alle entità e alle loro 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>
   <img src="www.example.com/robertosacchi.jpg" />
   
   <strong>Roberto Sacchi</strong>
   
   Senior editor presso ACME Reviews
   
   200 Main St
   
   Desertville, AZ 12345

</div>

Di seguito vengono presentati gli stessi contenuti HTML sottoposti a markup con il microformato hCard (per persone).

<div class="vcard">
   <img class="photo" src="www.example.com/robertosacchi.jpg" />
   
   <strong class="fn">Roberto Sacchi</strong>
   
   <span class="title">Senior editor</span> presso <span class="org">ACME Reviews</span>
   
   <span class="adr">
      <span class="street-address">200 Main St</span>
      
      <span class="locality">Desertville</span>, <span class="region">AZ</span>
      
      <span class="postal-code">12345</span>
   
   </span>
</div> 

Ecco come funziona questo codice di esempio.

  • Nella prima riga, class="vcard" indica che il codice HTML racchiuso tra i tag <div> descrive una persona. (Il microformato utilizzato per descrivere le persone è denominato hCard e nel codice HTML vi si fa riferimento in questo modo: vcard. Non si tratta di un errore ortografico).
  • Il codice di esempio descrive le proprietà dell'elemento "persona", come una foto, nome, qualifica, organizzazione e indirizzo. Per assegnare un'etichetta alle proprietà della persona descritte da vcard, a ogni elemento contenente una di queste proprietà (come <span>, <img> o <title>) viene assegnato un attributo class che indica una proprietà. Ad esempio, fn descrive il nome di una persona; title descrive la sua qualifica lavorativa (l'articolo del Centro assistenza relativo a ogni tipo di informazione include un elenco completo delle proprietà riconosciute).
  • Le proprietà possono contenere altre proprietà. Nell'esempio precedente, la proprietà adr descrive l'indirizzo della persona e include le sottoproprietà street-address, locality, region e postal-code.

Microformati nidificati

È comune che un microformato (ad esempio una recensione) ne contenga un altro (ad esempio le informazioni di contatto dell'autore della recensione). La seguente recensione di esempio include informazioni sulla qualifica lavorativa e il datore di lavoro di Roberto Sacchi.

<div>
   <strong>Recensione gioco Blast 'Em Up</strong>
   
   Di Roberto Sacchi, Senior Editor presso ACME Reviews
   
   Voto: 4,5 su 5
   
   È un gioco fantastico.  Mi sono divertito dalla
   battaglia iniziale allo scontro finale con gli alieni cattivi.
</div>

Di seguito viene presentato lo stesso codice HTML sottoposto a markup con i microformati hReview (per recensioni) e hCard (per persone). Per rappresentare le informazioni sull'autore della recensione Roberto, il microformato hCard (per persone) è nidificato nel microformato hReview (per recensioni).

<div class="hreview">
   <span class="item">
      
      <strong class="item"><span class="fn">Recensione gioco</span> Blast 'Em Up</strong>
   
   </span>
   <span class="reviewer vcard">
      
      Di <span class="fn">Roberto Sacchi</span>, <span class="title">Senior Editor</span>
      
      presso <span class="org">ACME Reviews</span>
   
   </span>
   Voto: <span class="rating">4,5</span> su 5.
   
   <span class="description">È un gioco fantastico.  Mi sono divertito dalla
   battaglia iniziale allo scontro finale con gli alieni cattivi.</span>
</div>

Ecco come funziona questo codice di esempio.

  • Le recensioni sono descritte dal microformato hReview, a cui nel codice si fa riferimento nel seguente modo: class="hreview". Trattandosi di una recensione, tutto il blocco di codice HTML è incluso nei tag div con l'attributo class="hreview".
  • Per identificare l'autore della recensione, puoi utilizzare span class="reviewer". Tuttavia, in questo caso vogliamo fornire informazioni aggiuntive sull'autore della recensione utilizzando il microformato vcard (per persone). Puoi farlo inserendo reviewer e vcard sulla stessa riga, separati da uno spazio, in questo modo: <span class="reviewer vcard">. Le proprietà di vcard fn, title e org descrivono il nome, la qualifica lavorativa di Roberto e l'organizzazione per cui lavora.

Per ulteriori esempi, consulta l'articolo Entità nidificate.

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.

Tuttavia, 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, fornendo latitudine e longitudine di un luogo puoi aiutare Google a verificare che esso sia correttamente mappato; fornendo la data di un evento nel formato di data ISO puoi fare in modo che la data venga visualizzata correttamente nei risultati di ricerca. In questo caso puoi utilizzare il value class pattern dei microformati. Considera questo esempio:

<span class="dtstart">
   
   <span class="value-title" title="2009-10-15T19:00-08:00" />

15 ottobre, 19:00

</span>

Includendo <span class="value-title" title="2009-10-15T19:00-08:00" /> nel blocco con l'etichetta class="dtstart", indichi che l'analizzatore sintattico di rich snippet deve utilizzare il valore nell'attributo title per trovare la data di inizio dell'evento. La data nell'attributo title può essere rappresentata utilizzando il formato di data ISO senza influire sul modo in cui la data viene mostrata agli utenti.

Per il vocabolario ed esempi specifici, visita:

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