Fil d'Ariane

Fil d'Ariane affiché sur une page Web

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

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. Pour consulter un guide détaillé sur l'ajout de données structurées à une page Web, accédez à cet atelier de programmation.

  1. Ajoutez les propriétés obligatoires. Pour déterminer où placer les données structurées sur la page, regardez Données structurées JSON-LD : où les insérer sur la page.
  2. Suivez les consignes.
  3. Validez votre code à l'aide du test 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 ancillaryjustice.html peut afficher les fils d'Ariane suivants en fonction du contexte de la recherche :

Une méthode courante pour implémenter un fil d'Ariane consiste à utiliser la partie du chemin d'URL comme fil d'Ariane. Gardez à l'esprit que certaines parties du chemin d'URL n'aident pas les internautes à comprendre comment la page s'intègre dans votre site Web. Par exemple, dans l'URL "https://example.com/pages/livres/l_attrape_cœurs.html", "pages" ne donne aucune information supplémentaire, pas plus que l'élément de premier niveau "example.com". 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 de l'URL.

Fil d'Ariane simple

Une requête de recherche liée à la remise d'un prix pour un genre et une année spécifiques ("2014 Nebula Award best novel", dans cet exemple) peut générer le fil d'Ariane suivant :

BooksScience Fiction › Award Winners

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 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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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 :

BooksScience Fiction › Award Winners

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

Literature › Award Winners

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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://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.

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

Pour spécifier les éléments du fil d'Ariane, définissez une liste BreadcrumbListcontenant au moins deux éléments 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.

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 fil d'Ariane avec une propriété 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 l'élément ListItem est disponible sur schema.org/ListItem.

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 un élément 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 le fil d'Ariane est le dernier élément du bloc, 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 une propriété Thing avec un nom (name) au lieu d'une URL (URL) pour spécifier l'élément (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.

Suivre les résultats enrichis avec la Search Console

La Search Console est un outil qui vous permet de suivre les performances de vos pages dans la recherche Google. Il n'est pas nécessaire de vous inscrire à la Search Console pour figurer dans les résultats de recherche Google. Cependant, en vous inscrivant, vous comprendrez mieux la façon dont Google interprète votre site et serez plus à même de l'améliorer. Nous vous recommandons de consulter la Search Console dans les cas suivants :

  1. Après avoir déployé des données structurées pour la première fois
  2. Après avoir publié de nouveaux modèles ou après avoir mis à jour votre code
  3. Analyse régulière du trafic

Après avoir déployé des données structurées pour la première fois

Une fois que Google a indexé vos pages, recherchez les problèmes à l'aide du rapport sur l'état des résultats enrichis. Idéalement, vous devriez constater une augmentation du nombre de pages valides, sans augmentation du nombre d'erreurs ou d'avertissements. Si vous détectez des problèmes au niveau des données structurées :

  1. Corrigez les erreurs.
  2. Inspectez une URL en ligne pour vérifier si le problème persiste.
  3. Demandez la validation à l'aide du rapport d'état.

Après avoir publié de nouveaux modèles ou après avoir mis à jour votre code

Lorsque vous apportez des modifications importantes à votre site Web, surveillez l'augmentation des erreurs et des avertissements relatifs aux données structurées.
  • Si vous constatez une augmentation du nombre d'erreurs, vous avez peut-être déployé un nouveau modèle qui ne fonctionne pas, ou votre site interagit différemment et de façon incorrecte avec le modèle déjà disponible.
  • Si vous constatez une diminution du nombre d'éléments valides (sans augmentation du nombre d'erreurs), vous n'intégrez peut-être plus de données structurées dans vos pages. Utilisez l'outil d'inspection d'URL pour identifier la cause du problème.

Analyse régulière du trafic

Analysez votre trafic de recherche Google à l'aide du rapport sur les performances. Les données indiquent la fréquence à laquelle votre page s'affiche en tant que résultat enrichi dans la recherche Google, ainsi que la fréquence à laquelle les internautes cliquent dessus et la position moyenne à laquelle vous apparaissez dans les résultats de recherche. Vous pouvez également extraire automatiquement ces résultats avec l'API Search Console.

Dépannage

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