Extraits enrichis : rubriques de fil d'ariane

Nouveau ! Avec schema.org vous pouvez inclure une plus grande diversité d'éléments sur vos pages, à l'aide d'un vocabulaire employé à la fois par Google, Microsoft et Yahoo! (en savoir plus). Notez que Google accepte toujours vos extraits enrichis balisés existants.

Remarque : Cet article décrit un format expérimental. Celui-ci pourra être modifié ou remplacé ultérieurement, en fonction des commentaires que nous recevrons et des nouvelles normes de balisage disponibles.

À propos des rubriques de fil d'ariane

Un fil d'ariane est un ensemble de liens (rubriques de fil d'ariane) permettant à l'internaute de comprendre la structure de votre site et de le parcourir, comme suit :

Une page peut contenir plusieurs fils d'ariane. Par exemple :

Lorsque vous balisez des rubriques de fil d'ariane dans le corps d'une page Web, Google est capable de les identifier et de les utiliser pour analyser et présenter les informations sur vos pages dans les résultats de recherche.

Propriétés

Une rubrique de fil d'ariane peut contenir un certain nombre de propriétés, que vous pouvez baliser à l'aide des microdonnées ou du format RDFa. Google reconnaît les propriétés de rubrique de fil d'ariane suivantes :

Propriété Description
title Titre de la rubrique du fil d'ariane
url URL de la rubrique du fil d'ariane
child Rubrique suivante du fil d'ariane. La propriété "child" doit correspondre à un autre élément Breadcrumb.

Le code HTML suivant décrit un fil d'ariane pour une page de produits sur un site de vêtements pour femmes.

  <a href="http://www.example.com/robes">Robes</a> › 
  <a href="http://www.example.com/robes/soiree">Robes de soirée</a> › 
  <a href="http://www.example.com/robes/soiree/vertes">Robes de soirée vertes</a> 

Ce fil d'ariane apparaît sur la page comme suit :

RobesRobes de soiréeRobes de soirée vertes

Les sections suivantes expliquent comment baliser ce contenu à l'aide des microdonnées et du format RDFa.

Microdonnées

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide des microdonnées :

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/robes" itemprop="url">
    
    <span itemprop="title">Robes</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/robes/soiree" itemprop="url">
    
    <span itemprop="title">Robes de soirée</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/vetements/robes/soiree/vertes" itemprop="url">
    
    <span itemprop="title">Robes de soirée vertes</span>
  </a>
</div>

Description de l'exemple

  • Sur la première ligne de chaque balise <div>, <itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> indique que le code HTML inclus dans la balise <div> décrit un fil d'ariane. La propriété itemscope indique que le contenu de la balise <div> décrit un élément et que itemtype="http://data-vocabulary.org/Breadcrumb" indique que l'élément est un fil d'ariane.
  • L'exemple décrit les propriétés de l'élément, telles que son titre et son URL. Pour attribuer des libellés de propriétés, chaque élément contenant l'une d'elles, telles qu'une balise <div> ou <span> se voit attribuer un attribut itemprop indiquant une propriété. Par exemple, <span itemprop="url">.
  • Chaque élément de fil d'ariane doit apparaître dans l'ordre. Le premier élément représente la page de niveau supérieur et le dernier élément représente le parent de la page en cours.

Page contenant plusieurs fils d'ariane

Si votre page ne contient qu'un seul fil d'ariane, Google utilise ses éléments dans leur ordre d'apparition. En revanche, si elle contient plusieurs fils d'ariane, vous devez associer chaque rubrique au fil approprié. Pour ce faire, utilisez la propriété child pour indiquer quel est l'élément suivant dans la hiérarchie :

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
  <a href="http://www.example.com/livres" itemprop="url">
    
    <span itemprop="title">Livres</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/livres/auteurs" itemprop="url">
      
      <span itemprop="title">Auteurs</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/livres/auteurs/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/livres" itemprop="url">
    
    <span itemprop="title">Livres</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/livres/fiction/horreur" itemprop="url">
        
        <span itemprop="title">Horreur</span>
      </a>
    </div>
  </div>
</div>

RDFa

Vous trouverez ci-dessous le même contenu HTML balisé au format RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/robes" rel="v:url" property="v:title">
      
      Robes
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/robes/soiree" rel="v:url" property="v:title">
      
      Robes de soirée
    
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/robes/soiree/vertes" rel="v:url" property="v:title">
      
      Robes de soirée vertes
    
    </a> ›
   </span>
</div>

Description de l'exemple

  • L'exemple commence par une déclaration de l'espace de noms avec le code xmlns. Cette déclaration indique l'espace de noms dans lequel le vocabulaire (liste d'entités constituées de composants) est spécifié. Veillez à utiliser une barre oblique suivie du signe # : xmlns:v="http://rdf.data-vocabulary.org/#".
  • Chaque rubrique est identifiée par typeof="v:Breadcrumb".
  • Le nom d'une rubrique est identifié à l'aide de la propriété title avec le préfixe v:, comme ceci : <span property="v:title">. L'attribut rel indique que le lien correspond à l'URL de ce fil d'ariane. L'attribut property doit être spécifié dans l'élément <a> plutôt que d'être imbriqué dans ce dernier, comme suit : <a href="books.html" rel="v:url" property="v:title">Livres</a>.
  • Chaque élément Breadcrumb doit apparaître dans l'ordre. Le premier élément représente la page de niveau supérieur et le dernier élément représente le parent de la page en cours.

Page contenant plusieurs fils d'ariane

Si votre page ne contient qu'un seul fil d'ariane, Google utilise ses éléments dans leur ordre d'apparition. En revanche, si elle contient plusieurs fils d'ariane, vous devez associer chaque rubrique au fil approprié. Pour ce faire, utilisez la propriété child pour indiquer quel est l'élément suivant dans la hiérarchie :


<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/livres" rel="v:url" property="v:title">
      
      Livres
    </a> ›
    <span rel="v:child">
      
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/livres/auteurs" rel="v:url" property="v:title">
          
          Auteurs
        </a> ›
        <span rel="v:child">
               
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/livres/auteurs/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/livres" rel="v:url" property="v:title">
      
      Livres
    </a> ›
    <span rel="v:child">
      
      <span typeof="v:Breadcrumb">
        
        <a href="http://www.example.com/livres/fiction" rel="v:url" property="v:title">
          
          Fiction
        
        </a> ›
        <span rel="v:child">
               
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/livres/fiction/horreur" rel="v:url" property="v:title">
              
              Horreur
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>