Données structurées de fil d'Ariane (BreadcrumbList)

Fil d'Ariane dans les résultats de recherche

Un fil d'Ariane sur une page indique la position de la page dans l'arborescence du site, et peut aider les internautes à comprendre et à explorer efficacement un site. Un utilisateur peut naviguer tout au long de l'arborescence du site, un niveau à la fois, en commençant par le dernier élément du fil d'Ariane.

Disponibilité de cette fonctionnalité

Cette fonctionnalité est disponible sur ordinateur dans toutes les régions et toutes les langues où la recherche Google est proposée.

Comment ajouter des données structurées

Ces données structurées représentent un format normalisé permettant de fournir des informations sur une page et de classer son contenu. En savoir plus sur le fonctionnement des données structurées

Voici, dans les grandes lignes, comment créer, tester et publier des données structurées.

  1. Ajoutez les propriétés obligatoires. En fonction du format que vous utilisez, découvrez où insérer des données structurées sur la page.
  2. Suivez les consignes.
  3. Validez votre code à l'aide de l'outil de test des résultats enrichis et corrigez les erreurs critiques, le cas échéant. Envisagez également de résoudre les problèmes non critiques que l'outil a pu signaler, car cela peut contribuer à améliorer la qualité de vos données structurées. Toutefois, ce n'est pas nécessaire pour pouvoir bénéficier des résultats enrichis.
  4. Déployez quelques pages où figurent vos données structurées et utilisez l'outil d'inspection d'URL pour découvrir comment Google voit la page. Assurez-vous que Google peut accéder à votre page et qu'elle n'est pas bloquée par un fichier robots.txt, la balise noindex ni par des identifiants de connexion. Si tout semble être en ordre, vous pouvez demander à Google d'explorer de nouveau vos URL.
  5. Pour informer Google des modifications futures de vos pages, nous vous recommandons de nous envoyer un sitemap. Vous pouvez automatiser cette opération à l'aide de l'API Sitemap de la Search Console.

Exemples

La recherche Google utilise des balises de fil d'Ariane dans le corps d'une page Web pour classer les informations de la page dans les résultats de recherche. Souvent, comme illustré dans les cas d'utilisation suivants, les utilisateurs peuvent accéder à une page à partir de types de requêtes de recherche très différents. Bien que chaque recherche puisse renvoyer la même page Web, le fil d'Ariane catégorise le contenu dans le contexte de la requête de recherche Google. La page des lauréats d'un prix littéraire fictif peut utiliser les fils d'Ariane suivants :

Fil d'Ariane simple

Si un seul fil d'Ariane peut mener à la page, celle-ci peut spécifier le fil d'Ariane suivant :

Livres › Science-fiction › Récompensés par un prix

JSON-LD

Voici un exemple de code JSON-LD permettant d'afficher ce fil d'Ariane :


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Voici un exemple de code RDFa permettant l'affichage de ce fil d'Ariane :


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Microdonnées

Voici un exemple de microdonnées permettant l'affichage de ce fil d'Ariane :


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

Voici un exemple de bloc de fil d'Ariane HTML sur la page dans le cadre de la conception visuelle.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Plusieurs fils d'Ariane

S'il existe plusieurs façons d'accéder à une page de votre site, vous pouvez spécifier plusieurs fils d'Ariane pour une seule page. Voici un fil d'Ariane qui renvoie vers une page de livres primés :

Livres › Science-fiction › Récompensés par un prix

Voici un autre fil d'Ariane qui mène à la même page :

Littérature › Récompensés par un prix

JSON-LD

Voici l'exemple JSON-LD qui accepte plusieurs fils d'Ariane :


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Voici l'exemple RDFa qui accepte plusieurs fils d'Ariane :


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Microdonnées

Voici l'exemple de microdonnées qui acceptent plusieurs fils d'Ariane :


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

Voici un exemple de bloc de fils d'Ariane HTML sur la page dans le cadre de la conception visuelle.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Consignes

