bloggerselite logo

Fil d’Ariane pour les sites Web : Définition et utilisation

Fil d'Ariane pour les sites Web : Définition et utilisation

Qu’est-ce que le fil d’Ariane ?

La navigation par fil d’Ariane (Breadcrumb Navigation) est une suite de liens texte qui montre aux utilisateurs le chemin d’accès à la page sur laquelle ils se trouvent actuellement. Ce qui permet aux utilisateurs de naviguer vers des pages supérieures dans la hiérarchie du site Web.

Ces liens (ou « fil d’Ariane ») apparaissent généralement en haut de la page.

Voici un exemple de fil d’Ariane tiré de la page des jeans pour hommes sur Nordstrom :

Fil d'Ariane pour les sites Web : Définition et utilisation - Exemple de navigation dans le fil d'Ariane de la page des jeans pour hommes sur Nordstrom

Remarquez comment les liens du fil d’Ariane suivent le chemin d’accès à la page (/browse/men/clothing/jeans/) : 

Texte d’ancrage du fil d’ArianeDestination du fil d’Ariane
Maison/
Hommes/parcourir/hommes/
Vêtements/parcourir/hommes/vêtements/

Le fil d’Ariane tire son nom du conte de fées Hansel et Gretel, dans lequel les personnages créent un fil d’Ariane afin de pouvoir revenir sur leurs pas.

Cependant, le fil d’Ariane ne reflète pas nécessairement le parcours de l’utilisateur vers la page.

Par exemple, un utilisateur peut suivre un lien direct vers la page des jeans pour hommes Nordstrom. Mais ils verront toujours le même menu fil d’Ariane.

Que sont les fils d’Ariane sur un site Web ?

Sur un site Web, les fils d’Ariane sont des liens qui montrent l’itinéraire vers la page sur laquelle vous vous trouvez. Ensemble, ils constituent le fil d’Ariane.

Par exemple, chacun de ces éléments est un fil d’Ariane :

Fil d'Ariane pour les sites Web : Définition et utilisation - Liens « Accueil », « Hommes », « Vêtements » et « et Jeans » mis en évidence sur la page de Nordstrom

Les avantages de la navigation par fil d’Ariane

L’utilisation du fil d’Ariane dans la conception de sites Web peut bénéficier à l’expérience utilisateur (UX) et au référencement .

Généralement, la navigation par fil d’Ariane est plus avantageuse pour les sites dotés d’une architecture de site approfondie. Parce que cela aide les utilisateurs à naviguer entre plusieurs niveaux.

Fil d'Ariane pour les sites Web : Définition et utilisation - infographie sur l'architecture du site profond

Le fil d’Ariane n’est pas aussi utile sur les sites très petits ou plats. Parce que la plupart des pages ne sont qu’à un clic de la page d’accueil.

Mais nous recommandons quand même de mettre en œuvre le fil d’Ariane, car les avantages potentiels dépassent le temps investi.

Explorons les principaux avantages de l’ajout de fil d’Ariane à votre site Web :

Encourage les utilisateurs à explorer votre site

Le fil d’Ariane peut inviter les utilisateurs à accéder à d’autres pages de votre site. Ce qui peut entraîner une augmentation des revenus publicitaires ou des ventes.

Disons qu’un utilisateur atterrit sur la page produit Adidas ci-dessous. Mais il ne trouve pas ce qu’il cherche.

Plutôt que de quitter (ou de rebondir ), ils pourraient remarquer le menu fil d’Ariane. Décidez d’explorer le reste de la gamme « Originals ». Et finalement, achetez un article différent.

Fil d'Ariane pour les sites Web : Définition et utilisation - Menu fil d'Ariane "Retour", "Accueil", "Originaux", "Chaussures" mis en évidence sur la page produit Adidas

Comme d’autres types de liens internes, le fil d’Ariane aide les moteurs de recherche à accéder aux pages de votre site Web. Et comprenez la structure de votre site.

Voici une illustration qui explique plus en détail comment Google peut trouver des pages via des liens internes :

Fil d'Ariane pour les sites Web : Définition et utilisation - Une ingographie de Semrush montrant comment Google découvre les pages

