Comment ajouter un fil d’Ariane sur WordPress ? Guide complet 2025

Pourquoi le fil d’Ariane est essentiel pour votre site WordPress

Le fil d’Ariane (ou breadcrumb) est un élément de navigation secondaire qui affiche le chemin parcouru par l’utilisateur depuis la page d’accueil jusqu’à la page actuelle. Sur WordPress, il améliore l’expérience utilisateur et le référencement naturel. En 2025, les moteurs de recherche valorisent les sites bien structurés : le fil d’Ariane aide Google à comprendre l’architecture de votre site et peut apparaître dans les résultats de recherche, augmentant ainsi votre taux de clics.

Si vous utilisez un thème moderne ou un constructeur de page, il inclut souvent cette fonctionnalité. Mais si ce n’est pas le cas, plusieurs méthodes existent pour l’ajouter, que vous soyez débutant ou développeur.

Méthode 1 : Ajouter un fil d’Ariane avec un plugin WordPress

La solution la plus simple pour les non-techniciens est d’utiliser un plugin. Voici les meilleures options.

Yoast SEO : le plugin tout-en-un

Yoast SEO, principalement connu pour ses fonctionnalités SEO, intègre nativement un fil d’Ariane. Pour l’activer :

• Allez dans SEO → Général → Fonctionnalités et activez le fil d’Ariane.
• Ensuite, rendez-vous dans SEO → Apparence de la recherche → Fil d’Ariane pour personnaliser le séparateur, le texte de l’accueil, etc.
• Copiez le code court et collez-le dans votre thème (fichier header.php, single.php, page.php, etc.) via l’éditeur de thème ou un plugin de snippets.

Avantage : gratuit, facile, compatible avec la plupart des thèmes. Inconvénient : nécessite de modifier un fichier de thème.

Breadcrumb NavXT : le spécialiste

Breadcrumb NavXT est un plugin dédié uniquement aux fils d’Ariane. Il offre un contrôle précis sur les ancres, les types de pages et les hiérarchies.

• Installez et activez le plugin.
• Utilisez le code <?php bcn_display(); ?> dans votre thème, ou le widget disponible dans Apparence → Widgets.
• Configurez les options dans Réglages → Breadcrumb NavXT (séparateur, affichage des catégories, etc.).

Avantage : très flexible, idéal pour les sites complexes. Inconvénient : nécessite des connaissances en PHP pour l’intégration dans le thème.

Rank Math SEO : alternative gratuite

Rank Math SEO propose également un fil d’Ariane intégré. Activez-le dans Rank Math → Tableau de bord → Modules, puis configurez l’apparence. Insérez le shortcode

Méthode 2 : Ajouter un fil d’Ariane sans plugin (code personnalisé)

Si vous préférez ne pas utiliser de plugin pour des raisons de performance ou de contrôle, vous pouvez ajouter le fil d’Ariane via du code PHP et CSS. Cette méthode convient aux utilisateurs avancés.

Étape 1 : Ajouter la fonction dans functions.php

Ouvrez le fichier functions.php de votre thème enfant (recommandé) et collez le code suivant :

function custom_breadcrumb() {
    if (!is_home()) {
        echo '';
    }
}

Ce code crée une fonction simple qui affiche le fil d’Ariane pour les pages, articles et catégories. Vous pouvez l’enrichir pour gérer les archives, les tags, etc.

Étape 2 : Insérer l’appel dans votre thème

Dans le fichier où vous souhaitez afficher le fil d’Ariane (par exemple header.php ou single.php), ajoutez :

Étape 3 : Styliser avec CSS

Ajoutez dans votre fichier style.css :

.breadcrumb {
    padding: 10px 0;
    font-size: 14px;
    color: #666;
}
.breadcrumb a {
    text-decoration: none;
    color: #0073aa;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

Méthode 3 : Utiliser un constructeur de page (Elementor, Beaver Builder, etc.)

Les constructeurs de pages comme Elementor incluent souvent un widget dédié au fil d’Ariane. Par exemple, dans Elementor :

• Faites glisser le widget Fil d’Ariane (Breadcrumbs) sur votre page ou template.
• Configurez les options : séparateur, lien d’accueil, etc.
• Appliquez le template à vos articles, pages ou archives via les réglages du thème.

Cette méthode est très visuelle et ne nécessite aucune ligne de code.

Bonnes pratiques SEO pour le fil d’Ariane

Un fil d’Ariane bien implémenté peut booster votre référencement. Voici les points clés :

• Utilisez des données structurées : ajoutez le schema BreadcrumbList (souvent inclus automatiquement par les plugins Yoast ou Rank Math). Cela permet à Google d’afficher le fil d’Ariane dans les SERP.
• Placez-le en haut de page : juste après l’en-tête, avant le contenu principal.
• Évitez les doublons : si votre thème affiche déjà un fil d’Ariane, désactivez-le avant d’en ajouter un autre.
• Hiérarchie logique : respectez l’arborescence réelle de votre site (ex: Accueil > Catégorie > Article).
• Texte d’accueil pertinent : utilisez un terme comme « Accueil » plutôt qu’une icône seule.

Erreurs fréquentes à éviter

• Fil d’Ariane non cliquable : chaque étape (sauf la page courante) doit être un lien.
• Mauvais ordre : l’ordre doit aller de la racine vers la page actuelle.
• Ignorer les pages d’erreur 404 : n’affichez pas de fil d’Ariane sur une page 404.
• Négliger le responsive : testez l’affichage sur mobile ; les séparateurs doivent être lisibles.
• Utiliser un plugin trop lourd : si vous n’avez besoin que du fil d’Ariane, préférez un plugin léger comme Breadcrumb NavXT.

Comment tester votre fil d’Ariane

Après l’installation, vérifiez son bon fonctionnement :

1. Naviguez sur différentes pages (accueil, catégorie, article, page parent/enfant).
2. Vérifiez que les liens sont corrects et mènent aux bonnes pages.
3. Utilisez l’outil de test des données structurées de Google pour valider le schema BreadcrumbList.
4. Consultez Google Search Console pour voir si des erreurs sont signalées.

Questions fréquentes sur le fil d’Ariane WordPress

Recommandations finales pour un fil d’Ariane réussi

Pour terminer, voici une checklist à suivre :

• Choisissez la méthode adaptée à votre niveau (plugin, code, constructeur).
• Activez les données structurées BreadcrumbList.
• Placez le fil d’Ariane bien visible, juste sous l’en-tête.
• Testez sur desktop et mobile.
• Vérifiez l’absence d’erreurs dans Google Search Console.

Avec ces étapes, vous offrez à vos visiteurs une navigation claire et vous renforcez votre SEO. N’hésitez pas à adapter le style CSS à votre charte graphique.

Photo by Anthony Macajone on Pexels