Les breadcrumbs, appelés également « fils d’Ariane », sont des éléments de navigation permettant à vos visiteurs de se repérer aisément sur votre site et de revenir facilement sur les pages sur lesquelles ils ont navigué précédemment.
Ils jouent un rôle très important aussi bien pour l’expérience utilisateur (UX) du site qu’en termes de SEO. Ils peuvent en effet apparaître directement dans les résultats de recherche de Google et renforcer la visibilité de vos pages.
Grâce à cet article, vous saurez tout sur les breadcrumbs WordPress : comment les ajouter facilement et comment ils peuvent fortement améliorer la navigation et le référencement de votre site.
Table of Contents
Qu’Est-Ce qu’un Breadcrumb dans WordPress ?
Un breadcrumb se présente sous la forme d’un chemin hiérarchique allant de la page d’accueil vers la page actuellement consultée, en montrant toutes les pages intermédiaires dans l’arborescence du site. L’utilisateur sait ainsi où il se trouve à tout moment et peut remonter facilement dans les différentes sections.
Un breadcrumb se présente sous cette forme : Accueil > Catégorie > Sous-Catégorie > Page actuelle
Il existe différentes types de breadcrumbs :
Les Breadcrumbs Hiérarchiques
Ce sont les plus couramment rencontrés. Ils retracent toute la structure du site jusqu’à la page consultée.
Sur un blog par exemple, le breadcrumb se présentera sous cette forme : Accueil > Blog > Catégorie > Article
Les Breadcrumbs par Attributs
Ils sont surtout utilisés sur les sites de e-commerce. Ils se basent sur les différentes caractéristiques d’un produit. Par exemple pour des chaussures, ils utiliseront les attributs de marque, taille ou encore couleur, comme ceci : Accueil > Chaussures > Femmes > Chaussures de randonnée > Marque > Couleur
Les Breadcrumbs S’Appuyant sur l’Historique
Ces breadcrumbs reflètent le parcours de navigation de l’utilisateur. Ils retracent en fait tout son historique de navigation.
Par exemple : Page précédente > Catégorie > Produit
Tous ces types de breadcrumbs peuvent bien sûr être mis en place sur un site WordPress.
L’Avantage d’Utiliser les Breadcrumbs sur votre Site WordPress
Une Meilleure Expérience Utilisateur
Les breadcrumbs ou fils d’Ariane apportent un réel plus pour l’expérience utilisateur en améliorant la navigation au sein du site. Ils sont très utiles si votre site comporte de nombreuses pages ou de nombreux articles dans le cas d’un blog. Ils facilitent le retour aux pages précédentes sans avoir besoin de consulter un menu complexe ou d’utiliser le bouton « Retour » du navigateur.
Une Réduction du Taux de Rebond
Le taux de rebond est le pourcentage de visiteurs qui ne visitent qu’une seule page du site avant de le quitter. L’utilisation d’un fil d’Ariane encourage ces derniers à explorer d’autres pages en les leur plaçant quasiment « sous le nez ». Ils n’ont en effet qu’un clic à faire pour se retrouver sur une autre page, ce qui améliore grandement leur taux d’engagement.
Les Effets des Breadcrumbs sur le SEO
Une Meilleure Optimisation pour les Moteurs de Recherche
Les breadcrumbs permettent à Google de mieux comprendre la structure d’un site. Ils sont également utilisés par le moteur de recherche pour mettre en valeur une page, en affichant le breadcrumb directement dans les résultats de recherche. Cela a pour effet d’inciter le visiteur à se rendre directement sur la page qui l’intéresse et donc d’améliorer le CTR (taux de clic).
Une Meilleure Indexation des Pages
En comprenant mieux l’organisation du site, les moteurs de recherche vont pouvoir indexer les pages de celui-ci plus efficacement et plus rapidement. Sur le long terme, cela aura un impact sur le positionnement du site dans les résultats de recherche.
Ajouter des Breadcrumbs à votre Site WordPress
Installer un Thème prenant en Charge les Breadcrumbs
C’est la solution la plus simple, d’autant que de nombreux thèmes populaires comme Astra gèrent les breadcrumbs de façon native, sans avoir à modifier le code ou installer un plugin.
Ajouter des Breadcrumbs Manuellement
Ajouter des breadcrumbs à la main permet un meilleur contrôle de l’affichage de ces derniers. Vous devrez tout d’abord éditer les fichiers de votre thème, comme comme header.php
, single.php
, ou page.php
en ajoutant un code PHP qui va se charger d’afficher le fil d’Ariane.
Voici un exemple de code :
function custom_breadcrumb() {
echo ‘<a href= »‘.home_url().' » rel= »nofollow »>Accueil</a>’;
if (is_category() || is_single()) {
echo » > « ;
the_category(‘ > ‘);
if (is_single()) {
echo » > « ;
the_title();
}
} elseif (is_page()) {
echo » > « ;
echo the_title();
} elseif (is_search()) {
echo » > Résultats de recherche pour… « ;
echo ‘ »<em>’;
echo the_search_query();
echo ‘</em> »‘;
}
}
Puis vous devrez intégrer le code dans le thème en insérant cette fonction dans le fichier functions.php
puis en l’appelant dans les fichiers où vous souhaitez voir apparaître les breadcrumbs, par exemple dans header.php
ou single.php
:
<?php custom_breadcrumb(); ?>
Utiliser un Plugin pour Ajouter des Breadcrumbs
Les plugins sont une solution simplet et rapide pour ajouter des breadcrumbs à votre site sans avoir besoin de toucher au code. En voici quelques-uns parmi les plus couramment utilisés :
Les Breadcrumbs avec Yoast SEO
Yoast SEO est l’un des plugins les plus populaires pour l’optimisation SEO sur WordPress. Il comporte également une fonction permettant d’activer les breadcrumbs.
- Installez et activez Yoast SEO : Allez dans la section Extensions > Ajouter une extension puis recherchez « Yoast SEO ». Installez et activez l’extension.
- Activez les breadcrumbs : Allez dans SEO > Réglages généraux > Breadcrumbs dans le menu.
- Intégrez les breadcrumbs dans le thème : Si votre thème ne prend pas en charge les breadcrumbs, vous devrez insérer ce code PHP dans les fichiers
single.php
oupage.php
:
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id= »breadcrumbs »>’,'</p>’ );
} - Personnalisation de l’affichage : Vous pouvez personnaliser l’affichage des breadcrumbs dans le fichier CSS de votre thème ou à travers les options proposées par Yoast.
Les Breadcrumbs avec Rank Math
Rank Math est également un plugin SEO très utilisé dans le monde WordPress. Les étapes à suivre sont les mêmes que pour Yoast :
- Installez et activez Rank Math : Allez dans la section Extensions > Ajouter une extension puis recherchez « Rank Math ». Installez et activez l’extension.
- Activez les breadcrumbs : Allez dans Rank Math > Réglages généraux > Fil D’Ariane dans le menu.
- Intégrez les breadcrumbs dans le thème : Si votre thème ne prend pas en charge les breadcrumbs, vous devrez insérer ce code PHP dans les fichiers
single.php
oupage.php
:
if ( function_exists( ‘rank_math_the_breadcrumbs’ ) ) {
rank_math_the_breadcrumbs();
}
Les Breadcrumbs avec Breadcrumb NavXT
Breadcrumb NavXT est un plugin conçu spécifiquement pour ajouter des breadcrumbs à WordPress.
- Installez et activez Breadcrumb NavXT : Allez dans la section Extensions > Ajouter une extension puis recherchez « Breadcrumb NavXT ». Installez et activez l’extension.
- Configurez le plugin : Vous pouvez personnaliser le comportement ainsi que l’apparence du fil d’Ariane dans le menu dédié sur le tableau de bord de WordPress.
- Intégrez les breadcrumbs dans le thème : Si votre thème ne prend pas en charge les breadcrumbs, vous devrez insérer ce code PHP dans les fichiers
single.php
oupage.php
:
if ( function_exists( ‘bcn_display’ ) ) {
bcn_display();
}
Les Bonnes Pratiques à Suivre pour les Breadcrumbs WordPress
Respectez la Hiérarchie du Site
L’une des clés d’un breadcrumb efficace est de suivre une hiérarchie claire et cohérente. Le fil d’Ariane doit refléter la structure du site de manière logique, permettant aux utilisateurs de comprendre facilement où ils se trouvent et comment naviguer. Cela signifie que les pages parentes doivent être correctement organisées et affichées, en partant de la page d’accueil vers les sous-catégories et la page actuelle.
Par exemple :
Accueil > Blog > Catégorie > Sous-catégorie > Article
Assurez-vous que chaque élément du breadcrumb mène vers une page accessible et utile pour l’utilisateur, sans laisser de liens brisés ou redondants.
Ne Surchargez Pas les Breadcrumbs
Un fil d’Ariane doit avant tout être simple : ne le surchargez pas avec trop d’informations. Si l’utilisateur a le choix entre trop de niveaux différents, cela va créer de la confusion dans son esprit.
Si une page a trop de niveaux, vous pouvez envisager d’en fusionner certains afin de ne garder que les informations essentielles. Par exemple, si la page se trouve au sein d’une sous-sous-sous catégorie, n’afficher que la catégorie supérieure peut suffire.
Utilisez les Microdonnées (Schema.org)
Afin de tirer le meilleur parti des breadcrumbs d’un point de vue SEO, vous pouvez utiliser le balisage Schema.org, aussi appelé microdonnées.
Ces balises aident les moteurs de recherche à comprendre la structure de vos breadcrumbs et à mieux indexer vos pages. Cela peut également permettre à vos breadcrumbs d’apparaître dans les résultats de recherche Google, ce qui améliorera la visibilité de vos pages.
Voici un exemple de code HTML avec du balisage Schema.org :
<nav aria-label= »Breadcrumb »>
<ul itemscope itemtype= »http://schema.org/BreadcrumbList »>
<li itemprop= »itemListElement » itemscope itemtype= »http://schema.org/ListItem »>
<a href= »https://www.exemple.com » itemprop= »item »><span itemprop= »name »>Accueil</span></a>
<meta itemprop= »position » content= »1″ />
</li>
<li itemprop= »itemListElement » itemscope itemtype= »http://schema.org/ListItem »>
<a href= »https://www.exemple.com/categorie » itemprop= »item »><span itemprop= »name »>Catégorie</span></a>
<meta itemprop= »position » content= »2″ />
</li>
<li itemprop= »itemListElement » itemscope itemtype= »http://schema.org/ListItem »>
<span itemprop= »name »>Page actuelle</span>
<meta itemprop= »position » content= »3″ />
</li>
</ul>
</nav>
Offrez à vos Visiteurs de Jolis Breadcrumbs !
Les breadcrumbs sont une partie importante de l’expérience utilisateur. Ils doivent donc être fonctionnels mais aussi visuellement agréables. Veillez à ce qu’ils s’intègrent naturellement dans le design de votre site en modifiant les fichiers CSS de façon logique : utilisez les mêmes polices et les mêmes couleurs que celles présentes dans votre charte graphique. Utilisez également des séparateurs clairs comme « > », « » », ou « / » entre les niveaux pour améliorer la lisibilité.
Voici un exemple de CSS simple pour personnaliser l’apparence des breadcrumbs :
#breadcrumbs {
font-size: 14px;
color: #555;
}
#breadcrumbs a {
color: #0073aa;
text-decoration: none;
}
#breadcrumbs a:hover {
text-decoration: underline;
}
#breadcrumbs span {
color: #999;
}
Les Erreurs à Éviter Lors de l’Utilisation des Breadcrumbs WordPress
Ne Pas Implémenter les Breadcrumbs Correctement
Veillez à bien respecter la hiérarchie logique de votre site. En effet, ne pas suivre la logique de votre arborescence peut mener à ajouter de la confusion dans la tête de vos visiteurs.
Par exemple, un fil d’Ariane qui affiche des catégories incohérentes ou qui ne mène pas à des pages existantes diminue l’efficacité des breadcrumbs et peut frustrer vos visiteurs.
Assurez-vous que chaque lien dans vos breadcrumbs est fonctionnel et correspond à une page existante. De plus, évitez de créer des breadcrumbs trop complexes avec des niveaux de navigation inutiles, car cela pourrait nuire à la clarté de la navigation.
Ne Pas Se Soucier de l’Apparence des Breadcrumbs sur Mobile
N’oubliez pas que la majorité des internautes consultent Internet depuis leur mobile. Si vos breadcrumbs ne s’affichent pas correctement ou prennent trop de place sur les écrans de ces terminaux, cela nuira à l’expérience globale.
Assurez-vous donc que vos breadcrumbs soient bien responsives.
Utilisez des techniques CSS comme l’affichage en ligne et les ellipses (text-overflow: ellipsis
) pour réduire la longueur des breadcrumbs sur mobile tout en conservant leur utilité.
Exemple de CSS pour les appareils mobiles :
@media only screen and (max-width: 768px) {
#breadcrumbs {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
Ne Pas Tester vos Breadcrumbs WordPress
Une autre erreur classique est de ne pas tester correctement votre fil d’Ariane après l’avoir implémenté. Cela peut conduire à des problèmes comme des liens brisés, un affichage qui se fait mal ou des incohérences dans la hiérarchie des pages.
Vous devez donc tester vos breadcrumbs sur différentes pages avec plusieurs scénarii de navigation différents. Testez-les également sur différents navigateurs et différents appareils.
Conclusion
Les breadcrumbs sur WordPress ne sont donc pas un gadget : ils améliorent réellement l’expérience de vos utilisateurs et permettent d’améliorer votre référencement en fournissant à Google ce qu’il aime : un site bien structuré ! Et puis comme nous l’avons vu, il est très facile de les implémenter, que ce soit via un thème qui les prend en charger ou via des extensions dédiées.
Alors pourquoi vous en priver ? Si vous ne les utilisez pas encore, c’est le moment idéal pour les intégrer et profiter de leurs nombreux avantages !