En d’autres termes, les liens internes peuvent améliorer l’exploration du site Web.

Cela peut conduire à ce qu’un plus grand nombre de vos pages apparaissent dans l’index de Google (base de données de résultats potentiels). Et des classements plus élevés pour les mots-clés pertinents.

Conseil

Utilisez l’outil d’audit de site de Semrush pour vérifier les problèmes de liens internes sur votre site.

Améliorez vos liens internes avec l’outil d’audit de site

Améliore l’expérience utilisateur (UX)

Le fil d’Ariane peut réduire le nombre de clics nécessaires pour progresser dans l’architecture d’un site Web (par exemple, d’une sous-catégorie à sa catégorie parent). Et donc améliorer l’UX.

Fil d'Ariane pour les sites Web : Définition et utilisation - exemple d'architecture de site Web

Sur un site Web sans fil d’Ariane, les utilisateurs devront peut-être appuyer plusieurs fois sur le bouton Précédent. Ou naviguez dans plusieurs menus.

Mais avec la navigation par fil d’Ariane, les utilisateurs peuvent cliquer sur un seul lien dans le fil d’Ariane.

De plus, de nombreux utilisateurs s’attendent désormais à un fil d’Ariane sur les sites Web. Si le vôtre ne les possède pas, cela pourrait créer une certaine frustration.

Génère plus de clics à partir des moteurs de recherche

Des fils d’Ariane peuvent apparaître dans les résultats de recherche Google. Les résultats enrichis (appelés extraits enrichis ) sont généralement plus attrayants et informatifs, et peuvent donc attirer davantage de clics.

Par exemple, voici un extrait avec un fil d’Ariane : 

Fil d'Ariane pour les sites Web : Définition et utilisation - Un extrait de la page Adidas avec un fil d'Ariane sur Google SERP

Contre un sans :

Fil d'Ariane pour les sites Web : Définition et utilisation - Un extrait de la page Scheels sans fil d'Ariane sur Google SERP

Pour garantir que Google puisse trouver et afficher le fil d’Ariane, vous devez utiliser un schéma de fil d’Ariane dans le code de votre page. 

Cela ressemble à ceci :

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/home",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/category",
"name": "Category"
}
}
]
}
</script>

Pour vérifier si votre site dispose déjà d’un balisage de schéma et vous assurer qu’il fonctionne correctement, vous pouvez utiliser l’outil d’audit de site de Semrush .

Après la configuration, ouvrez le rapport « Marquage ».

Fil d'Ariane pour les sites Web : Définition et utilisation - Widget « Marquage » mis en évidence dans le tableau de bord d'audit de site

Faites défiler jusqu’à « Éléments de données structurées » pour voir si « Fil d’Ariane » est répertorié.

Fil d'Ariane pour les sites Web : Définition et utilisation - Page Éléments de données structurées dans Audit de site

Si vous avez des éléments non valides, cliquez sur le lien pour voir les pages concernées.

Fil d'Ariane pour les sites Web : Définition et utilisation - Numéro 5 mis en évidence dans la colonne "Éléments non valides"

Ensuite, cliquez sur « Pourquoi et comment y remédier » pour obtenir des conseils pour aller de l’avant.

Fil d'Ariane pour les sites Web : Définition et utilisation - Un exemple de section « Pourquoi et comment y remédier » pour les éléments de données structurées non valides dans l'audit de site

Assurez-vous de réexécuter l’audit après avoir corrigé votre fil d’Ariane SEO.

Vérifiez votre schéma de fil d’Ariane avec l’outil d’audit de site Semrush

Différents types de Fil d’Ariane

Bien que les fils d’Ariane basés sur la hiérarchie soient les plus courants, il existe différents types de fils d’Ariane.

Explorons chacun d’entre eux :

Fil d’Ariane basé sur la hiérarchie

Le fil d’Ariane basé sur la hiérarchie suit l’architecture du site (ou « hiérarchie ») de votre site Web. 

Considérez cet exemple de fil d’Ariane de Target : 

