Qu’est-ce qu’un fil d’Ariane et comment en installer un sur son blog ?


Vous l’avez peut-être remarqué : depuis mi-avril 2015, Google affiche dans ses résultats de recherche le chemin d’une page, que l’on appelle aussi le « fil d’Ariane » en langage web. Autrement dit, le moteur de recherche montre la place qu’occupe la page dans l’organisation de votre site.

Regardez par exemple cet article sur le fil d’Ariane. Si vous le dénichez sur Google, vous verrez que le moteur de recherche identifie qu’il est rangé dans la catégorie « Créer un blog » de No Tuxedo :

Affichage du fil d'Ariane sur Google
Affichage du fil d'Ariane sur Google

Mais qu’est-ce qu’un fil d’Ariane, aussi appelé « breadcrumbs » en anglais ? A quoi sert-il et comment l’afficher sur son blog ? Dans cet article, je vous propose de découvrir pourquoi c’est utile à vos visiteurs et bénéfique pour les moteurs de recherche !

5 bonnes raisons d’afficher un fil d’Ariane sur son blog

Le fil d’Ariane indique aux internautes à quel endroit ils se trouvent sur votre blog. C’est sa mission première… mais elle a en réalité de nombreuses facettes.

1. Les breadcrumbs constituent un repère pour vos visiteurs

Le fil d’Ariane permet d’abord d’indiquer exactement à vos visiteurs où ils se trouvent et comment un article est positionné dans la « logique » globale de votre site. Par exemple, si vous consultez cet article sur un livre intitulé « Maestro », vous pouvez savoir grâce au fil d’Ariane qu’il existe sur le blog d’autres critiques de livres, sans même avoir ouvert le menu.

Breadcrumbs : exemple sur No Tuxedo

Bien sûr, il y a toujours sur un site plusieurs manières de se repérer : en faisant une recherche sur le moteur de recherche, en utilisant le menu, en navigant parmi les articles anciens. Le fil d’Ariane est un moyen d’orientation supplémentaire (il ne doit d’ailleurs jamais remplacer un menu par exemple).

2. Les breadcrumbs sont positionnés en haut de page

Tous les sites qui affichent un fil d’Ariane le positionnent a minima en haut de page (il arrive que certains en mettent un second en bas de page si celle-ci est très longue).

Ça signifie qu’ils apparaissent très tôt dans le code de votre page… et que les moteurs de recherche tombent vite dessus. Ils peuvent ainsi explorer plus facilement les différentes rubriques d’un site.

3. Le fil d’Ariane souligne l’architecture de votre site

Le fil d’Ariane souligne par définition les catégories importantes de votre site avec des liens riches en mots clés. Un plus pour donner un coup de pouce à la compréhension du sens d’une page.

Google a même déposé un brevet relatif à l’affichage des breadcrumbs dans ses résultats de recherche, les décrivant comme « un moyen d’extraire une ou plusieurs structures hiérarchiques d’un site web ».

4. Le fil d’Ariane peut vous aider à retenir les visiteurs

Un visiteur qui tombe sur votre site via une page « profonde », c’est-à-dire un article ancien, va souvent avoir tendance à ne lire que l’article qui l’intéresse sans aller visiter le reste du site.

Le fil d’Ariane, en lui indiquant l’existence d’une rubrique « parente » réunissant des articles sur le même sujet, peut vous aider à conserver l’attention de ces visiteurs de passage et à améliorer votre taux de rebond.

Ça reste toutefois un comportement minoritaire car rares sont ceux qui utilisent le fil d’Ariane pour naviguer sur un site.

5. Un fil d’Ariane est facile à utiliser

Le principe même d’un fil d’Ariane est présent partout dès que vous commencez à utiliser un ordinateur. Quand vous vous promenez sur votre disque dur, que vous ayez un Mac ou un PC, l’organisation de vos dossiers apparaît sous cette forme :
Arborescence d'un PC

Un fil d’Ariane est une simple succession de liens donc n’importe quel visiteur, qu’il soit expert ou débutant en informatique, comprend vite comment s’en servir. Il a par ailleurs une structure toujours identique : le lien vers la page d’accueil se trouve à gauche et plus on va vers la droite, plus on accède à un niveau « profond » de l’organisation du site.

Sur les très gros sites web, vous avez parfois une profondeur énorme, par exemple : Mode > Femme > Manteaux et Vestes > Manteaux > Manteaux mi-longs > Manteaux mi-longs Comptoir des Cotonniers. Chaque partie du fil d’Ariane offre alors toute une sélection de produits.

Comment afficher un fil d’Ariane sur son blog ?

Si votre thème de blog ne prend pas en charge les fils d’Ariane, il est possible d’en ajouter mais cela exige de toucher au code de votre thème. Par conséquent, pensez bien à en faire une sauvegarde avant toute modification.

Créer un fil d’Ariane sur WordPress

