Strumenti per i Webmaster

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 
   
  <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>.
  
  I miei amici:
  <a href="http://davide-blog.example.com" rel="friend">Davide</a>, 
   
  <a href="http://elena-blog.example.com" rel="friend">Elena</a>

</div>

Ecco come funziona questo codice di esempio:

• Nella prima riga, <itemscope itemtype="http://www.data-vocabulary.org/Person"> indica che il codice HTML racchiuso tra i tag <div> rappresenta una persona. itemscope indica che i contenuti dei tag <div> descrivono un elemento, mentre itemtype="http://www.data-vocabulary.org/Person" indica che l'elemento è una persona. person può essere utilizzato per rappresentare i microformati vcard.
• Il codice di esempio descrive le proprietà della persona, come nome, soprannome e qualifica lavorativa. Per assegnare un'etichetta alle proprietà della persona, a ogni elemento contenente una di queste proprietà (come <div> o <span>) viene assegnato un attributo itemprop che indica una proprietà. Ad esempio <span itemprop="nickname">.
• Una proprietà può essere formata da un altro elemento (in altre parole, un elemento può includere altri elementi). Ad esempio, le informazioni della persona riportate in precedenza includono un indirizzo (itemtype="http://www.data-vocabulary.org/Address") con le proprietà locality e region.
• La proprietà XFN rel="friend" identifica la relazione di Roberto con Davide ed Elena.

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

<div class="vcard">
   Mi chiamo
   
   <span class="fn">Roberto Sacchi</span>,
   
   ma tutti mi chiamano
   
   <span class="nickname">Bob</span>.
   
   Questa è la mia home page:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   
   Ho una casa ad
   <span class="adr">
      <span class="locality">Albenga</span>,
      
      <span class="region">(Liguria)</span>
   
   </span>
   e lavoro come
   <span class="title">ingegnere</span> per la
   
   <span class="org">ACME Corp</span>.
   
   I miei amici:
   <a href="http://davide-blog.example.com" rel="friend">Davide</a>, 
  
   <a href="http://elena-blog.example.com" rel="friend">Elena</a>

</div>

Ecco come funziona questo codice di esempio.

• Nella prima riga, class="vcard" indica che il codice HTML racchiuso tra i tag <div> descrive le informazioni di contatto, in questo caso relative a una persona.

  (Il microformato utilizzato per descrivere le informazioni di contatto è 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> o <div>) viene assegnato un attributo class che indica una proprietà. vcard descrive il nome di Roberto (fn), la sua qualifica lavorativa (title) e l'organizzazione per cui lavora (org).
• Le proprietà possono contenere altre proprietà. Nell'esempio precedente, la proprietà adr descrive l'indirizzo della persona e include le sottoproprietà locality e region).
• La proprietà XFN rel="friend" identifica la relazione di Roberto con Davide ed Elena.

Di seguito vengono presentati gli stessi contenuti HTML sottoposti a markup con RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
   Mi chiamo <span property="v:name">Roberto Sacchi</span>, 
   
   ma tutti mi chiamano <span property="v:nickname">Bob</span>.
   
   Questa è la mia home page:
   <a href="http://www.example.com" rel="v:url">www.example.com</a>.
   Ho una casa ad
   <span rel="v:address">
      <span typeof="v:Address">
         <span property="v:locality">Albenga</span>,
         <span property="v:region">(Liguria)</span>
      
      </span>
   </span>
   e lavoro come <span property="v:title">ingegnere</span>
   
   per la <span property="v:affiliation">ACME Corp</span>.
   I miei amici:
   <a href="http://davide-blog.example.com" rel="v:friend">Davide</a>,
   
   <a href="http://elena-blog.example.com" rel="v:friend">Elena</a>

</div>

Ecco come funziona questo codice di esempio.

• L'esempio inizia con una dichiarazione dello spazio dei nomi che utilizza xmlns. Ciò indica lo spazio dei nomi in cui è specificato il vocabolario (un elenco di entità e i relativi componenti). Puoi utilizzare la dichiarazione dello spazio dei nomi xmlns:v="http://rdf.data-vocabulary.org/#" ogni volta che esegui il markup di pagine per dati di persone, recensioni o luoghi. Assicurati di utilizzare una barra finale e # (xmlns:v="http://rdf.data-vocabulary.org/#").
• Sempre nella prima riga, typeof="v:Person" indica che i contenuti sottoposti a markup rappresentano una persona.
• Ogni proprietà della persona (come il suo nome o il suo nickname) è associata all'etichetta property. Il nome della proprietà è preceduto dal prefisso v: (<span property="v:nickname">).
• Vogliamo includere le informazioni sull'indirizzo di Roberto (typeof="v:Address") nell'entità typeof="v:Person". Qui, utilizziamo rel al posto di property per indicare una relazione tra Roberto (l'entità v:Person) e questo indirizzo (l'entità v:Address). Quindi includiamo <span typeof="v:Address"> per includere l'effettiva entità indirizzo.
• La proprietà XFN rel="friend" identifica la relazione di Roberto con Davide ed Elena.