Sur les sites comportant de nombreuses pages, le fil d'Ariane ( fil d'Ariane) peut grandement aider les visiteurs à naviguer dans la structure hiérarchique des documents et à indiquer l'emplacement actuel des utilisateurs sur le site. Du point de vue de la convivialité, le fil d'Ariane peut réduire le nombre d'étapes qu'un visiteur doit suivre pour accéder au niveau supérieur d'une page.

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

Chapelure (Le menu de navigation, "Chapelure", Anglais Chapelure) - un élément de navigation du site Web, représentant un chemin à travers le site depuis sa « racine » jusqu'à la page actuelle sur laquelle se trouve l'utilisateur.

Le titre « Fil d'Ariane » est une référence ironique au conte de fées allemand « Hansel et Gretel », dans lequel les enfants, lorsqu'ils furent conduits pour la deuxième fois dans la forêt, ne parvinrent pas à retrouver le chemin du retour, car cette fois au lieu de ils ont laissé derrière eux de petits cailloux, de la chapelure, puis picorés par les oiseaux forestiers.

Vous pouvez généralement afficher le fil d’Ariane sur les sites dont le contenu est organisé de manière hiérarchique. La forme la plus simple est lorsque le fil d'Ariane est présenté sous forme de liens de texte horizontaux et de symboles séparés (> - "supérieur à") qui indiquent le niveau de cette page par rapport aux autres pages.

Quand faut-il utiliser Breadcrumbs ?

Utiliser le fil d'Ariane pour les grands sites Web et les sites Web avec une organisation hiérarchique des pages.

Le fil d'Ariane ne doit pas être utilisé pour les sites à un seul niveau qui n'ont pas de hiérarchie ou de regroupement logique.

Un excellent moyen de déterminer si un site bénéficierait de l'utilisation du fil d'Ariane consiste à créer un plan du site ou un diagramme qui représente l'architecture de navigation du site, puis à analyser si le fil d'Ariane permet à l'utilisateur de naviguer facilement au sein et entre les catégories.

La navigation hiérarchique doit être considérée comme une fonctionnalité supplémentaire et ne doit pas remplacer un menu de navigation principal efficace. Il s'agit d'un système de navigation secondaire qui permet aux utilisateurs de déterminer où ils se trouvent et constitue une manière alternative de naviguer sur le site.

Types de chapelure

Il y a trois principauxsorte de "miette de pain".

Basé sur l'emplacement

Le fil d'Ariane basé sur l'emplacement indique à l'utilisateur où il se trouve dans la hiérarchie du site.Ils sont généralement utilisés pour les structures de navigation comportant plusieurs niveaux (généralement plus de deux niveaux).Dans l'exemple ci-dessous (deSitePoint ), chaque lien texte de la page située à gauche est un niveau supérieur.

Basé sur les propriétés

Le fil d’Ariane basé sur les propriétés reflète les attributs d’une page particulière.

Basé sur le chemin

Ils montrent le chemin emprunté par l'utilisateur pour accéder à la page actuelle. Ce chemin est dynamique, une même page peut avoir des adresses différentes.

Avantages de l'utilisation du fil d'Ariane

Ils peuvent aider l'utilisateur

Le fil d'Ariane est principalement utilisé pour fournir aux utilisateurs un moyen supplémentaire de naviguer sur un site.Sur les grands sites Web à plusieurs niveaux, offrir une visualisation du chemin parcouru peut fournir à l'utilisateur un moyen assez simple de naviguer vers des catégories de niveau supérieur.

Réduit le nombre de clics ou d'actions pour revenir aux pages de niveau supérieur

Au lieu d'utiliser le bouton de retour d'un navigateur ou la navigation principale d'un site Web, les utilisateurs peuvent revenir aux principales catégories à l'aide du fil d'Ariane en moins de clics.

Ne bouchez généralement pas l'écran

Ils ont généralement une orientation horizontale et ne prennent donc pas beaucoup de place sur la page.

Réduire le taux de rebond

