Personnaliser le fil d’Ariane de Yoast

Installer un fil d’Ariane, également connu sous le nom de breadcrumb en anglais, sur votre site web est un moyen efficace d’améliorer la navigation et l’expérience utilisateur. Grâce à cet élément de navigation, vos visiteurs pourront facilement se déplacer sur votre site internet.

Dans cet article, nous aborderons la personnalisation du fil d’Ariane de Yoast, un plugin WordPress très populaire pour le SEO. Nous expliquerons ce qu’est le fil d’Ariane, présenterons Yoast SEO et sa fonctionnalité de fil d’Ariane, puis nous vous guiderons étape par étape pour personnaliser le fil d’Ariane avec Yoast SEO. Enfin, nous partagerons quelques conseils pratiques pour une personnalisation efficace du fil d’Ariane.

Qu’est-ce que le fil d’Ariane ?

Avant de plonger dans la personnalisation du fil d’Ariane, il est important de comprendre son rôle dans la navigation d’un site web. Le fil d’Ariane tire son nom de la légende grecque de Thésée, qui utilisait un fil pour retrouver son chemin dans le labyrinthe du Minotaure. Sur un site web, le fil d’Ariane est un élément de navigation qui affiche la hiérarchie des pages visitées, de l’accueil jusqu’à la page en cours.

Chaque élément du fil d’Ariane est cliquable, ce qui permet aux utilisateurs de revenir facilement à une page précédente ou de naviguer vers une page parente. C’est particulièrement utile sur les sites complexes ou ceux avec plusieurs niveaux de navigation.

Présentation de Yoast SEO et de sa fonctionnalité de fil d’Ariane

Avec PageRank, Yoast SEO est un plugin WordPress incontournable pour l’optimisation du référencement. Il offre de nombreuses fonctionnalités pour améliorer le classement de votre site dans les moteurs de recherche, y compris une fonctionnalité de fil d’Ariane personnalisable.

Avec Yoast SEO, vous pouvez activer et personnaliser simplement le fil d’Ariane pour correspondre à la structure de votre site. Il offre des options de configuration avancées, notamment la personnalisation des séparateurs, des textes par défaut, et la gestion des liens pour différents types de contenu.

Yoast ne remplacera jamais un référencement réfléchi. Il reste un indicateur. Ce n’est pas parce que tous les voyants seront au vert que votre site sera bien référencé.

Personnaliser le fil d’Ariane avec Yoast SEO

Passons maintenant à la personnalisation du fil d’Ariane avec Yoast SEO.

Activer l’option fil d’Ariane de Yoast dans l’administration

Dans votre administration, rendez-vous dans « Yoast seo > Réglages > Avancé > Fil d’Ariane »

Descendez dans la page et cochez l’option « Activer le fil d’Ariane pour votre thème »

Une fois cette option activée, il va falloir afficher le fil dans votre page.

Vous pourrez le faire en intervenant dans le header.php de votre thème enfant :

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

Soit en utilisant ce shortcode :

Personnaliser le fil d’Ariane de Yoast dans l’administration

Ici, on va paramétrer les bases de votre fil d’Ariane comme l’apparence du séparateur, sur ce blog, j’ai choisi de le remplacer par le chevron “>”

Mais également les textes par défaut sur les pages 404 et recherche.

Les CPT eux vont se paramétrer dans la catégorie suivante, vous allez pouvoir choisir ce que vous voudrez voir apparaitre. Pour mon blog, je peux choisir d’afficher mes catégories (CSS, JS, HTML, WordPress…) ou les niveaux qui correspondent à mes tags.

J’aurai donc cette apparence si je paramètre sur les catégories :

Accueil > nom catégorie > Titre de l'article

Ou celle-ci si j’utilise les niveaux :

Accueil > niveau > Titre de l'article

Aller plus loin et personnaliser dans le code

Cependant, lorsque que j’ai créé mon custom post type, j’ai désactivé l’archive et j’ai utilisé une simple page comme archive / catégorie pour mon cpt. Dans certains cas de figure, notamment avec les custom post types, vous pouvez être amenés à mettre une page dans votre fil d’Ariane.
Ici, je souhaite ce rendu :

Accueil > ma page tutoriaux > Titre de l'article

Je vais donc afficher un filtre dans mon fichier function.php

add_filter( 'wpseo_breadcrumb_links', 'inumedia_breadcrumb' );
function inumedia_breadcrumb( $links ) {
    global $post;
        $breadcrumb[] = array(
            'url' => home_url() . '/tutoriaux/',
            'text' => 'Tutoriaux',
        );
        array_splice( $links, 1, -2, $breadcrumb );  
    return $links;
}

Quelques explications :

• Je crée un filtre wpseo_breadcrumb_links
• Je vais créer un tableau $breadcrumb
• Dans ce tableau, je vais indiquer le texte à afficher et l’url de ce texte
• J’utilise ensuite array_splice() pour remplacer une partie des liens du fil d’Ariane d’origine par notre lien personnalisé.
• Ici, je lui indique où placer le texte dans mon fil d’ariane.
• J’affiche le résultat avec un return

Zoom sur le splice

 array_splice( $links, 1, -2, $breadcrumb );  

Ici, je lui indique 1, -2, $breadcrumb, pour remplacer les liens du deuxième au dernier (excluant le premier et le dernier) par notre lien personnalisé.

Si j’avais indiqué

 array_splice( $links, 2, -3, $breadcrumb );  

J’aurais eu ce résultat

Accueil > Titre de l'article > ma page tutoriaux 

Conseils pratiques pour la personnalisation du fil d’Ariane

Réfléchissez à la hiérarchie de votre site :

Avant de personnaliser le fil d’Ariane de Yoast, construisez avec soin l’arborescence et la structure de votre site internet. Identifiez les pages, les catégories ou les articles ou les sections si c’est un one page.

Il faut que votre fil d’Ariane soit à l’image de la logique de votre site.

Des liens brefs et pertinents

Beaucoup de clients adorent mettre des textes à rallonge dans leurs liens. Mais, les liens du fil, tout comme ceux des boutons, doivent être clairs et concis. Ça ne sert à rien de mettre des phrases. Limitez-vous à 1 ou 2 mots compréhensibles pour l’utilisateur.

Supprimez les éléments inutiles

Allégez le plus possible votre fil d’Ariane. Prenons par exemple un site e-commerce où on aurait un filtre d’affaires scolaires, des sacs à dos bleus.

On évitera donc :

Accueil > Affaires scolaires > Sacs à dos > Bleu > Nom du sac

Pour favoriser ce fil d’Ariane qui est plus logique :

Accueil > Affaires scolaires > Sacs à dos > Nom du sac

L’accessibilité

Comme tout élément de votre site, il devra correspondre aux normes d’accessibilité en embarquant les normes ARIA par exemple.

Conclusion

En conclusion, la personnalisation du fil d’Ariane de Yoast est un moyen efficace d’améliorer la navigation et l’expérience utilisateur sur votre site web. Grâce à cette fonctionnalité, vous pouvez adapter le fil d’Ariane en fonction de la structure et de la hiérarchie de votre site, offrant ainsi aux visiteurs un moyen clair et intuitif de se déplacer entre les pages.