Fil d'Ariane pour les sites Web : Définition et utilisation - Fil d'Ariane basé sur la hiérarchie sur le site Web Target

Dans cet exemple, le parcours commence par la catégorie de niveau supérieur. Dans ce cas, Target dans son ensemble. 

Et puis progresse à travers des sous-catégories plus spécifiques et imbriquées avant d’arriver à la page actuelle, Appareils photo reflex numériques.

Ce type de fil d’Ariane est particulièrement utile pour les utilisateurs qui accèdent à votre site Web à partir des résultats de recherche Google.

Cela leur permet de remonter rapidement dans la hiérarchie pour explorer plus d’options s’ils le souhaitent.

Fil d’Ariane basé sur les attributs

Le fil d’Ariane basé sur les attributs génère un suivi dynamique basé sur différents filtres que les utilisateurs peuvent appliquer sur une page.

Le fil d’Ariane basé sur les attributs est principalement utilisé sur les sites de commerce électronique. Où ils sont associés à un fil d’Ariane basé sur la hiérarchie.

Par exemple:

Fil d'Ariane pour les sites Web : Définition et utilisation - Exemple de fil d'Ariane basé sur les attributs d'Office Depot

Sur un site de commerce électronique, ce fil d’Ariane est utile lorsque les utilisateurs souhaitent visualiser tous les produits partageant les mêmes attributs.

Fil d’Ariane basé sur un chemin

Le fil d’Ariane basé sur le chemin affiche le chemin unique emprunté par les utilisateurs pour arriver à une page particulière. 

Mais au lieu de répertorier l’intégralité du chemin, ce type de fil d’Ariane est généralement implémenté sous la forme d’un bouton de retour. Ce qui aide les utilisateurs à revenir à la page précédente.

Voici un exemple d’Adidas : 

Fil d'Ariane pour les sites Web : Définition et utilisation - Exemple de fil d'Ariane basé sur un chemin d'Adidas

Le fil d’Ariane basé sur le chemin n’est pas utile dans de nombreux cas. Ils remplissent simplement la même fonction que le bouton « retour » de votre navigateur.

C’est pourquoi on ne voit pas souvent ce genre de fil d’Ariane. Les concepteurs de sites Web privilégient souvent les types de navigation par fil d’Ariane offrant plus de fonctionnalités.

5 bonnes pratiques pour la navigation dans le fil d’Ariane

Lors de la conception du fil d’Ariane pour votre site Web, suivez les meilleures pratiques ci-dessous.

1. Utilisez le fil d’Ariane pour prendre en charge la navigation principale

Le fil d’Ariane du site Web ne doit pas remplacer votre menu de navigation principal.

Considérez le fil d’Ariane comme un autre moyen pour les utilisateurs de naviguer sur votre site Web. Ils doivent créer des liens vers des pages très pertinentes et aider l’utilisateur à comprendre la structure de votre site.

Dans l’exemple ci-dessous, le menu principal de Dell apparaît directement au-dessus de son fil d’Ariane. Cela signifie que les utilisateurs ont un accès facile à une variété d’options de navigation.

Fil d'Ariane pour les sites Web : Définition et utilisation - Un exemple de navigation principale et de fil d'Ariane sur le site Web de Dell

Et un texte d’ancrage descriptif dans le fil d’Ariane permet aux utilisateurs de comprendre facilement où les liens les mèneront.

2. Utilisez des séparateurs entre les niveaux individuels

Séparez chaque lien dans le fil d’Ariane pour améliorer la lisibilité. 

De nombreux sites utilisent un signe supérieur à (>), une flèche (→) ou une barre oblique (/).

Voici un exemple de Walmart :

Fil d'Ariane pour les sites Web : Définition et utilisation - Walmart utilise une barre oblique pour séparer les éléments dans le menu fil d'Ariane

Le fil d’Ariane ne doit pas inclure de lien vers la page actuelle. 

Un lien vers la page actuelle ne sert à rien. Et peut créer de la confusion chez les utilisateurs.

Cependant, il est recommandé de nommer la page actuelle dans le fil d’Ariane.

Comme Best Buy l’a fait ici :

