Qu'est-ce que Breadcrumbs

Vous comprendrez ce que sont les fils d'Ariane, pourquoi ils aident les visiteurs et Google, comment ils améliorent votre référencement, les différents types que vous pouvez utiliser et les étapes simples pour les ajouter à votre site web.

Que sont les miettes de pain ?

Le fil d'Ariane est un lien de navigation qui indique aux utilisateurs où ils se trouvent sur votre site web. Il apparaît en haut de la page et montre le chemin depuis la page d'accueil jusqu'à la page actuelle.

Exemple du monde réel

Imaginez-vous dans un centre commercial. Le plan indique : « Vous êtes ici : Entrée du centre commercial → Deuxième étage → Électronique → Téléviseurs »

Le fil d'Ariane fonctionne de la même manière sur les sites web.

À quoi ils ressemblent

Sur un site de commerce électronique :

Home > Men's Clothing > Shirts > Casual Shirts > Blue Cotton Shirt

Sur un blog :

Home > SEO Tips > Technical SEO > What is Breadcrumbs

Sur un site de recettes :

Home > Recipes > Desserts > Cakes > Chocolate Cake Recipe

Chaque élément est cliquable. Les utilisateurs peuvent revenir instantanément à n'importe quelle section précédente.

Pourquoi le fil d'Ariane est important

Le fil d'Ariane est utile à la fois pour vos visiteurs et pour les moteurs de recherche.

Avantages pour les visiteurs

Navigation facile Les visiteurs peuvent revenir aux catégories parentes sans utiliser le bouton de retour. Un seul clic suffit pour y accéder directement.

Connaître leur emplacement Les utilisateurs comprennent facilement où ils se trouvent sur votre site. Cela réduit la confusion et la frustration.

Explorer le contenu connexe Si un utilisateur arrive sur une page produit spécifique, le fil d'Ariane affiche les catégories connexes qu'il pourrait souhaiter explorer.

Réduire les rebonds Lorsque les visiteurs savent où ils se trouvent et peuvent naviguer facilement, ils restent plus longtemps et explorent davantage de pages.

Avantages du référencement naturel

Meilleure compréhension de Google Google perçoit clairement la structure de votre site. Il comprend comment les pages sont liées entre elles.

Extraits enrichis dans la recherche Google affiche souvent un fil d'Ariane dans les résultats de recherche à la place de votre URL. Cela rend votre fiche plus attrayante et plus claire.

Exemple dans les résultats de recherche :

Your Site Name
Home › Products › Laptops › Gaming Laptops
Best Gaming Laptops 2026 - Top Picks...

Cela semble mieux que :

Your Site Name
yoursite.com/products/laptops/gaming/page-123
Best Gaming Laptops 2026 - Top Picks...

Liens internes Le fil d'Ariane crée automatiquement des liens internes. Cela permet de répartir la valeur des liens sur l'ensemble de votre site.

Taux de rebond inférieur Lorsque la navigation est aisée, les utilisateurs restent plus longtemps. Google détecte ce signal positif.

Types de chapelure

Il existe trois principaux types. La plupart des sites utilisent le premier.

Fil d'Ariane géolocalisé (le plus courant)

Indique l'emplacement de la page dans la structure de votre site.

Exemple :

Home > Blog > SEO Tips > Technical SEO

Idéal pour:

• Sites de commerce électronique
• Blogs par catégories
• Sites d'actualités
• Tout site avec une hiérarchie claire

Pourquoi ça marche: Les utilisateurs voient exactement où ils se trouvent et peuvent naviguer facilement dans la hiérarchie.

Fil d'Ariane basé sur les attributs

Affiche les attributs ou les filtres sélectionnés par l'utilisateur.

Exemple sur un site de vente en ligne :

Home > Women's Shoes > Size 8 > Color: Black > Brand: Nike

Idéal pour:

• Commerce électronique avec filtres
• Sites avec fonction de recherche avancée
• Catalogues de produits

Pourquoi ça marche: Affiche comment les utilisateurs ont affiné leur recherche. Ils peuvent supprimer les filtres en cliquant sur les niveaux du fil d'Ariane.

Fil d'Ariane basé sur l'histoire

Affiche le chemin suivi par l'utilisateur pour atteindre la page actuelle (comme l'historique du navigateur).

Exemple :

Previous Page > Page Before That > Current Page

Idéal pour: Quasiment jamais recommandé. Les utilisateurs disposent d'un bouton retour dans leur navigateur pour cela.

Pourquoi éviter : C'est déroutant car le parcours de chacun est différent. Cela ne favorise pas le référencement.

Comment ajouter des fils d'Ariane à votre site

Pour les utilisateurs de WordPress (méthode simple)

Utilisation du plugin Yoast SEO :

