Fil d'Ariane : à quoi sert-il sur un site internet

Un fil d’Ariane est la ligne de liens affichée au-dessus du titre d’une page, du type Accueil › Prestations › Entretien, qui situe le visiteur dans l’arborescence du site et le ramène en un clic aux niveaux supérieurs. Il sert la navigation, clarifie la structure pour les moteurs et se code pour rester lisible par les lecteurs d’écran.

Ce que désigne le fil d’Ariane sur une page web

Le terme vient de la mythologie grecque : Ariane remet à Thésée une pelote de fil pour qu’il retrouve la sortie du labyrinthe. L’anglais parle de breadcrumb, les miettes de pain semées pour retrouver sa route, image proche des cailloux blancs du Petit Poucet.

Sur un site, le fil d’Ariane prend la forme d’une courte suite de liens, séparés par un chevron ou une barre oblique, qui part de l’accueil et descend jusqu’à la page consultée. La documentation de Google Search Central le résume en une phrase : il indique la position de la page dans l’arborescence du site. Le W3C (World Wide Web Consortium, l’organisme qui normalise le web) le décrit comme une liste de liens vers les pages parentes de la page courante, dans l’ordre hiérarchique.

Le fil affiché en haut de cette page en donne un exemple : Accueil, puis Création de site, puis le titre de l’article.

Il ne remplace pas le menu principal : le menu montre tout ce que le site propose, le fil montre où se trouve le visiteur.

Trois types de fil d’Ariane, un seul vraiment répandu

Trois familles coexistent, et une seule convient à la grande majorité des sites d’entreprise.

Le fil hiérarchique, calqué sur l’arborescence

La première famille, le fil hiérarchique, reproduit la place de la page dans la structure du site, quel que soit le chemin emprunté pour y arriver : Accueil › Prestations › Entretien de chaudière pour un chauffagiste du Val-d’Oise. Le chemin est stable et identique pour tous les visiteurs.

Sa qualité dépend de l’arborescence qui le précède : des rubriques claires donnent un fil limpide, un site empilé sans logique donne un fil qui ne dit rien. La construction de cette structure avant le design est détaillée dans notre méthodologie de création de site étape par étape.

Le fil par attributs, réservé aux catalogues

Le second modèle, le fil par attributs, affiche les critères qui décrivent la page plutôt que sa position : Accueil › Chaussures › Randonnée › Imperméables. Il sert surtout les boutiques en ligne, où un même produit répond à plusieurs filtres. Son défaut : chaque croisement de critères peut générer une adresse différente, donc des pages quasi identiques à surveiller de près.

Le fil par historique, à écarter

Dernière variante, le fil par historique retrace les pages visitées dans l’ordre de la visite. En pratique, il double le bouton retour du navigateur, change d’une visite à l’autre et n’apprend rien au visiteur arrivé depuis un moteur de recherche. Google recommande d’ailleurs, dans sa documentation sur le balisage, un fil qui représente un chemin utilisateur classique, ce qu’un historique individuel ne garantit pas.

Ce que le visiteur gagne à le trouver

Une part importante des visites ne commence pas par l’accueil. Un particulier qui cherche « ramonage Pontoise » atterrit directement sur la page du service, sans passer par le menu. Le fil lui livre en une ligne trois informations :

• l’endroit précis où il se trouve dans le site ;
• la rubrique qui regroupe les pages voisines, accessible en un clic ;
• la preuve que la page appartient à un ensemble organisé, et non à une page isolée.

Sur un site de quelques pages, ce gain reste faible ; le fil de navigation devient vraiment utile à partir de deux niveaux de profondeur : rubriques de services, blog classé par thèmes, fiches de réalisations. Et il occupe très peu de place, une ligne de texte en petits caractères.

Fil d’Ariane et référencement : liens internes et balisage

Le fil ne fait pas monter une page à lui seul. Son effet passe par deux mécanismes.

Un maillage interne automatique

Chaque page dotée d’un fil pointe vers ses pages parentes avec des intitulés courts et descriptifs. Les pages de rubrique reçoivent donc un lien depuis toutes les pages qu’elles contiennent, ce qui donne aux robots d’exploration une lecture nette de la hiérarchie. Pour une entreprise locale, ce sont souvent les pages de service qui pèsent le plus, sujet développé dans notre analyse du référencement de proximité à Cergy.

Les données structurées BreadcrumbList

Google lit un balisage dédié, le type BreadcrumbList du vocabulaire schema.org, pour comprendre le fil et, sur ordinateur, l’afficher dans ses résultats. Trois formats sont acceptés : JSON-LD (un bloc de données structurées placé dans le code de la page), microdonnées et RDFa. Les exigences tiennent en trois lignes :

• au moins deux éléments de type ListItem dans la liste ;
• pour chacun, une position (1 pour le début du fil), un nom affiché et l’adresse de la page ;
• pour le dernier élément, l’adresse devient facultative.

La documentation, mise à jour en septembre 2026, ajoute deux précisions : le fil balisé représente de préférence un chemin utilisateur classique au lieu de recopier les dossiers de l’adresse, et ni la racine du domaine ni la page elle-même n’ont besoin d’y figurer. La fonctionnalité y est annoncée comme disponible sur ordinateur, dans toutes les régions et toutes les langues ; le texte ne mentionne pas les résultats sur téléphone.

