Fil d'ariane WordPress : Comment l'installer avec Yoast SEO ?

Ajouter un fil d’ariane à WordPress avec Yoast SEO

L’onglet avancé mérite d’être découpé et ainsi de déroger au déroulé de nos tutoriels sur Yoast. Commençons par le fil d’Ariane qui a une importance en référencement, mais surtout en termes d’expérience utilisateur puisqu’il permet à l’internaute, notamment sur de gros sites, de se retrouver facilement en fonction des catégories, des pages où il se trouve. Par défaut, les thèmes proposent des fils d’Ariane (pour la plupart) ; Toutefois, tous les templates ne sont pas aussi performants pour le référencement. Yoast SEO propose une version intéressante de ce chemin de navigation. Explications.

  1. Définition du fil d’ariane
  2. Avis : Points forts et points faibles, utilité
  3. Configurer avec Yoast SEO
  4. Comment installer le fil d’ariane
  5. Customiser avec les CSS

Qu’est-ce que le fil d’ariane ou Breadcrumb en anglais ?, définition

Aide à la navigation dans les pages, le fil d’Ariane est une composante ancienne de l’ergonomie en matière de Web. Il permet aux utilisateurs de votre site Web de repérer le lieu où ils se trouvent dans votre site. En ce qui concerne WordPress, le breadcrumb doit donc s’afficher dans tous les éléments et composants du thème ; il vous faut donc l’intégrer sur les homes.php, single.php et autres archive.php . Apparaissant horizontalement sur les pages, il est cliquable et permet par exemple pour ce blog de trouver la catégorie parente à l’article, ou même de revenir à l’accueil.

Du point de vue du référencement, cela facilite les moteurs de recherche dans la lecture et la hiérarchisation des contenus. C’est une composante d’optimisation SEO à notre sens importante avec les meta balises titles, les titres de pages, et dans une moindre mesure les urls.

Par ailleurs, de notre point de vue, et en fonction de la catégorisation du blog, il permet de raconter une histoire logique, pour rester dans le principe du fil continu donnant une explication du contenu sémantique du site Internet. Exemple de fil d’ariane :

exemple de fil ariane avec yoast seo pour wordpress

Conséquences dans les résultats de recherche de Google :

affichage il d ariane dans google

Quels sont les points forts et points faibles du fil d’Ariane de Yoast ? Son utilité

Au rayon point fort, la facilité d’installation comme nous le voyons plus bas. La possibilité également de le customiser à moindre frais. Rapide à mettre en place donc !

Mais surtout, son vrai point fort, c’est qu’il est proposé dans la meta box lorsque celle-ci est activée :

metabox fil d'ariane yoast seo pour wordpress

Ce qui veut dire que vous avez ici la possibilité de mettre autre chose que le titre <h1> de votre page ou article de blog. C’est un travail supplémentaire mais qui a du sens si vous cherchez à jouer sur la sémantique en variant notamment les adjectifs, les pluriels/singuliers etc. En outre, du point de vue de l’utilisateur, c’est aussi possible de réduire la taille du fil d’Ariane pour les écrans plus petits. On est parfois sur des titres à rallonge 😉 quand on fait du blogging.

Côté négatif, et pas des moindres (si vous suivez nos tutoriels sur Yoast, vous noterez que des améliorations sont toujours possibles), le fil d’Ariane de Yoast n’inclut pas les micro-données de schema.org. Plutôt que d’être conçu via les  microdonnées souhaitables pour hiérarchiser les les catégories, il est en RDFa. En attendant un autre tutoriel ou les changements opérés par les équipes de Yoast elles-mêmes, et si vous n’êtes pas réfractaire à l’utiliser quand même, passons à sa configuration.

Configurer son fil d’ariane avec Yoast SEO

Avant toute chose, précisons que vous avez besoin d’avoir configuré un thème enfant pour éviter de recommencer à chaque mise à jour 🙂

Dans votre back-office de WordPress, rendez-vous sur l’onglet avancé et cliquez sur « Activé » :

configurer breadcrumb yoast seo

Maintenant vous pouvez choisir le type de séparateur que vous souhaitez, un texte d’encrage pour la page d’accueil, un préfixe pour le fil d’Ariane des catégories, un préfixe pour les pages de recherche et pour la 404.

Nous vous invitons à mettre des textes si possible différents, voire assez originaux (supprimer le terme d’archives par exemple pur le fil d’Ariane des archives). Mettez en gras la dernière page pour rappeler au visiteur qu’il est bien sur la recherche qu’il a effectué.

Concernant la taxonomie à afficher, précisez pour vos articles avec l’onglet déroulant « catégorie ». C’est ce qui permet de suivre plus facilement le fil de votre blog. N’oubliez pas d’enregistrer 😉

Comment insérer le fil d’ariane dans votre thème

Par défaut, le fil d’ariane de Yoast, même s’il est activé, ne va pas s’afficher. Il faut pour cela, soit aller dans votre éditeur WordPress, soit passer par les FTP pour faire une modification de vos pages. Là il faut intégrer le code suivant dans le <head> des fichiers concernés :

<?php
if ( function_exists('yoast_breadcrumb') ) {
     yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
?>
Code reacrumb Yoast (fil d’ariane)

Chaque thème propose souvent des fichiers différents (portfolio, services,etc.), voici un exemple avec le fichier single.php de Twenty Sixteen :

<?php
get_header(); ?>
<-->Placer le code à la suite<--->
Breadcrumb dans single.php de twenty sixteen

Placer le code après l’envoi du <header> nous donne quelque chose comme ceci :

exemple installation fil d'ariane

Mais évidemment, vous avez la possibilité de placer également ce bout de code dans le header.php afin d’éviter de le mettre partout ailleurs.

Customiser votre fil d’Ariane pour le rendre visible avec les CSS

Un beau breadcrumb bien visible, c’est plus cliquable et en plus la taille du texte revêt une importance. Voici un exemple de ce que vous pouvez placer dans votre fichier .css de votre site WordPress, à partir d’une classe #breadcrumb mais évidemment, votre créativité est plus remarquable :

#breadcrumbs a:hover{
    color: red;
    font-size: 20px;
}
Un Hover en gros et en rouge ?!

Ce qui donne au passage de la souris une catégorie d’article plus grosse et en rouge :

mettre un hover sur le fil d'ariane

Ce tutoriel sur le fil d’Ariane de Yoast étant terminé, vous avez la possibilité de continuer la configuration du plugin SEO en abordant le paramétrage des permaliens.

[Total : 6    Moyenne : 5/5]

A propos de l'auteur(e)

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat

Publicité Google

Google AdSense est un programme de monétisation proposé par Google aux éditeurs de sites web pour générer des revenus publicitaires à la performance. Un éditeur de site web peut adhérer gratuitement au programme et bénéficier d’affichages publicitaires sur son site en y plaçant des tags publicitaires correspondant aux formats de son choix par simple copier / coller d’un code fourni par le programme.
Google utilise des cookies pour rendre la publicité plus attractive pour les utilisateurs et plus rentable pour les éditeurs et les annonceurs. Les cookies servent ainsi également à sélectionner les publicités en fonction de leur pertinence pour l'utilisateur, à améliorer les rapports sur les performances des campagnes et à éviter la diffusion d'annonces que l'utilisateur a déjà vues.

Google AdSense
NID,SID,DSID, FLC, AID, TAID