Le fil d’Ariane peut inciter de nouveaux visiteurs à parcourir le reste de votre site Web. Par exemple, un utilisateur accède à une page via une recherche Google, voit les catégories publiées ci-dessus et peut être intéressé. Cela réduit à son tour le taux de rebond du site.

Erreurs lors de l'utilisation du fil d'Ariane

Utiliser la chapelure est assez simple. Mais avant de les mettre en œuvre sur votre site, vous devez réfléchir à certaines erreurs à éviter.

Utiliser de la chapelure lorsque cela n'est pas nécessaire

Une erreur courante consiste à utiliser du fil d’Ariane alors que cela ne présente aucun avantage.

Dans l’exemple ci-dessus, nous pouvons voir trop d’options de navigation placées assez près les unes des autres : navigation principale, fil d’Ariane et navigation secondaire.

Utiliser le fil d'Ariane comme navigation principale

Comme indiqué précédemment, le fil d'Ariane doit être utilisé comme aide à la navigation supplémentaire.

Utiliser le fil d'Ariane lorsque les pages comportent plusieurs catégories

Les fils d'Ariane ont une structure linéaire, ils seront donc difficiles à utiliser si vos pages ne peuvent pas être divisées en catégories claires.La décision d'utiliser ou non le fil d'Ariane dépend en grande partie de la façon dont vous avez créé la hiérarchie de votre site.À un niveau de page bas, l'utilisation du fil d'Ariane est inefficace, inexacte et déroutante pour l'utilisateur.

Conception du fil d'Ariane

Lors du développement du fil d’Ariane, certaines questions peuvent se poser. Par exemple:

Quel symbole doit-on utiliser pour séparer les liens ?

Le symbole courant et le plus reconnaissable pour séparer les hyperliens dans le fil d’Ariane est le symbole supérieur à - (>).

Vous pouvez également utiliser des guillemets pour indiquer un coin droit ("") et une barre oblique (/).

Le choix dépend du site lui-même et du type de chaîne que vous utilisez.Par exemple, si les liens dans le fil d'Ariane n'ont pas de relation hiérarchique les uns par rapport aux autres, l'utilisation du symbole supérieur à > peut ne pas transmettre avec précision leur essence.

Que devraient-ils être ?

Vous ne voulez pas que votre fil d’Ariane domine la page.Ils doivent être utilisés comme une aide supplémentaire aux utilisateurs (pour plus de commodité), leur taille doit donc également correspondre à celle-ci et transmettre correctement cette fonction aux utilisateurs - ils doivent être plus petits ou moins visibles que le menu de navigation principal.

Une bonne règle de base pour déterminer la distance parcourue est qu'ellene devrait pas être le premier élément qui attire l'attention de l'utilisateur sur la page.

Où doit se trouver le fil d’Ariane ?

Le fil d'Ariane apparaît généralement en haut de la page, sous le menu de navigation principal, si un menu horizontal est utilisé.

Statistiques

Vous trouverez ci-dessous des statistiques recueillies en mai 2002 sur 75 principaux sites de commerce électronique.

Orientation de la chaîne

95% - horizontal

5% verticale

Séparateur entre éléments (pour chaînes horizontales)

Exemples d'utilisation du fil d'Ariane dans la conception de sites Web

Maintenant que nous avons examiné qui, comment, quand et pourquoi les gens utilisent le fil d'Ariane, nous pouvons examiner quelques exemples de la manière dont ils sont utilisés sur les sites Web.

Utilisation classique de la chapelure

Utiliser d'autres symboles

Bonne journée, chers lecteurs !

Comment le fil d’Ariane affecte l’optimisation des moteurs de recherche et comment le créer sur un site WordPress. C'est exactement ce qui sera discuté dans l'article d'aujourd'hui. Pour l’avenir, je dirai que le fil d’Ariane aide vos utilisateurs à naviguer sur le site. Ils ont également un impact positif sur le référencement.

Les fils d'Ariane sont des conseils sur un site Web qui montrent à l'utilisateur où il se trouve. Une sorte de chaîne créée pour la navigation.

