Configurer et installer le breadcrumb avec WordPress SEO by Yoast

Mise en place d'un breadcrumb (ou fil d'Ariane) avec WordPress SEO by Yoast

Vous l’avez certainement déjà remarqué, il vous a sauté aux yeux, tel un phare dans la nuit, vous faisant arrêter tout autre activité tant le changement était flagrant et remarquable. Ou pas.
Je parle bien sûr du breadcrumb, ou fil d’Ariane, qui est apparu, dans l’en-tête des articles de ce blog.

Breadcrumb ?

Le Breadcrumb, ou miette de pain en français, en référence au Petit Poucet qui sème des morceaux de pain pour retrouver son chemin (désolé pour le spoiler, le cas échéant) est aussi appelé fil d’Ariane en Français.

Il s’agit d’un outil en ergonomie permettant de savoir sur quelle partie du site se situe la page consultée. Par exemple, cette page se trouve dans la catégorie Web. Voilà le breadcrumb correspondant :

Le breadcrumb (ou fil d'Ariane) de ce blog généré avec WordPress SEO by Yoast
Le breadcrumb (ou fil d’Ariane) de ce blog
Toutefois, le breadcrumb n’est pas seulement une aide à la navigation pour vos visiteurs, c’est également une information supplémentaire donnée à Google sur le plan de votre site.

En effet, il est possible d’afficher le fil d’Ariane directement dans les résultats de recherche de Google grâce aux données structurées. Cette fonctionnalité n’améliore certainement pas la position de vos articles, mais peut peut-être attirer l’oeil des visiteurs.

Le breadcrumb (ou fil d'Ariane) généré par WordPress SEO by Yoast dans la page de résultat de Google
Le résultat dans la page de résultat de Google
En outre, l’extension WordPress SEO by Yoast, permet d’implémenter facilement cette fonctionnalité, modulo quelques modifications de thème enfant. Voyons comment faire.

Configuration dans WordPress SEO by Yoast

La première chose a faire est d’activer le fil d’Ariane dans la configuration de l’extension WordPress SEO by Yoast.

Tout se passe dans SEO/Liens internes.

La configuration du breadcrumb (ou fil d'Ariane) avec WordPress SEO by Yoast
La configuration du breadcrumb (ou fil d’Ariane)
Le détail des paramètres :

  • Le séparateur est le (ou les) caractère entre chaque partie du breadcrumb. J’ai choisi le caractère slash (/).
  • Le texte d’ancrage pour la page d’accueil est le texte fixe pour la partie la plus à gauche du fil d’Ariane, qui permet de revenir sur la page d’accueil. Cette accès à la page d’accueil peut être supprimé en cochant la case ‘Supprimer la page blog’
  • Les préfixes : il est possible d’ajouter un texte avant le fil d’Ariane, ‘Vous êtes ici’ par exemple pour les articles, ‘Archives’ lors d’une navigation dans les archives, ‘votre recherche’ en cas de recherche ou un texte prédéfini pour une page non trouvée.
  • La taxonomie à afficher est le plus souvent par catégories. Il s’agit de la méthode que vous préférez pour classer vos articles.

Insertion du code dans le thème

Une fois le fil d’Ariane configuré et activé, il est nécessaire de modifier le thème pour indiquer où l’afficher. En effet, le plugin ne peut pas déterminer un emplacement générique, il dépendra de votre goût et de votre thème.

Pour ma part, pour que le breadcrumb s’affiche sur toutes les pages sans trop d’effort, j’ai choisi de l’insérer dans le fichier header.php, c’est-à-dire l’en-tête du blog, inclus sur chaque page (les articles, les archives, les catégories, la page d’accueil, …).

Pour inclure le code du breadcrumb, il suffit de copier le code fourni sur la page de configuration, à savoir :

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

à l’endroit qui vous convient le mieux dans le fichier header.php de votre thème enfant. C’est aussi simple que ça.

Un peu de décoration

Maintenant que le fil d’Ariane est en place, il est certainement nécessaire de modifier son apparence.

Pour cela, éditez le fichier style.css de votre thème enfant, et ajoutez par exemple :

/* Breadcrumbs */
#breadcrumbs { padding: 10px; color: #666666;  }
.home #breadcrumbs { display: none; }

La première ligne ajoute un espacement (padding) et une couleur au contenu du fil d’Ariane.
La deuxième supprime l’affichage du breadcrumb sur la page d’accueil.

Vérifier la prise en compte par Google

Une fois le fil d’Ariane activé, configuré et mis en place dans le thème enfant, vous pouvez voir immédiatement le résultat sur votre blog.

Aussi, le code généré automatiquement par WordPress SEO by Yoast contient déjà les balises de données structurées pour Google.

En revanche, la prise en compte par Google pour l’afficher dans ses résultats de recherche est un peu plus longue, suivant la fréquence de visite de son robot sur votre site.

Ainsi, pour vérifier que l’installation s’est déroulée correctement, il faudra s’armer de patience.

Aussi, pour vérifier que l’installation s’est déroulée correctement, avant même qu’il ne soit effectif dans les résultats de Google, ou pas, le breadcrumb devrait être visible dans Google Webmaster Tools, dans les données structurées.

Le breadcrumb (ou fil d'Ariane) dans Google Webmaster Tools
Le résultat dans Google Webmaster Tools

Le mot de la fin

Il n’est pas prouvé que le fil d’Ariane soit vraiment utile pour le positionnement dans les pages de résultats de Google, mais comme chaque détail a l’air de compter, pourquoi s’en priver ?

En outre, cette fonctionnalité est un plus dans l’ergonomie du site, et ça, c’est bien.

Cet article vous a été utile ? Partage it !

40 réflexions au sujet de « Configurer et installer le breadcrumb avec WordPress SEO by Yoast »

  1. Hello David

    Une fois ces « petites opérations », ici fort bien expliquées, effectuées … Vous pouvez aussi modifier le texte de votre fil d’ariane histoire de ne pas faire de « duplicate content de titre ».

    Pour ce faire, aller dans l’onglet « avancé » dans ce que j’appelle « le bloc de contrôle » sous l’article 🙂 et modifier la phrase du fil d’ariane (si vous le souhaitez)

  2. Je vien d’ajouter « le petit Poucet » à la main..

    N’ayant pas envie de le voir mis en avant sur mes billets (j’en ai un en haut mais dans le sens inverse et google ne classe alors pas correctement), c’est en toute bas de billet, en tout petit. C’est surtout pour aider Google.

    Aucune idée si c’est utile, on verra dans le temps.

    1. En effet, on n’a aucune preuve de l’influence sur les résultats Google, comme souvent. Mais ça ne coûte rien (ou presque), alors autant en profiter 🙂

      David

  3. Bonsoir,
    cela peut être utile pour le visiteur et c’est déjà ça.
    je me demande si il prend page-mère et page-fille?

    1. Bonjour Darknote,
      La hiérarchie des pages, définie dans l’article ou la page est bien affichée dans le fil d’Ariane.
      David

  4. Merci pour cet article bien détaillé.
    Deux questions me viennent à l’esprit.

    – Peut-on utiliser « display:none » pour #breadcrumbs si on ne souhaite pas afficher le fil d’Ariane sur le site mais qu’il soit bien présent dans les résultats de recherche?

    – Le fait d’ajouter le fil dans le header est-il bien à conseiller sans prise de risque? Sur le site de l’extension il est précisé de n’inclure le morceau de php que dans les templates page et single (http://yoast.com/articles/wordpress-seo/#bread-crumbs).

    1. Bonjour Arthurpeace,
      Pour répondre à tes deux questions :
      – le contenu du fil d’Ariane va être pris en compte pas le moteur de recherche, même s’il n’est pas affiché sur la page d’accueil
      – passer par single.php et page.php permet de déterminer un emplacement plus fin et surtout de ne pas afficher le fil d’Ariane sur toutes les pages. En procédant ainsi, il n’apparait pas sur les pages de catégories et de tags.
      Dans le cas d’un blog qui ne contient que des pages, des articles et des pages d’archives (tags, catégories, …), je pense que c’est aussi bien , au moins pour le visiteur.
      David

  5. Je suis d’accord avec toi David, ayant plusieurs sites WP, je suis pour passer par single.php et page.php. Cela permet effectivement de déterminer un emplacement plus fin et oui au final de ne pas afficher le fil d’Ariane sur toutes les pages. Comme ça tout le monde est content, même le visiteur, lol.

  6. Pour ce qui est de SEO by Yoast, c’est un plugin vraiment pas mal. Cependant, si vous tentez de mettre en place un site architecturé en silo (cf. les notions de cocon sémantique de Laurent Bourrelly et Christian Méline), le plugin devient useless et mal adapté. Ce type de breadcrumb ne fonctionne pas dans ce type d’architecture et pour moi c’est simplement l’avenir du SEO.

  7. @David Ah, mais c’est moi qui ait partagé ce lien de Scratch99 qui date sur Twitter il y a quelques jours. Pas mal le travail de traduction.

    Ouais, disons qu’avec cette méthode, on peut outrepasser un netlinking bourrin.

    🙁 pas sympa d’avoir squizzé l’ancre de mon client sur un beau PR4 :p

    1. Bonsoir Alain,
      Tu as déjà pu essayer ? C’est aussi efficace ?
      Pour ton ancre, j’ai un peu hésité, mais sémantiquement ça ne le faisait pas trop 🙂
      David

  8. @Didier, j’ai déjà mis en place une architecture en Silo pour l’un de mes clients. Le problème, c’est que ça nécessite pas mal de contenu, donc pas mal de budget rédactionnel (ou pas mal de temps)ce qui fait gonfler la note. Mais ça marche à fond les ballons (et encore je ne connaissais pas certaines choses que j’ai appris dernièrement).

    Donc pour faire simple, dans WordPress, au lieu d’utiliser le système d’article, on utilise simplement le système de page (avec sa hiérarchie de pages parentes; sans catégories, ni classement par meta-tags, ni archives, ni rien d’autre -peut-être un breadcrumb qui irait en profondeur-). Ensuite, on va donner au site un menu par silo. Les liens, dans chaque page, vont remonter vers le niveau supérieur et descendre vers le niveau inférieur. Les pages de même niveau doivent aussi être liées entre elles. De cette façon, il y aura une sorte de capillarité dans la distribution du PR interne (par exemple sur votre site j’ai trouvé 2 pages PR4 et 5 -j’ai pas fait de recherche plus précises- pour placer mon petit client ;p , normalement, avec un linking interne plus puissant, les pages liées doivent pouvoir avoir au moins un PR3; soit donc 4 pages en PR3 minimum). Par ailleurs, on va dégager tout la saleté de WordPress. C’est du temps en nettoyage de code et surtout on va limiter le Javascript.

    Il faut noter que c’est assez difficile à mettre en place sur des blogs, mais pas impossible. Il faut juste prendre le pli au niveau rédactionnel. J’ai acheté le module de formation de Laurent Bourrelly sur le cocon sémantique, il explique tout et c’est très didactique. Sa méthode est super précise, même s’il y a d’autres méthodes (celle de Bruce Clay notamment) que je trouve trop rigides.

    PS: Euh, bon pour l’ancre, avec ce qu’on apprend des recherches scientifiques sur la manière dont Google trouve une logique sémantique entre les liens, ce n’est pas forcément aussi monolithique qu’on le croit (je te renvois à ce qu’explique Sylvain Peyronnet). Il faut prendre en compte la notion de glissement sémantique.

    En gros, une ancre peut ne rien avoir à voir avec ton site et être pertinente. Exemple: Ananas et Dieudonné. Si j’avais un site sur les ananas à référencer, je pourrais spammer les sites sur Dieudonné, car Google a regroupé les deux requêtes dans le même champs sémantique (du fait de la chanson de mauvais goût). Du coup, en glissant, si je dois référencer le rayon fruit d’Auchan… Fruits > Ananas > Dieudonné (je spamme). Bon ici, j’aurai du mal à expliquer le passage de Breacrumb à Taxi. J’ai juste trouvé un magnifique PR4 et un autre PR5 sur un site de confiance avec de beaux articles, ce qui ne gâche rien pour le plaisir de lire.

    Juste un truc quand même: il est beaucoup plus logique de mettre « taxi lille » comme ancre vers le site de mon client, plutôt qu’Alain. Sémantiquement, ce lien n’a pas de sens. Car lorsque Google voit ça, il ne trouve aucun sens entre « Alain », « creation de site web » et « taxi à lille ». C’est décontextualisé complètement. Du coup, mon avis SEO là dessus, c’est qu’on peut avoir 3 liens (sur 3 commentaires différents) avec ancre optimisés. Au delà, il ne faut plus accepter de lien du tout dans les commentaires (ni avec ancre prénom, ni avec ancre optimisée), au risque de fuite SEO et de perte de sens.

    N.B: Et y’a aussi un côté sympa dans mes spam-co. Quand j’ai de petits sites comme ça sur des petites requêtes, je me fais plaisir: je lis vraiment l’article. Je m’inscris aux réponses. Je débat. Je reviens. C’est une démarche assez éloignée du bourrin 😉

    Allez accepte, je sais que tu en meurs d’envie 😉 lol

    1. Très intéressant 🙂
      Tu as un blog ou un site ou tu parles de tout ça ? Si ce n’est pas le cas, tu devrais 😉
      Sinon, je ne m’appelle pas Didier… alors pour ça, pas d’ancre…
      Aller si tu l’as bien mérité, je te remercie même pour tes commentaires.
      Did… euh David

  9. lollllll désolé, je suis mort de fatigue Didier lolllll… j’suis mort de rire là.

    Non, je n’ai pas de blog SEO dans la mesure où ça tacle énormément entre SEO et je n’ai pas le temps pour ça (je n’aime pas ça non plus et je n’aime pas me mettre en avant). La mise en place du siloing se fait depuis très longtemps aux USA chez certains avertis (tape Siloing sur Youtube, tu seras étonné de la date des vidéos 😉 ). Si j’avais raconté que le contenu se suffisait à lui-même il y a 3 ans (je l’ai vérifié par la pratique), on m’aurait pris pour un fou, clashé, taclé, etc. Pourtant, c’est la meilleure manière de ne pas prendre une pénalité de Google. Heureusement, Laurent Bourrelly, Sylvain Peyronnet et Christian Méline font un travail énorme dans ce sens, repris un peu partout. C’est très positif.

    Et puis, si je faisait des articles SEO aujourd’hui, j’aurais écrit des choses du type: Désoptimiser son site pour le SEO ou Utiliser les annuaires est bon point pour votre site, etc. C’est à contre courant de tout ce qui se dit sur les blogs SEO, pourtant, par la pratique et les tests, on est pas mal à avoir dégagé certains principes sur la dispositions des liens, sur l’optimisation des balises ou pas, sur l’utilisation des annuaires et site de CP ou pas. Les résultats sont inverses à ce qui se dit. Pas super envie de me faire flinguer en place publiquer 😉

    Ps: Merci pour l’ancre, c’est super sympa 🙂
    Ps2: Je viens de faire un tour sur les autres articles. C’est très pro!

  10. C’est rare que je lise des commentaires jusqu’au bout. Mais les interventions d’Alain avec Di…..David ^^. Impressionnant.
    Je suis entrain de lancer un site ecommerce sous la méthode de Laurent : blog/ecommerce et j’appuie le SEO uniquement sur l’architecture en silo ainsi que la recherche universelle. Je commence à avoir des retours, mais je me sentais bloqué par l’usage des articles sous WP.
    Maintenant que je lis les commentaires, cela me semble une évidence : c’est l’utilisation des pages au lieu d’article. Comment j’ai pu passer à côté. Effectivement, on peut les déplacer et les organiser comme on veut… boulette sur boulette depuis le lancement de ce site.
    Personnellement, je laisse le fil d’ariane, car c’est une aide de navigation pour l’internaute, et l’internaute, c’est quand même pour lui que l’on fait des sites, non ?

    1. Bonjour Shiva,
      C’est vrai que cette discussion était enrichissante 🙂
      Si ça t’intéresse, la suite de la traduction de l’article est parue sur WP Formation.
      Et j’aime bien aussi le fil d’Ariane.
      David

  11. Merci pour ce tuto très utile. On pourrait ajouter les micros donnés breadcrumb du coup , pour avoir le fil dariane dans les pages de résultats de recherche 🙂

  12. Bonjour et merci pour cet article de qualité.
    Ma question est la suivante : j’aimerai ne pas afficher le fil d’ariane sur ma page d’accueil mais je ne sais pas quel code utiliser et où l’insérer. Quelqu’un pourrait-il m’aiguiller ?
    Merci d’avance

      1. Merci de ta réponse david. J’avais effectivement mis ce code dans mon fichier syle.css de mon thème en regardant un de tes articles mais ça ne fonctionne pas lorsque je ne choisi pas « page d’accueil statique » pour ma home page.

        1. Je viens de regarder ton site (si c’est bien celui du domaine de ton adresse mail), et le breadcrumbs est bien caché par le code CSS.
          J’imagine que c’est un problème de cache ?
          David

      2. Bonjour,
        si on mets le code dan single.php, page.php, category.php ou archive.php, on n’aura pas de fil d’ariane en page d’accueil.

  13. En effet, on ne le vois pas car j’ai mis la page d’accueil comme page statique.
    Quand je clique sur « personnalisé », j’ai un onglet « page d’accueil statique ». J’ai ensuite le choix entre :
    La page d’accueil affiche
    > Les derniers articles
    > Une page statique

    Je clique sur page statique puis j’ai le choix entre :
    Page d’accueil
    Page des article

    Si je met comme page d’accueil ma home page, le fil d’Ariane ne s’affiche pas mais si je laisse sur « sélectionner » j’ai le fil d’ariane qui s’affiche. Vous pouvez le voir sur mon site.

    En fait j’ai un problème avec la page statique. Quand je sélectionne ma home page comme page statique, impossible d’accéder aux url http://www.site.com/page/1 etc
    Alors que si je laisse sur « sélectionner » tout fonctionne bien ^^

  14. Je viens de me rendre compte que même en laissant sur sélectionner, le fil d’ariane s’affiche également sur les url page/1 etc. Je pense que c’est un problème de thème ou de redirection. Je vais voir ça avec les concepteurs du thème.
    Merci de vos réponses en tout cas.

  15. Bonjour,

    Merci pour cet article cela m’a permis en tant que super novice d’installer mon fil d’ariane.
    J’aurai cependant une petite question. Sur ma Home le fil d’ariane s’est placé tout en haut de ma barre ce qui n’est pas très beau, comment pourrais-je faire pour la mettre en dessous de mon logo? Pour mieux visualiser je vous laisse l’adresse de mon site http://www.les-paons-blancs.com . Merci à vous!

    1. Bonjour Laville,
      Deux solutions :
      1) contacter le développeur du thème pour traiter ce cas quand même plutôt répandu
      2) créer un thème enfant si ce n’est pas déjà fait pour y faire les (très simples) modifications, à savoir ajouter le bout de code de l’article en dessous du logo.
      David

  16. Bonjour , je viens de comprendre un truc , sur mon blog le Rush Damage , chaque fois j’édité directement le code du fil d’Ariane , avec un petit style css pour le couleur etc , chaque mise a jours Boom retour case dépars refait un tours , la je viens de comprendre qu’il faut je face un thème enfant humm cool ça ça sent la mission 🙂

    En tout cas merci du partage 🙂

    Pour ma pars débutant en html je me suis fait un petit site à la main http://consultant-seo.ninja/ ,il a quelque erreur shema.org etc . Ma question es ce que ce codage marche pour les site codé a la main en html ou est t’il principaux à Yoast ? je vais tester pour bidouiller car j’aimerais faire une page ou deux sur mon site .

    1. Bonjour Olivier,
      En effet, le thème enfant c’est important 🙂
      Sinon, les micro-données ajoutées par Yoast sont lues par Google. Pour un site fait à la main, il faut créer la structure… à la main.
      David

  17. Salut David , oui je suis en train le shema org à la main , jpeux te dire que la c’est pas un wp que je vais sortir en deux jours lol l’arrachage de cheveux , mais bon j’adore ça 🙂 j’ai des galére avec le htaccesse pourtant j’ai ajouter les trois ligne pour le www vers l’url sans les trois www , j’avance tranquille

Laisser un commentaire

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

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.