Pour qu'un fil d'Ariane puisse s'afficher pour votre site dans la recherche Google, suivez ces consignes.

Nous vous recommandons de fournir un fil d'Ariane qui représente un chemin utilisateur classique vers cette page Web, au lieu de dupliquer la structure d'URL. Il n'est pas nécessaire d'inclure un fil d'Ariane ListItem pour le chemin d'accès de premier niveau (nom de domaine ou d'hôte de votre site) ni pour la page elle-même.

Définitions des types de données structurées

Pour spécifier les éléments du fil d'Ariane, définissez une BreadcrumbList contenant au moins deux ListItems. Vous devez inclure les propriétés obligatoires pour que votre contenu puisse être affiché sous forme de fil d'Ariane.

BreadcrumbList est l'élément qui contient tous les éléments de la liste. La définition complète de l'élément BreadcrumbList est disponible sur schema.org/BreadcrumbList. Les propriétés prises en charge par Google sont les suivantes :

Propriétés obligatoires
itemListElement

ListItem

Tableau des éléments du fil d'Ariane, répertoriés dans un ordre spécifique. Spécifiez chaque élément du fil d'Ariane avec un ListItem. Exemple :

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

ListItem contient les détails d'un élément individuel de la liste. La définition complète de ListItem est disponible sur schema.org/ListItem. Les propriétés prises en charge par Google sont les suivantes :

Propriétés obligatoires
item

URL ou sous-type de Thing

URL de la page Web qui représente l'élément du fil d'Ariane. Deux options s'offrent à vous pour spécifier item :

  • URL : indiquez l'URL de la page. Exemple : 
    "item": "https://example.com/books"
  • Thing : utilisez un ID pour spécifier l'URL en fonction du format de balisage que vous utilisez.
    • JSON-LD : utilisez @id.
    • Microdonnées : utilisez href ou itemid.
    • RDFa : utilisez about, href ou resource.

Si l'élément est le dernier du fil d'Ariane, item n'est pas obligatoire. Si item n'est pas inclus pour le dernier élément, Google utilise l'URL de la page parent.

name

Text

Titre de l'élément de fil d'Ariane affiché pour l'utilisateur. Si vous utilisez Thing avec name au lieu de URL pour spécifier item, name n'est pas obligatoire.
position

Integer

Position de l'élément dans le fil d'Ariane. La position 1 indique le début du fil d'Ariane.

Monitor rich results with Search Console

Search Console is a tool that helps you monitor how your pages perform in Google Search. You don't have to sign up for Search Console to be included in Google Search results, but it can help you understand and improve how Google sees your site. We recommend checking Search Console in the following cases:

  1. After deploying structured data for the first time
  2. After releasing new templates or updating your code
  3. Analyzing traffic periodically

After deploying structured data for the first time

After Google has indexed your pages, look for issues using the relevant Rich result status report. Ideally, there will be an increase of valid items, and no increase in invalid items. If you find issues in your structured data:

  1. Fix the invalid items.
  2. Inspect a live URL to check if the issue persists.
  3. Request validation using the status report.

After releasing new templates or updating your code

When you make significant changes to your website, monitor for increases in structured data invalid items.
  • If you see an increase in invalid items, perhaps you rolled out a new template that doesn't work, or your site interacts with the existing template in a new and bad way.
  • If you see a decrease in valid items (not matched by an increase in invalid items), perhaps you are no longer embedding structured data in your pages. Use the URL Inspection tool to learn what is causing the issue.

Analyzing traffic periodically

Analyze your Google Search traffic using the Performance Report. The data will show you how often your page appears as a rich result in Search, how often users click on it and what is the average position you appear on search results. You can also automatically pull these results with the Search Console API.

Dépannage

Si vous ne parvenez pas à mettre en œuvre ou à déboguer des données structurées, voici quelques ressources susceptibles de vous aider.