1. Installez le plugin Yoast SEO (gratuit)
2. Accédez à SEO → Apparence dans les résultats de recherche
3. Cliquez sur l'onglet Fil d'Ariane
4. Activez l'option « Activer le fil d'Ariane ».
5. Personnaliser le séparateur (utiliser > ou / ou →)
6. Enregistrer
7. Ajoutez le code à votre thème à l'endroit où vous souhaitez que le fil d'Ariane apparaisse.

Code à ajouter au thème :

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

Utilisation du plugin Rank Math :

1. Installer le plugin Rank Math
2. Accédez à Rank Math → Paramètres généraux
3. Cliquez sur l'onglet Fil d'Ariane
4. Activer le fil d'Ariane
5. Choisissez le style de séparateur
6. Personnaliser l'apparence
7. Ajoutez le shortcode à l'endroit où vous souhaitez afficher le fil d'Ariane :

Utilisation du plugin Breadcrumb NavXT :

1. Installer Breadcrumb NavXT
2. Accédez aux Paramètres → Navigation par fil d'Ariane XT
3. Configurer les paramètres d'affichage
4. Choisissez un séparateur
5. Ajouter le code au thème : <?php bcn_display(); ?>

Pour les sites web HTML (méthode manuelle)

Ajoutez ce code à l'endroit où vous souhaitez que le fil d'Ariane apparaisse (généralement après l'en-tête, avant le contenu principal) :

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li><a href="/category/subcategory">Subcategory</a></li>
    <li>Current Page</li>
  </ol>
</nav>

Avec un style basique :

<style>
  nav[aria-label="Breadcrumb"] ol {
    list-style: none;
    padding: 10px 0;
    margin: 0;
  }
  
  nav[aria-label="Breadcrumb"] li {
    display: inline;
    font-size: 14px;
  }
  
  nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
    content: " > ";
    padding: 0 8px;
  }
  
  nav[aria-label="Breadcrumb"] a {
    color: #0066cc;
    text-decoration: none;
  }
  
  nav[aria-label="Breadcrumb"] a:hover {
    text-decoration: underline;
  }
</style>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops">Laptops</a></li>
    <li>Gaming Laptops</li>
  </ol>
</nav>

Pour Shopify

Utilisation des paramètres du thème :

1. La plupart des thèmes Shopify incluent un fil d'Ariane par défaut.
2. Accéder à la boutique en ligne → Thèmes
3. Cliquez sur Personnaliser
4. Recherchez les paramètres du fil d'Ariane dans les options du thème.
5. Activer et styliser selon les besoins

Si votre thème ne comporte pas de fil d'Ariane :

1. Modifier le code du thème
2. Ajoutez le code de fil d'Ariane au fichier product.liquid ou collection.liquid.
3. Utilisez l'extrait de code de fil d'Ariane de Shopify

Pour Wix

1. Wix ne possède pas de fil d'Ariane intégré.
2. Vous devez ajouter manuellement à l'aide d'éléments de texte
3. Vous pouvez également utiliser des applications tierces de fil d'Ariane disponibles sur Wix App Market.
4. Reliez-les correctement.

Balise de schéma pour le fil d'Ariane

Balisage de schéma permet à Google de comprendre et d'afficher votre fil d'Ariane dans les résultats de recherche.

Qu'est-ce que Schema?

Le balisage Schema est un code qui indique précisément à Google la signification de vos balises de navigation. Il augmente les chances que ces balises apparaissent dans les résultats de recherche.

Comment ajouter un schéma de fil d'Ariane

Format JSON-LD (recommandé) :

Ajoutez ce code dans le code de votre page. <head> section ou avant </body>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://yoursite.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Products",
      "item": "https://yoursite.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Laptops",
      "item": "https://yoursite.com/products/laptops"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Gaming Laptops"
    }
  ]
}
</script>

Remarques importantes:

• Chaque niveau nécessite un numéro de position
• Incluez l'URL complète de chaque élément
• Le dernier élément (page actuelle) n'a pas besoin de l'URL « item ».
• Les numéros de position commencent à 1

Tester votre schéma

Utilisez le test des résultats enrichis de Google :

1. Rendez-vous sur : search.google.com/test/rich-results
2. Saisissez l'URL de votre page
3. Cliquez sur « Tester l’URL »
4. Vérifier si le schéma de fil d'Ariane est détecté
5. Corrigez les erreurs affichées.

Utilisation de Search Console :

1. Accédez à la Search Console de Google
2. Cliquez sur « Améliorations »
3. Recherchez la section « Fil d'Ariane »
4. Vérifiez les erreurs ou les avertissements
5. Corrigez les problèmes et demandez une nouvelle exploration

Pratiques d'excellence

Suivez ces règles pour que le fil d'Ariane fonctionne au mieux.

Conception et mise en place

Où les placer

• En haut de la page, sous l'en-tête
• Titre de la page ci-dessus
• Facile à repérer mais non distrayant