Avant la mise en ligne, le test des résultats enrichis de Google contrôle le balisage. Ensuite, l’outil d’inspection d’URL et les rapports de la Search Console signalent les erreurs page par page.

Un fil d’Ariane accessible à tous les visiteurs

L’accessibilité concerne les personnes qui naviguent avec un lecteur d’écran, une plage braille ou le seul clavier. Pour construire un fil d’Ariane accessible, le motif Breadcrumb des ARIA Authoring Practices publiées par le W3C (ARIA désigne les attributs qui décrivent les composants aux aides techniques) fixe trois règles :

• le fil est contenu dans une région de navigation, en pratique un élément nav ;
• cette région porte un nom, donné par l’attribut aria-label ou aria-labelledby ;
• le lien vers la page courante porte aria-current avec la valeur page, attribut qui devient facultatif si la page courante n’est pas un lien.

L’exemple du W3C range les liens dans une liste ordonnée, puisque l’ordre des niveaux a un sens. Les séparateurs sont dessinés par la feuille de style : la navigation nommée signale déjà le fil, et des chevrons lus un par un par le lecteur d’écran n’ajouteraient qu’une verbosité inutile.

En France, le RGAA (référentiel général d’amélioration de l’accessibilité), dans sa version 4.1.2, cite le fil d’Ariane dans son glossaire parmi les principales barres de navigation d’un site, avec le menu, la navigation dans une liste de résultats et les liens d’évitement. Le même glossaire range aria-current parmi les compléments de code qui évitent de porter une information par la seule couleur : cas typique de la page courante simplement grisée.

Bonne pratique d’ergonomie : garder le fil au même endroit sur toutes les pages, au-dessus du titre.

Fil d’Ariane sur mobile : raccourcir sans perdre le repère

Sur un téléphone, un fil d’Ariane de quatre niveaux aux intitulés longs passe sur trois lignes et repousse le titre vers le bas. Trois réponses existent, selon la profondeur du site :

• n’afficher que le lien vers la rubrique parente, sous la forme d’un retour vers celle-ci ;
• replier les niveaux intermédiaires derrière des points de suspension que le visiteur peut déplier ;
• raccourcir les intitulés dans le fil, sans toucher aux titres des pages.

Le défilement horizontal, proposé par certains thèmes, reste la solution la moins lisible : la partie masquée passe inaperçue.

Reste la taille des cibles tactiles. Les règles internationales d’accessibilité WCAG 2.2 (Web Content Accessibility Guidelines) fixent, au critère 2.5.8 de niveau AA, une cible d’au moins 24 pixels CSS de côté, avec des exceptions, dont celle des liens insérés dans une phrase. Un fil d’Ariane n’étant pas une phrase, viser ce seuil ou espacer suffisamment les liens évite les touches ratées du pouce.

Mettre en place le fil selon le CMS du site

Un CMS (système de gestion de contenu) gère le fil de trois manières : le thème l’intègre d’office, une extension l’ajoute, ou le développeur l’écrit dans le gabarit.

Sur WordPress, l’extension Yoast SEO propose un fil d’Ariane activable dans ses réglages avancés, à afficher par une fonction PHP dans le thème, un bloc dédié dans l’éditeur ou un code court. Une fois l’option activée, l’extension produit aussi le balisage JSON-LD correspondant. Yoast prévient que les modifications faites directement dans un thème peuvent disparaître à sa prochaine mise à jour : d’où l’intérêt d’un thème enfant et d’un contrôle du fil après chaque mise à jour, geste qui relève du suivi technique après la mise en ligne.

WooCommerce, l’extension de boutique de WordPress, affiche un fil par défaut sur les pages de la boutique et des produits, avec un séparateur et un libellé d’accueil modifiables.

Les générateurs de sites statiques suivent une autre logique. Hugo documente une méthode qui liste les sections parentes d’une page, avec un exemple de fil qui pose aria-label sur l’élément nav et aria-current sur la page courante. Sur les solutions de création de site hébergées, tout dépend du thème : la présence du fil et de son balisage se vérifie avant d’adopter un modèle.

Piège commun à toutes ces solutions : le doublon. Un thème qui affiche déjà son fil, plus une extension qui en ajoute un second, donne deux fils à l’écran ou deux balisages BreadcrumbList concurrents dans le code.

Les erreurs qui rendent le fil inutile

Les défauts relevés sur les sites de TPE se ressemblent d’un audit à l’autre :

• un fil qui recopie les dossiers techniques de l’adresse, comme category ou des identifiants, au lieu de noms lisibles ;
• des libellés interminables, souvent le titre complet de la page ;
• une page rangée dans plusieurs catégories dont le fil change selon la page d’origine, alors que Yoast SEO, par exemple, laisse choisir une catégorie principale ;
• des liens vers des rubriques vides ou supprimées, fréquents après une refonte de site mal préparée ;
• un balisage BreadcrumbList qui ne correspond pas au fil affiché ;
• un fil présent sur la page d’accueil, où il n’a rien à indiquer.

Les libellés méritent le même soin que les titres de pages : courts, explicites, cohérents avec le menu, selon les principes de rédaction web pour le référencement naturel.

Prochaine étape : ouvrir trois pages profondes du site sur un téléphone, vérifier que le fil s’affiche, qu’il mène à des rubriques réelles et que le test des résultats enrichis lit un BreadcrumbList sans erreur. Une demi-heure suffit pour savoir si le fil guide vraiment les visiteurs.