Ils sont cliquables, ce qui signifie que le visiteur peut à tout moment passer à un « niveau » supérieur - vers une sous-catégorie ou une section. En règle générale, le fil d'Ariane a la forme suivante : principal – titre – sous-catégorie – article. Ce dernier élément est très souvent supprimé, estimant qu'il crée une duplication inutile.

On pense que ce nom fait référence à un conte de fées dans lequel les enfants, en entrant dans la forêt, laissaient derrière eux une traînée de miettes de pain pour la navigation. Ils ont dû revenir par ce chemin. Une chaîne de liens est aussi un chemin : plus on avance dans le site, plus il contient d'éléments. Et en fait, tout au long de cette chaîne, vous pouvez revenir à la page principale. Comme dans un conte de fées.

Comment ils affectent le référencement

L’utilisation d’une barre de navigation est considérée comme une bonne chose dans le monde de l’optimisation des moteurs de recherche.

Premièrement, cela améliore les facteurs comportementaux. Et ceci, comme vous le savez, est presque l'indicateur le plus élémentaire de la qualité d'un site. Si la convivialité est d'un bon niveau, l'utilisation et la navigation sont claires et pratiques, alors les visiteurs l'apprécieront certainement et resteront sur la ressource plus longtemps. De plus, plus les facteurs comportementaux sont bons, plus votre ressource sera élevée dans les résultats de recherche.

Deuxièmement, la présence de fil d’Ariane est déjà considérée comme un bon facteur pour un moteur de recherche. Les robots voient que le projet dispose d'un système et d'une structure de navigation, ce qui a un bon effet sur le classement.

Naturellement, la barre de navigation à elle seule ne mettra pas votre ressource en haut. Cela fonctionne en conjonction avec d’autres aspects d’un bon référencement.

Pour résumer, le fil d'Ariane aide :

• améliorer les facteurs comportementaux et la convivialité,
• rendre la structure du site claire et accessible,
• navigation facile dans les pages,
• améliorer techniquement le référencement,
• faire un lien.

Autrement dit, l'utilisation d'un ruban de navigation est strictement nécessaire pour ceux qui souhaitent que leur projet soit pratique, pratique et visité.

Types de chapelure

Oui, oui, ils ont des variétés. Il n'y en a pas beaucoup, mais cela vaut quand même la peine de considérer ce point.

Linéaire

Une bande régulière qui montre le chemin de la page principale à l'article. Le type de fil d'Ariane le plus courant... Nous avons juste un type de barre de navigation linéaire.

Bouton Retour

Un type de navigation très peu pratique, très courant dans les boutiques en ligne. En règle générale, les utilisateurs n'en sont pas particulièrement satisfaits et utilisent un bouton similaire dans le navigateur lui-même. Pour un site d'information, cette option est pratiquement inutile.

Hybride

Cette option combine les deux précédentes. Autrement dit, la ressource dispose à la fois d'une navigation linéaire et d'un bouton « Retour ». On peut dire que c'est un compromis qui contribue à plaire à tout le monde. Mais, comme je l'ai dit plus haut, les gens utilisent rarement le bouton « Retour », préférant le bouton du navigateur lui-même - heureusement, toutes les applications modernes en disposent.

En règle générale, la barre de navigation se trouve sur toutes les pages sauf la page principale. Dans WordPress, il s’agit de catégories, balises, articles et autres taxonomies.

Comment créer du fil d'Ariane dans WordPress

Le moyen le plus simple de créer un flux de navigation sur WordPress et d’autres sites consiste à utiliser le HTML. Plus précisément, ce sera un hybride de HTML et de PHP - sinon vous devrez écrire chaque chaîne de navigation manuellement, et ce n'est pas une tâche très agréable.

Utiliser un modèle

Il serait judicieux de choisir tout de suite un modèle avec de la chapelure. Si vous pensez simplement à votre prochain site Web et que vous n'avez pas encore commencé à le créer, vous devriez jeter un œil à un magasin de modèles WordPress et rechercher un thème avec cette fonction (je recommande Root).