Vous pouvez ajouter des breadcrumbs en installant le plugin Breadcrumb NavXT, qui est gratuit et bien noté par ses utilisateurs.

Direction le menu Extensions > Ajouter de WordPress pour l’installer et l’activer.

Après avoir effectué cette étape, vous devez modifier le code de votre thème pour y insérer les lignes suivantes :

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
    <?php if(function_exists('bcn_display')) {
        bcn_display();
    } ?>
</div>

A quel endroit ? En général, on fait apparaître le fil d’Ariane surtout sur les articles (aussi bien ce que WordPress appelle les « articles » que ce qu’il appelle les « pages »).

Par conséquent, vous devrez modifier les fichiers single.php et page.php de votre thème, en insérant le code à l’endroit souhaité pour que le fil d’Ariane s’affiche au bon endroit. Je ne peux malheureusement pas vous donner d’instructions plus précises car chaque thème est codé différemment.

Ensuite, le plugin vous propose de nombreux paramètres : vous pouvez par exemple choisir l’apparence du « séparateur » entre les liens. Par exemple, les afficher sous cette forme : Accueil > Catégorie > Sous-catégorie… ou sous cette forme : Accueil | Catégorie | Sous-catégorie. Vous pouvez aussi choisir pour chaque type de page la façon dont le fil d’Ariane s’affiche ou ne s’affiche pas (catégories, mots-clés, accueil, page de recherche, page auteur, etc).

Vous pouvez aussi afficher des fils d’Ariane si vous utilisez le plugin Yoast SEO, en les activant depuis le menu SEO > Réglages SEO > Onglet Fil d’Ariane.

Vous aurez alors quelques options à disposition, comme le choix du séparateur ou l’intitulé de la page d’accueil mais cette méthode vous offre moins de possibilités de personnalisation que le plugin Breadcrumb NavXT. Là aussi, il faudra insérer quelques lignes de code dans les fichiers single.php et page.php si votre thème ne prend pas en charge les fils d’Ariane par défaut.

Le site de Yoast SEO propose une explication plus complète sur le code à insérer.

Sur No Tuxedo, j’ai adapté le code de fil d’Ariane proposé par l’excellent blog de SeoMix.

Ajouter un fil d’Ariane sur Blogger

Rendez-vous dans la rubrique Thème du menu et cliquez sur « Modifier le code HTML ».

Sur Blogger, quand on ajoute une nouvelle fonctionnalité, il faut absolument que deux éléments soient présents : d’une part, un code commençant par « b:includable » qui correspond au contenu de la nouvelle fonctionnalité en question ; d’autre part, un code commençant par « b:include » à l’endroit où vous voulez afficher cette fonctionnalité.

Cliquez avec votre souris dans la zone où est écrit le code puis faites Ctrl + F (sur PC) ou Cmd + F (sur Mac). Un champ de recherche va s’afficher. Cherchez si la ligne suivante est déjà présente dans le code ou pas :

<b:include data='posts' name='breadcrumb'/>

Si elle ne l’est pas, nous allons l’ajouter. Cherchez la ligne <b:include data='top' name='status-message'/> dans le code et juste après, copiez-y la ligne évoquée ci-dessus, comme ceci :

Inclure des breadcrumbs sur Blogger

Le code commençant par include ayant bien été ajouté, nous allons maintenant ajouter celui qui commence par includable.

Cherchez dans le code cette ligne : <b:includable id='main' var='top'>. Au-dessus cette fois-ci, vous allez copier tout le code ci-dessous. Il indique à Blogger qu’il doit afficher un fil d’Ariane partout (articles, archives, page réunissant tous les articles portant un même libellé) sauf sur la page d’accueil.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'> 
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Accueil</span></a></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> >
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
</b:if>
</b:loop>
<b:else/>
</b:if>
> <span><data:post.title/></span>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Accueil</span></a></span> > Archives sur <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Accueil</span></a></span> > Tous les articles
<b:else/>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Accueil</span></a></span> > Articles sur le thème "<data:blog.pageName/>"
</b:if>
</div>
</b:if></b:if></b:if></b:if></b:includable>

Ensuite, si vous voulez personnaliser l’affichage, vous devez chercher la ligne </b:skin> et juste au-dessus, y ajouter vos customisations graphiques. Par exemple, le code suivant vous permettra d’avoir une marge de 20 pixels sous votre fil d’Ariane et d’afficher juste avant la phrase « Vous êtes ici :  »

.breadcrumbs {margin-bottom:20px;}
.breadcrumbs:before {content:"Vous êtes ici : ";}

Et si tout se passe bien, votre fil d’Ariane va s’afficher comme sur l’exemple ci-dessous : l’article « Ceci est un titre » porte le libellé « Chocolat »… donc tout va bien !

Fil d'Ariane sur Blogger