Fil d'Ariane pour les sites Web : Définition et utilisation - Page actuelle de Best Buy dans le fil d'Ariane intitulée « Ordinateurs portables Apple »

L’inclusion du nom de la page actuelle est utile pour :

  • Breadcrumbs UX , car il aide les utilisateurs à comprendre où ils se trouvent et ce que montre le sentier
  • Fil d’Ariane SEO , car il permet d’ajouter une mention naturelle de mot-clé à la page

4. Gardez la conception simple

La conception du site Web Breadcrumb doit être aussi simple et discrète que possible. Pour que ce soit utile sans distraire le lecteur du contenu principal de la page.

Par exemple, voici comment Slack a conçu le fil d’Ariane sur son site Web :

Fil d'Ariane pour les sites Web : Définition et utilisation - Fil d'Ariane sur le site Web de Slack

Le fil d’Ariane de Slack apparaît dans le coin supérieur droit du site Web, dans une police petite mais lisible, cohérente avec le reste du site Web. 

Même les séparateurs entre les catégories sont simples. 

Ces fils d’Ariane sont faciles à localiser et à comprendre. Mais ils n’attirent pas plus l’attention qu’ils n’en auraient besoin.

Les liens brisés sont mauvais pour le référencement et l’UX, il est donc important de vous assurer que votre fil d’Ariane fonctionne correctement.

Avec l’outil d’audit de site de Semrush , vous pouvez vérifier tous vos liens internes en même temps.

Après la configuration, accédez au rapport « Liens internes ».

Fil d'Ariane pour les sites Web : Définition et utilisation - Widget « Liens internes » sélectionné dans le tableau de bord d'audit de site

Consultez la section « Erreurs » pour voir si vous avez des liens rompus ou mal formés.

Si tel est le cas, cliquez sur le bouton « # problème(s) » pour voir les pages concernées.

Fil d'Ariane pour les sites Web : Définition et utilisation - Rapport « Liens internes » dans l'audit du site

Vous pouvez utiliser le bouton « Envoyer à… » pour créer une tâche dans Trello, Zapier ou Semrush CRM.

Après avoir appliqué un correctif, cliquez sur « Réexécuter la campagne » et assurez-vous que le problème disparaît.

Fil d'Ariane pour les sites Web : Définition et utilisation - Boutons « Envoyer à » et « Réexécuter la campagne » mis en évidence dans l'onglet Problèmes d'audit du site

Enfin, dirigez-vous vers l’onglet « Problèmes » pour consulter d’autres erreurs, avertissements et avis. Et améliorez le référencement technique de votre site .

Fil d'Ariane pour les sites Web : Définition et utilisation - Section Erreurs sous l'onglet « Problèmes »

Vérifiez votre fil d’Ariane avec l’outil d’audit de site

Comment ajouter du fil d’Ariane aux sites WordPress

Puisque WordPress est le système de gestion de contenu (CMS) le plus populaire , voyons comment ajouter du fil d’Ariane dans WordPress.

Certains thèmes WordPress prennent en charge le fil d’Ariane dès le départ.

Si votre thème ne le fait pas pour vous, vous pouvez utiliser un plugin comme Yoast SEO.

Allez dans « Plugins » > « Ajouter un nouveau ».

Fil d'Ariane pour les sites Web : Définition et utilisation - Menu des plugins dans WordPress

Recherchez « Yoast » et cliquez sur « Installer maintenant ». 

Fil d'Ariane pour les sites Web : Définition et utilisation - Bouton "Installer maintenant" sélectionné sous Yoast SEO

Appuyez sur le bouton « Activer » qui apparaît une fois l’installation terminée.

Ensuite, vous devez ajouter un petit morceau de code à la section du fichier header.php de votre thème.

Si vous manquez de prouesses techniques, nous vous recommandons de demander de l’aide à un développeur de votre équipe. Changer votre fichier de thème peut entraîner de gros problèmes pour votre site si vous faites des erreurs.

Si vous êtes à l’aise, copiez le code ci-dessous.