Ce sera l’option la plus pratique car vous n’aurez pas besoin d’installer de plugins supplémentaires. Dans le même temps, vous n'avez pas besoin d'ajouter ou de modifier quoi que ce soit manuellement : tout fonctionnera, comme on dit, immédiatement (immédiatement après l'installation).

Plugins

Vous pouvez installer le flux de navigation avec le plugin. Mais gardez à l’esprit que chaque plugin peut charger encore plus votre CMS. S'il existe déjà autant de plugins, un nouveau de plus peut tout simplement tout gâcher, ralentissant le site.

Yoast SEO – instructions détaillées pour la configuration des miettes

Si vous l’utilisez comme plugin SEO, j’ai d’excellentes nouvelles pour vous. Les fils d'Ariane sont présents dans la fonctionnalité, il ne vous reste donc plus qu'à les configurer.

Il s’agit d’instructions générales qui devraient convenir à la plupart des utilisateurs. Il est basé sur les informations fournies par les auteurs du plugin eux-mêmes.

Ainsi, pour que le flux de navigation dans Yoast SEO fonctionne, nous devons placer le code PHP suivant dans nos fichiers modèles :

Habituellement, ce code est inséré dans des modèles de page courants - single.php ou page.php. De plus, certains utilisateurs insèrent ce code dans header.php - à la toute fin. Je ne sais pas si cela fonctionnera spécifiquement dans votre cas, mais vous pouvez essayer.

Les modèles de pages courants peuvent être modifiés via les outils WordPress intégrés. Allez dans « Apparence » – « Éditeur », recherchez le fichier souhaité dans la liste.

Voici le code PHP et le balisage HTML. Un utilisateur non formé peut être confus, mais vous devez vous réunir et essayer de comprendre quoi et où.

Plus précisément, dans mon thème, le fil d'Ariane est déjà fourni ; immédiatement après l'en-tête, il y a une fonction qui appelle le fil d'Ariane natif. Votre code sera différent, mais la signification générale reste la même.

Il est préférable de placer le fil d'Ariane directement sous l'en-tête - la fonction get_header() ; – sert juste à l'appeler. Par conséquent, il est correct de placer le code de Yoast SEO directement en dessous.

Mais gardez à l’esprit que pour personnaliser la barre de navigation, vous devrez peut-être travailler avec des styles CSS. Ils sont fournis par le plugin lui-même, mais peuvent ne pas convenir.

Vous pouvez même utiliser du fil d’Ariane dans les articles. Il vous suffit de laisser le shortcode suivant au bon endroit : .

Mais ni le code ni le shortcode ne fonctionneront si la fonctionnalité fil d’Ariane est désactivée dans le plugin lui-même. Pour l'activer, vous devez vous rendre dans les paramètres du plugin (onglet SEO) - affichage dans les résultats de recherche - fil d'Ariane.

Basculez le curseur sur « Activé », puis faites défiler la page vers le bas et cliquez sur « Enregistrer les modifications ». À partir de ce moment, la chapelure commencera à fonctionner.

Vous pouvez les personnaliser si vous le souhaitez. Par exemple, définissez un séparateur entre les éléments, spécifiez le texte du lien vers la page principale, les préfixes pour les taxonomies, etc.

Vous pouvez également mettre en évidence la dernière page (ou le titre du document) en gras. Pour ce faire, changez le curseur correspondant.

Si Yoast SEO ne vous convient pas particulièrement, alors vous pouvez faire attention aux autres plugins qui vous permettent de créer du fil d'Ariane sur votre site. Il y en a beaucoup d'options gratuites dans le catalogue, mais je soulignerai les options les plus populaires.

Fil d'Ariane NavXT

Un plugin simple qui peut créer un fil d'Ariane pour votre projet. Il compte actuellement plus de 800 000 utilisateurs actifs. Le plugin possède son propre panneau de contrôle et convient à la plupart des sites WordPress.

Presque tout peut être personnalisé dans Breadcrumb NavXT. Apparence, éléments affichés et leur ordre. Il y a ici bien plus de possibilités que dans le même Yoast SEO (notamment concernant la mise en place de la chaîne de navigation).

Cette extension peut être installée tout à fait gratuitement à partir du répertoire WordPress. Vous pouvez le trouver à l'aide de mots-clés.

Miette de pain

Une autre extension qui peut être installée directement depuis le répertoire. Contrairement au précédent, ce plugin n’a pas une audience aussi large. Total de 10 000 utilisateurs actifs. Mais si l'on considère que beaucoup de gens préfèrent d'autres options pour créer du fil d'Ariane, alors c'est un très bon résultat.

Le plugin est simple et léger. Il a un beau design (voir capture d'écran), vous pouvez changer les couleurs. Pour une utilisation sur de petits projets, c’est largement suffisant.

Il existe également d'autres plugins. Ils sont moins populaires, mais vous pouvez toujours les essayer. Allez simplement dans le répertoire des plugins et entrez le mot-clé fil d’Ariane. WordPress vous proposera immédiatement plusieurs dizaines d’options adaptées.

Conclusion

Le fil d’Ariane est un excellent moyen de naviguer sur un site Web. Ils améliorent le référencement, augmentent les facteurs comportementaux et permettent aux utilisateurs de naviguer dans les pages du site.

Presque tous les sites modernes tentent d'y prêter attention. Les concepteurs de sites Web ne sont pas en reste : désormais, l'absence de fil d'Ariane dans un modèle est considérée comme un inconvénient très important. Quelqu'un refusera même d'acheter un tel modèle simplement à cause de ce détail apparemment insignifiant. Assurez-vous de prendre ce fait en compte et essayez de rendre votre site convivial.

Si vous souhaitez en savoir plus sur la création de projets d'information pour générer des revenus, je vous conseille d'y jeter un œil. L'auteur parle de la création d'un site Web sur WordPress, d'une optimisation technique et des moteurs de recherche compétente et, surtout, des méthodes actuelles de monétisation.

Collection de gratuit Fil d'Ariane HTML et CSS exemples de codes de navigation : simple, réactif, multiligne, réduit, etc. Mise à jour de la collection février 2018. 3 nouveaux articles.

Articles Liés

À propos du code

CSS simple.

À propos du code

N'hésitez pas à le personnaliser à votre guise. Couleurs, tailles, ombres, bordures, etc. Fabriqué avec Amorcer.

À propos du code

Fil d'Ariane avec points de suspension "intelligents" (Flex)

Jouez avec la taille du navigateur pour voir comment ils se comportent lorsqu'il n'y a plus de place pour eux.

À propos du code

Cet exemple montre ce qui se passe lorsqu'un utilisateur se rapproche du bouton de retour. Le fil d'Ariane se développe et permet à l'utilisateur de naviguer presque n'importe où ailleurs dans le cours tout en n'ayant qu'un impact minimal sur l'espace.

Fil d'Ariane avec propriétés personnalisées CSS comme API.
Réalisé par Stas Melnikov
15 juin 2017

Flèches de fil d'Ariane CSS pures multilignes adaptatives.
Réalisé par Glynn Smith
30 mai 2017

GIF de démonstration : fil d’Ariane

Fil d'Ariane HTML et CSS.
Réalisé par Dany Santos
15 juillet 2016

Fil d'Ariane de conception matérielle, suivi des progrès.
Réalisé par Shyam Chen
30 juillet 2015

Une liste de fils d'Ariane réduite pour afficher uniquement le texte d'aperçu pour toutes les pages sauf la page actuelle, avec le texte intégral affiché en survol/mise au point.
Réalisé par Skye
4 mars 2015

Fil d'Ariane réactif CSS pur.
Réalisé par Oliver Knoblich
2 avril 2014

La navigation par fil d'Ariane aide les visiteurs du site à naviguer dans la structure hiérarchique des documents et à trouver leur chemin vers le niveau supérieur. Ainsi, si le site contient un grand nombre de documents, alors il doit être muni d'un « fil d'Ariane ». Cette leçon présentera le code CSS permettant de créer diverses options de conception pour un outil de navigation aussi nécessaire.

Balisage HTML

Le balisage est simple et minimal. Il est basé sur une liste non ordonnée.