Rich snippet - Breadcrumb

Novità! schema.org ti permette di eseguire il markup di una gamma più ampia di tipi di elementi nelle tue pagine utilizzando un vocabolario che Google, Microsoft e Yahoo! sono tutti in grado di comprendere. Leggi ulteriori informazioni. Google supporta ancora il markup dei rich snippet esistente.

Nota. Questo articolo descrive un formato sperimentale. In base ai commenti e ad altri standard di markup disponibili, in futuro potrebbe essere modificato o sostituito.

Informazioni sui breadcrumb

Un breadcrumb trail (letteralmente "fila di briciole di pane") è un insieme di link che possono aiutare un utente a comprendere la gerarchia del tuo sito e a navigare al suo interno. Ecco un esempio:

Le pagine possono avere più di un breadcrumb trail. Ad esempio:

Quando nel corpo di una pagina web vengono incluse informazioni sui breadcrumb tramite linguaggio di markup, Google è in grado di identificarle e di utilizzarle per comprendere e presentare le informazioni nelle tue pagine all'interno dei risultati di ricerca.

Proprietà

Un breadcrumb può contenere varie proprietà a cui è possibile assegnare etichette utilizzando lo standard di markup dei microdati o RDFa. Google riconosce le seguenti proprietà dei breadcrumb.

Proprietà Descrizione
title Il titolo di un breadcrumb.
url L'URL di un breadcrumb.
child Il breadcrumb successivo nella gerarchia. Il child deve essere un altro elemento Breadcrumb.

Il seguente codice HTML descrive un breadcrumb per una pagina prodotto su un sito di abbigliamento femminile.

  <a href="http://www.example.com/dresses">Dresses</a> › 
  <a href="http://www.example.com/dresses/real">Real Dresses</a> › 
  <a href="http://www.example.com/dresses/real/green">Real Green Dresses</a> 

Questo insieme di breadcrumb verrà visualizzato nella pagina nel seguente modo:

DressesReal DressesReal Green Dresses

Le seguenti sezioni descrivono come eseguire il markup di questi contenuti utilizzando i microdati o RDFa.

Microdati

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

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    
    <span itemprop="title">Dresses</span>
  
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    
    <span itemprop="title">Real Dresses</span>
  
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    
    <span itemprop="title">Real Green Dresses</span>
  
  </a>
</div>

Ecco come funziona questo codice di esempio:

  • Nella prima riga di ogni tag <div>, <itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> indica che il codice HTML racchiuso tra tag <div> descrive un breadbrumb. itemscope indica che i contenuti dei tag <div> descrivono un elemento e itemtype="http://data-vocabulary.org/Breadcrumb" indica che l'elemento è un breadcrumb.
  • Il codice di esempio descrive le proprietà dell'elemento, come titolo e URL. Per assegnare un'etichetta alle proprietà, 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="url">.
  • Ogni elemento breadcrumb deve essere visualizzato nell'ordine corretto, con il primo elemento che rappresenta la pagina di primo livello e l'elemento finale che rappresenta il parent della pagina corrente.

Se una pagina ha più breadcrumb trail

Se la pagina contiene solo un singolo breadcrumb trail, Google utilizzerà l'ordine degli elementi così come sono visualizzati nella tua pagina. Tuttavia, se la pagina contiene più di un breadcrumb trail, è necessario indicare il percorso a cui appartiene ogni breadcrumb. A tale scopo, utilizza la proprietà child per specificare l'elemento successivo nella gerarchia, in questo modo:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
  <a href="http://www.example.com/books" itemprop="url">
    
    <span itemprop="title">Books</span>
  
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    
    <a href="http://www.example.com/books/authors" itemprop="url">
      
      <span itemprop="title">Authors</span>
    
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors/stephenking" itemprop="url">
        
        <span itemprop="title">Stephen King</span>
      
      </a>
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    
    <span itemprop="title">Books</span>
  
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fiction" itemprop="url">
      
      <span itemprop="title">Fiction</span>
    
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/fiction/horror" itemprop="url">
        
        <span itemprop="title">Horror</span>
      
      </a>
    </div>
  </div>
</div>

RDFa

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

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     
     <a href="http://www.example.com/dresses" rel="v:url" property="v:title">
      
      Dresses
    
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
      
      Real Dresses
    
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
      
      Real Green Dresses
    
    </a> ›
   </span>
</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). Assicurati di utilizzare una barra finale e # (xmlns:v="http://rdf.data-vocabulary.org/#").
  • Ogni breadcrumb è identificato da typeof="v:Breadcrumb".
  • Il nome del breadcrumb è identificato utilizzando la proprietà title, preceduta dal prefisso v: in questo modo: <span property="v:title">. L'attributo rel indica che il link è l'URL di quel breadcrumb. L'attributo property deve essere specificato nell'elemento <a> anziché essere nidificato al suo interno, in questo modo: <a href="books.html" rel="v:url" property="v:title">Books</a>.
  • Ogni elemento breadcrumb deve essere visualizzato nell'ordine corretto, con il primo elemento che rappresenta la pagina di primo livello e l'elemento finale che rappresenta il parent della pagina corrente.

Se una pagina ha più breadcrumb trail

Se la pagina contiene solo un singolo breadcrumb trail, Google utilizzerà l'ordine degli elementi così come sono visualizzati nella tua pagina. Tuttavia, se la pagina contiene più di un breadcrumb trail, è necessario indicare il percorso a cui appartiene ogni breadcrumb. A tale scopo, utilizza la proprietà child per specificare l'elemento successivo nella gerarchia, in questo modo:


<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      
      Libri
    </a> ›
    <span rel="v:child">         
          
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/authors" rel="v:url" property="v:title">
          
          Autori
        </a> ›
        <span rel="v:child">         
                   
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/books/authors/stephenking" rel="v:url" property="v:title">
              
              Stephen King
            
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      
      Libri
    </a> ›
    <span rel="v:child">         
          
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/fiction" rel="v:url" property="v:title">
          
          Fiction
        
        </a> ›
        <span rel="v:child">         
                   
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/books/fiction/horror" rel="v:url" property="v:title">
              
              Orrore
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>