&lt;?php<br>if ( function_exists('yoast_breadcrumb') ) {<br>yoast_breadcrumb( '&lt;/p>&lt;p id="breadcrumbs">','&lt;/p>&lt;p>' );<br>}<br>?>

Et accédez à « Apparence » > « Éditeur de fichiers de thème » dans la barre latérale.

Fil d'Ariane pour les sites Web : Définition et utilisation - "Éditeur de fichiers de thème" sélectionné dans le menu de la barre latérale

Dans l’éditeur de thème, collez le code que vous avez copié dans la section « header.php » de votre thème. 

Fil d'Ariane pour les sites Web : Définition et utilisation - Code collé dans l'éditeur de thème, sous la section « header.php »

Ensuite, cliquez sur « Mettre à jour le fichier » pour enregistrer les modifications.

Fil d'Ariane pour les sites Web : Définition et utilisation - Bouton "Mettre à jour le fichier" en surbrillance

Après cela, allez dans « Yoast SEO » > « Paramètres » dans la barre latérale.

Fil d'Ariane pour les sites Web : Définition et utilisation - "Paramètres" sélectionnés dans la section Yoast SEO

Ensuite, faites défiler jusqu’à « Avancé » > « Fil d’Ariane ».

Fil d'Ariane pour les sites Web : Définition et utilisation - Accédez au fil d'Ariane

Un formulaire apparaîtra dans lequel vous pourrez configurer votre fil d’Ariane en fonction de la façon dont vous souhaitez qu’il apparaisse sur votre site Web.

Fil d'Ariane pour les sites Web : Définition et utilisation - Formulaire « fil d'Ariane » dans Yoast SEO

Enfin, activez l’option « Activer le fil d’Ariane pour votre thème » située sous le formulaire.

Fil d'Ariane pour les sites Web : Définition et utilisation - Option « Activer le fil d'Ariane pour votre thème » mise en surbrillance

Autres ressources

Surveillez votre fil d’Ariane avec Semrush

L’outil d’audit de site de Semrush peut vous aider à vérifier les fils d’Ariane brisés. Et assurez-vous que votre schéma de fil d’Ariane fonctionne correctement.

Inscrivez-vous gratuitement pour l’essayer. Et accédez à une variété d’autres outils utiles, notamment :

  • On Page SEO Checker : obtenez des idées d’optimisation basées sur les pages les mieux classées
  • Backlink Analytics : découvrez quels sites renvoient à vous et à vos concurrents
  • Suivi de position : surveillez les performances de votre site Web dans les résultats de recherche Google

Fil d’Ariane pour les sites Web : FAQ

C’est quoi le fil d’Ariane sur un site web ?

Le fil d’Ariane est une aide visuelle qui indique à l’utilisateur où il se situe dans la hiérarchie du site. Cette caractéristique permet à la navigation par le fil d’Ariane d’apporter une information contextuelle à l’utilisateur et l’aide à trouver des réponses aux questions suivantes : Où suis-je ?

Où placer le fil d’Ariane ?

Le fil d’Ariane est présent sur l’ensemble des pages à l’exception de la page d’accueil. Sa position dans la page doit toujours être la même, de préférence entre le header et le contenu principal de la page. L’ensemble de ses éléments sont cliquables, à l’exception de la page consultée.

C’est quoi le site Fil d’Ariane ?

Le fil d’ariane permet aux visiteurs de se repérer sur la toile, et ce, même s’ils sont situés dans les profondeurs du site. Ainsi, pour remonter en arrière, les internautes n’ont pas besoin d’utiliser le bouton précédent. Il leur suffit de cliquer sur les catégories du breadcrumb pour parcourir les niveaux supérieurs.

Qu’est-ce que le fil d’Ariane en SEO ?

Ce fil d’Ariane est devenu une expression utilisée dans le web pour désigner une ligne directrice sur un site web. Concrètement, il se matérialise par une suite de liens en arborescence qui indiquent comment arriver sur une page depuis la page d’accueil.

Partager cet Article :
Newsletter
Recevez des astuces et des ressources gratuites directement dans votre boîte de réception.
Derniers Articles
☰ Navigation Rapide
0
J'adorerais vos pensées, veuillez commenter.x