Fil d'Ariane

Le nom vient du mythe grec : le fil qu'Ariane confie à Thésée lui permet de retrouver la sortie du labyrinthe. Sur un site, le fil d'Ariane joue le même rôle. Placé en général au-dessus du titre de la page, il montre où l'on se trouve et offre un lien vers chaque niveau supérieur. Le W3C le définit comme une liste de liens vers les pages parentes de la page courante, dans l'ordre hiérarchique.

À quoi il sert

Pour le visiteur arrivé depuis un moteur de recherche sur une page profonde, il donne le contexte d'un coup d'œil et une issue autre que le bouton « retour ». Pour le site, il ajoute sur chaque page des liens vers les rubriques, ce qui renforce le maillage interne et rend l'architecture du site lisible. Pour les moteurs de recherche, il signale la place de la page dans l'ensemble.

Le fil d'Ariane dans les résultats de Google

Google affiche une URL lisible au-dessus de chaque résultat. Sur ordinateur, elle se compose du domaine et d'un fil d'Ariane. Google peut déduire ce fil des mots de l'URL, mais des données structurées permettent de l'influencer.

Sur mobile, ce n'est plus le cas. Le 23 janvier 2025, Google a annoncé que l'URL visible serait réduite au seul domaine dans toutes les langues et régions, parce que le fil d'Ariane était tronqué sur les petits écrans. Le balisage reste pris en charge pour les résultats sur ordinateur, ainsi que le rapport dédié dans Search Console. Aucune action n'est demandée aux sites qui l'utilisent.

Le baliser en HTML

Côté accessibilité, le W3C recommande de placer le fil dans une zone de navigation munie d'un libellé, et de signaler la page courante avec aria-current="page". Son exemple de référence structure les liens dans une liste ordonnée :

<nav aria-label="Fil d'Ariane">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/cuisine/">Cuisine</a></li>
    <li><a href="/cuisine/desserts/">Desserts</a></li>
    <li><a href="/cuisine/desserts/tarte-aux-pommes/" aria-current="page">Tarte aux pommes</a></li>
  </ol>
</nav>

Dans cet exemple, les séparateurs visuels sont dessinés en CSS : ils restent hors de l'arbre d'accessibilité, si bien qu'un lecteur d'écran ne les annonce pas.

Les données structurées BreadcrumbList

Pour indiquer le fil à Google, on utilise le type BreadcrumbList de Schema.org. La documentation de Google demande au moins deux éléments ListItem, chacun avec une position, un name et un item (l'URL du niveau). Le dernier élément peut omettre item : Google utilise alors l'URL de la page courante.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Accueil", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Cuisine", "item": "https://example.com/cuisine/" },
    { "@type": "ListItem", "position": 3, "name": "Desserts", "item": "https://example.com/cuisine/desserts/" },
    { "@type": "ListItem", "position": 4, "name": "Tarte aux pommes" }
  ]
}
</script>

Google recommande un fil qui représente un parcours typique de l'utilisateur vers la page, plutôt qu'un simple reflet de la structure d'URL. Une page accessible par plusieurs chemins peut déclarer plusieurs fils. Le Test des résultats enrichis et le rapport de Google Search Console permettent de vérifier le balisage.

Les erreurs fréquentes

Un fil d'Ariane qui ne correspond pas à l'organisation réelle du site trompe plus qu'il n'aide : catégories qui changent d'une page à l'autre, niveaux qui mènent à des pages vides ou à une erreur 404. Les liens construits uniquement en JavaScript, sans élément <a href>, privent les robots des liens internes que le fil devrait apporter. Sur un site de commerce, un produit rangé dans plusieurs catégories gagne à afficher toujours le même chemin principal, pour éviter qu'une même fiche semble appartenir à des rubriques différentes selon l'URL d'accès. Enfin, le fil ne remplace pas le menu : il aide à remonter, pas à explorer les rubriques voisines.