Bien sûr, avoir un fil d’Ariane n’est pas indispensable, surtout si votre blog est encore petit. Mais quand on commence à avoir plusieurs centaines d’articles, c’est un petit bonus non négligeable pour rendre l’architecture du site plus transparente.

Vous utilisez ce système sur votre blog ou, en tant que visiteur, sur les sites que vous consultez ?

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

19 commentaires sur “Qu’est-ce qu’un fil d’Ariane et comment en installer un sur son blog ?

  • Callistta

    Super ce truc. Mon thème le fait avec yoast seo donc je n’ai eue aucun code a installé en plus.
    Merci de cette article je ne connaissais pas ce fil d’arianne.

    Répondre à Callistta
    • Marlène

      C’est assez utile et ça prend peu de place sur la page alors autant le mettre :)

      Répondre à Marlène
  • Elodie

    Bonjour et merci beaucoup pour vos articles qui m’apprennent beaucoup et qui me permettent de personnaliser (un peu !) mon blog, moi qui n’y connais absolument rien en codage !

    Répondre à Elodie
  • Charlène

    Bonjour Marlène, j’ai essayé d’installer le breadcrumb sur mon blog (blogger) et cela m’enlève tout le fil de mes articles, plus aucun article s’affiche, as-tu une idée du pourquoi du comment ?

    Je te remercie, Charlène

    Répondre à Charlène
    • Marlène

      Bonjour Charlène, le problème survient souvent quand une balise a été mal fermée. Par exemple, si au lieu de </b> tu écris </b, ça peut faire disparaître l’affichage de tout le code qui se situe après la balise mal fermée.

      Répondre à Marlène
    • Charlène

      D’accord merci, je vais me pencher sur le sujet.

      Répondre à Charlène
  • Sophasia

    Bonsoir Marlène,

    Heureusement que ton blog existe! Merci pour ton message au fait :) J’ai dû rétablir les paramètres du blog 1 à cause de la boîte de commentaires qui s’était envolée! Du coup, je vais devoir remettre les mains dans le cambouis. Je commence par le fil d’ariane car c’est le plus soft :)

    Bonne soirée. @+.

    Répondre à Sophasia
    • Marlène

      Ah ça arrive malheureusement, il suffit d’une petite erreur ! Bon courage pour tout remettre en ordre :)

      Répondre à Marlène
    • Sophasia

      Ouf, problèmes réglés! Au-delà des tutos, je suis super contente d’avoir découvert Icon Finder, Color Hex et le générateur like Btn :)
      Bonne journée.

      Répondre à Sophasia
  • InformaGenie

    Merci beaucoup mais alors dans le SERP, que ferrais-je que ça puisse aussi apparaitre dans le SERP Google ? Il y a d’autres trucs à faire ou simplement ça ?

    Répondre à InformaGenie
  • Ludo

    Que? Qui, quoi =??? :-o quesque c’est que ce charabia??? :-)
    Bon, j’ai bien compris ce qu’est le fil d’arriane mais absolu mais pas du tout comment on l’installe (#quicheeninformatique)

    Répondre à Ludo
    • Marlène

      C’est surtout que tu n’as pas WordPress.org ;) Sur WordPress.com tu ne peux pas ajouter de plugins.

      Répondre à Marlène
    • Ludo

      aaaaaaaaaaaaah bon voilà :-)
      Tout s’explique….

      Répondre à Ludo
  • Rose Marketing

    Les petits détails compte et le fil d’Ariane est important. Merci pour les tutoriels !!

    Répondre à Rose
    • Marlène

      De rien ! Tout dépend de la taille du site je crois, sur un petit blog ça n’a pas forcément une grande pertinence :)

      Répondre à Marlène
  • Pazzapa

    Intéressant, j’avoue n’y avoir pas vraiment réfléchi jusqu’à maintenant. Bon, en même temps, je n’ai qu’un article sur mon blog pour le moment donc ce n’est pas compliqué. Je ne pense pas encore vraiment SEO pour le moment (peut-être est-ce un tort), je me dis que ce début, je me concentre sur le confort des lecteurs.

    Répondre à Pazzapa
    • Marlène

      Ton commentaire avait été filtré par mon anti-spam ! Grrrr. Pour ce qui est de « penser SEO », je crois qu’il faut – comme avec tous les conseils web & co – se poser la question du « Pourquoi ? » Pourquoi tient-on son blog ? Par plaisir, par défi personnel de vouloir atteindre 100 000 visiteurs par mois ? Par désir d’en faire un travail à temps plein ? Répondre à cette question détermine beaucoup de choses dans la vision que l’on a du blogging et même dans le ton qu’on adopte.

      Par exemple, je trouve que tous les blogueurs qui vendent des ebooks pour réussir dans le blogging ont tendance à avoir un discours qui sent le commerce à plein nez et qui ne cache rien de leurs intentions. Ca ne veut pas dire que le contenu est nul mais disons qu’on sent dans la manière d’écrire que ce n’est pas la même approche que d’autres blogs.

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.