Conseils de style

• Réduisez la taille de la police par rapport au contenu principal.
• Utilisez des couleurs subtiles (pas trop vives).
• Rendez les liens clairement cliquables.
• Utilisez les séparateurs courants : > / → •

Mauvais placement :

• Bas de page (personne ne le verra)
• Intégré au menu de navigation (déroutant)
• En bas de page (cela va à l'encontre du but recherché)

Règles relatives au contenu

Soyez bref

• Ne laissez pas la chapelure trop longue.
• Si le site comporte plus de 5 niveaux, envisagez de simplifier sa structure.
• Les longs fils d'Ariane submergent les utilisateurs

Utiliser des étiquettes claires

• « Accueil », et non « Page d'accueil » ou « Principal ».
• Utilisez les noms de catégories réels
• Évitez les abréviations
• Correspondance des étiquettes du menu de navigation

Page Actuelle

• Afficher la page actuelle dans le fil d'Ariane
• Mais rendez-le non cliquable
• Modifiez le style (plus foncé ou sans soulignement).

Règles techniques

Commencez toujours par la maison

✓ Good: Home > Category > Page
✗ Bad: Category > Page

Rendre les liens fonctionnels

• Tous les fils d'Ariane (sauf celui de la page actuelle) doivent être cliquables.
• Les liens doivent mener aux pages correctes.
• Tester chaque lien

Utilisez des séparateurs cohérents

• Choisissez un séparateur (>, /, →)
• Utilisez-le partout
• Ne mélangez pas différents séparateurs.

mobile bienvenus

• Le fil d'Ariane devrait fonctionner sur les téléphones
• Faites-les assez grands pour pouvoir taper
• Envisagez de masquer les niveaux intermédiaires sur mobile s'ils sont trop longs.

Erreurs courantes à éviter

Erreur n° 1 : Tout rendre cliquable

Faux:

Home > Category > Subcategory > Current Page

(où « Page actuelle » est également un lien)

À droite:

Home > Category > Subcategory > Current Page

(où « Page actuelle » est du texte brut, et non un lien)

Pourquoi : Les utilisateurs se trouvent déjà sur cette page. Cliquer dessus ne ferait que la recharger.

Erreur n° 2 : Les traces de navigation ne correspondent pas à l’URL.

URL: votresite.com/shop/mens/shoes/sneakers/nike-air

Mauvaise piste :

Home > All Products > Nike Air

Bons indices :

Home > Shop > Men's > Shoes > Sneakers > Nike Air

Pourquoi : Le fil d'Ariane doit refléter la structure réelle du site et le chemin d'URL.

Erreur n° 3 : Trop de niveaux

Faux:

Home > Shop > All > Men > Clothing > Tops > Shirts > Casual > Cotton > Blue > Size M > Product

À droite:

Home > Men's Clothing > Shirts > Blue Cotton Shirt

Pourquoi : Trop de niveaux perturbent les utilisateurs. Simplifiez la structure de votre site.

Erreur 4 : Absence de balisage Schema

Absent: Simple fil d'Ariane HTML sans code de schéma

Pourquoi c'est mauvais : Il est possible que Google n'affiche pas votre fil d'Ariane dans les résultats de recherche. Vous risquez ainsi de passer à côté de meilleures opportunités.

Correction: Ajoutez toujours le code de balisage de schéma.

Erreur n° 5 : Bouton Accueil dupliqué

Faux: Avoir un lien « Accueil » dans le menu de navigation principal ET dans le fil d’Ariane, côte à côte.

À droite: C'est tout à fait acceptable. Mais assurez-vous que les deux éléments fonctionnent et semblent avoir été placés intentionnellement.

Erreur n° 6 : Style incohérent

Faux:

• Quelques pages : Accueil / Catégorie / Page
• Autres pages : Accueil > Catégorie > Page

À droite: Choisissez un style et utilisez-le partout sur votre site.

Quand NE PAS utiliser de chapelure

Le fil d'Ariane n'est pas adapté à tous les sites web.

Ignorer le fil d'Ariane si :

Sites à un seul niveau Si votre site ne comporte qu'une page d'accueil et quelques pages (comme un simple portfolio ou une page de destination), le fil d'Ariane est inutile.

Exemple :

Home
About
Contact
Services

Pas besoin de miettes de pain ici.

Parcours utilisateur linéaire Si les utilisateurs doivent suivre un chemin précis (comme un processus de paiement ou un formulaire en plusieurs étapes), le fil d'Ariane risque de les induire en erreur.

Sites très petits Si votre site comporte moins de 10 pages au total, le fil d'Ariane n'apporte aucune valeur ajoutée.

Structure du site plat Si toutes vos pages sont au même niveau (sans catégories ni hiérarchie), le fil d'Ariane n'a aucun sens.