Pourquoi et comment ajouter un fil d’ariane sur un site internet ?

Le fil d’ariane ou breadcrumb (en anglais) est une pratique courante et recommandée sur les sites internet, il s’agit d’une liste de liens ajoutée en haut de chaque page pour rappeler à l’utilisateur où il se situe sur le site par rapport à la hiérarchie de ce dernier. Un fil d’ariane contient des liens et du texte. L’insertion d’un breadcrumb peut se faire de façon discrète et ne dénature en rien le contenu de la page.

Avantages d’un fil d’ariane

Ajouter un fil d’ariane ne sert pas simplement à faire beau ou ajouter un élément à une page pour ajouter un élément, il y a plus d’avantages qu’on ne le pense à faire usage de cette technique :

• Premièrement, l’utilisateur se repère plus facilement lorsqu’il navigue sur le site. Il sait grâce au fil d’ariane sur quelle page il navigue par rapport à l’arborescence du site. La relation hiérarchique entre les pages est clarifiée.
• Deuxièmement, l’utilisateur peut facilement naviguer vers une page précédente de la hiérarchie du site. Grâce aux liens présent dans le fil d’ariane, il peut se rendre vers la page qui précède la page sur laquelle il navigue actuellement, en un clic.
• Troisièmement, un fil d’ariane est vivement recommandé pour optimiser le référencement SEO du site. Cette liste de liens est considérée par les robots des moteurs de recherche comme du maillage interne, et c’est ce qu’apprécient les robots d’exploration. On peut donc insérer du maillage interne sur chaque page de son site.

Note : Un fil d’ariane aide à la conception d’un cocon sémantique, puisque cette technique de référencement demande à placer des liens de retour vers les pages parentes (ou intermédiaires).

Erreurs à ne pas faire

Il y a plusieurs erreurs à ne pas faire lorsque l’on insère un fil d’ariane :

• Ne pas insérer de fil d’ariane sur toutes les pages : Pour des questions d’UX design et de cohérence, il est logique d’insérer un fil d’ariane sur toutes les pages. C’est un moyen efficace pour créer du linking qui pointe vers des pages du site et pour faciliter la navigation.
• Ne pas mettre de flèches entre les liens : Il ne faut pas disposer les liens les uns à côté des autres, bien que cela n’impacte pas la technique de référencement, cela peut gêner l’expérience utilisateur, l’utilisateur risque de ne pas cerner l’intérêt de la présence de ces liens. Une flèche entre les liens permet à l’utilisateur de comprendre l’objectif.
• Insérer un fil d’ariane basé sur le parcours de l’utilisateur : cette pratique n’est pas cohérente, car la compréhension de la structure du site n’est pas facilitée pour l’utilisateur. C’est également beaucoup plus complexe à mettre en place. Cette pratique ne remplit plus la fonction du fil d’ariane.

Structure du fil d’ariane

Dans la plupart des situations, les fils d’ariane sur les sites internet sont conçus à l’aide des balises de listes ul et li. Voici un exemple :

<ul class="breadcrumb">
    <li class="item"><a href="www.monsite.fr/">Accueil</a></li>
    <li class="item"><a href="monsite.fr/categorie-1">Catégorie 1</a></li>
    <li class="item"><a href="monsite.fr/categorie-1/sous-categorie-1/">Sous-catégorie 1</a></li>
    <li class="item-active">Page actuelle</li>
</ul>

Bien sur, des règles de style CSS sont appliquées aux classes breadcrumb, item et item-active pour mettre en forme l’élément et ajouter des séparations entre les items.

Comment ajouter un fil d’ariane ?

Pour ajouter un fil d’ariane aux pages de son site, en fonction du CMS que vous utilisez, vous pouvez ajouter des modules qui permettent la génération d’un fil d’ariane dynamique sur les types de publication. Il est recommandé de l’ajouter tout en haut de la page.

Sur WordPress

Il faut savoir que WordPress n’inclue pas nativement de possibilité pour ajouter un fil d’ariane sur les types de publication.

• Si votre constructeur de page contient un élément breadcrumb, et que vous utilisez une extension de référencement, il vous suffit de vous assurer que votre builder est compatible avec l’extension de référencement installée sur le site pour pouvoir insérer un fil d’ariane dynamique sans problème.

• Si vous utilisez Yoast SEO ou la version Premium de l’extension de référencement SEOPress, il vous suffit de vous rendre dans les réglages de votre extension pour l’activer. Dans le cas de SEOPress : onglet Pro > Fil d’ariane.

• Si votre constructeur de page ne permet pas cette possibilité et que vous n’utilisez pas d’extension de référencement ou que votre extension de référencement ne le permet pas, il est toujours possible de se rabattre sur une extension spécialement développée pour l’ajout de fil d’ariane, comme Flexy Breadcrumb.

• Si vous êtes dans l’avant dernier cas et que ne vous voulez pas vous embêter avec une extension de référencement, il faut créer l’élément soi même pour chacune des types de publications, ce qui peut vite devenir asservissant. De plus, vous ne disposez pas de la bonne structure HTML (sous forme de liste), puisqu’il ne s’agit que d’un élément de texte dans lequel les liens sont insérés.

Sur autre CMS

Si vous utilisez un CMS autre que WordPress, renseignez vous pour savoir s’il contient des modules pour pouvoir insérer ce type d’élément, ou s’il est inclut nativement dans le CMS.

Fil d’ariane, utile et agréable

Si l’on parle de joindre l’utile à l’agréable sur un site web, alors on peut mentionner le fil d’ariane. Le maillage interne est renforcé, tout comme la navigation et la compréhension de la structure du site.