Qu'est-ce qu'un fil d'Ariane sur un site web ? Générateur de balisage et de schema | We.Inc
Ce qu'est un fil d'Ariane, le modèle HTML accessible avec aria-current, les règles BreadcrumbList de Google et un générateur qui écrit les deux pour vous.
Un fil d'Ariane est la courte suite de liens en haut d'une page, comme Accueil > Chaussures > Chaussures de running, qui montre où se situe la page dans le site. Les visiteurs l'utilisent pour remonter d'un niveau. Balisé avec les données structurées BreadcrumbList, il aide aussi Google à comprendre la hiérarchie de votre site.
Les trois types de fil d'Ariane
Type
Exemple
Idéal pour
Emplacement (hiérarchie)
Accueil > Chaussures > Chaussures de running
Boutiques, blogs et la plupart des sites
Attribut
Chaussures > Pointure 9 > Bleu
Afficher les filtres choisis sur une liste de produits
Parcours (historique)
Les pages parcourues par ce visiteur
Rarement utile ; le bouton retour du navigateur le fait déjà
Le nom anglais, breadcrumb, vient de la traînée de miettes du conte de fées. Sur un site web, c'est un menu secondaire : il ne remplace jamais la navigation principale. Vous trouverez ci-dessous le modèle HTML accessible du W3C, les données structurées que lit Google et un générateur qui écrit les deux à partir de votre propre fil.
Saisissez votre fil dans le générateur, un niveau par ligne, de la page d'accueil jusqu'à la page actuelle.
Ajoutez l'adresse complète après chaque nom, séparée par une barre verticale. La dernière ligne peut s'en passer.
Copiez le HTML dans le modèle de votre page et le JSON-LD dans le head de la page.
Testez la page avec le test des résultats enrichis de Google avant de le déployer sur tout le site.
Montrez le fil correspondant à la place de la page dans le site, pas le chemin suivi par un visiteur.
Faites de chaque élément un lien, sauf la page actuelle, qui porte aria-current="page".
Gardez le fil d'Ariane visible et les données structurées identiques, pour que le balisage décrive ce que les gens voient réellement.
Dessinez les séparateurs en CSS, comme dans l'exemple du W3C, pour que les lecteurs d'écran ne lisent pas une rangée de flèches.
Sur petit écran, laissez le fil passer sur deux lignes plutôt que défiler horizontalement.
Questions fréquentes
Le fil d'Ariane aide-t-il le SEO ?
La documentation de Google sur le fil d'Ariane indique qu'il utilise le balisage de fil d'Ariane dans le corps d'une page pour catégoriser les informations qu'elle contient. Il donne aussi aux robots d'exploration davantage de liens internes vers le haut de la hiérarchie. Ce n'est pas à lui seul un raccourci de classement.
Qu'exige Google dans BreadcrumbList ?
Un tableau itemListElement d'au moins deux entrées ListItem. Chacune a besoin d'un name, d'une position commençant à 1 et d'un item avec l'URL de la page. Le dernier élément peut omettre item, auquel cas Google utilise l'URL de la page sur laquelle il se trouve.
Le fil d'Ariane doit-il inclure la page actuelle ?
Le modèle du W3C l'inclut comme dernier lien, marqué avec aria-current défini sur page. Beaucoup de sites l'affichent plutôt en texte simple. Les deux conviennent, tant que les utilisateurs de lecteurs d'écran peuvent savoir quel élément est l'élément actuel.
Quel élément doit envelopper un fil d'Ariane ?
Un élément nav avec un libellé comme aria-label="Breadcrumb", et une liste ordonnée à l'intérieur. L'exemple du W3C utilise exactement cela, car l'ordre des liens a un sens.
Une page peut-elle avoir plusieurs fils d'Ariane ?
Oui. La page de Google montre un exemple avec deux éléments BreadcrumbList pour une page accessible par deux catégories. Montrez aussi les deux fils aux visiteurs, pour que le balisage corresponde à la page.
Balisage accessible du fil d'Ariane
Le modèle des WAI-ARIA Authoring Practices comporte trois exigences : placer le fil dans un repère de navigation, donner un libellé à ce repère avec aria-label ou aria-labelledby, et définir aria-current sur page pour le lien vers la page actuelle. MDN décrit la valeur page d'aria-current comme le lien vers le document actuel dans un fil d'Ariane.
L'exemple du W3C structure les liens en liste ordonnée et dessine les séparateurs avec des bordures CSS, pour que les technologies d'assistance n'annoncent que les noms des pages.
Des données structurées cohérentes
Schema.org explique que la propriété position sert à reconstituer l'ordre des éléments, les plus petits nombres en premier. Commencez à 1 pour le haut du fil, généralement votre page d'accueil ou une catégorie principale.
Le JSON-LD, un bloc de données structurées dans une balise script, est le format le plus simple à ajouter car il est séparé de votre HTML visible. Le générateur ci-dessous l'écrit à partir de la même liste que celle qui produit le fil visible.
Style des séparateurs
Ce CSS dessine un petit chevron avant chaque élément sauf le premier, pour que les séparateurs n'apparaissent jamais dans le texte annoncé par un lecteur d'écran.
Fil d'Ariane avec séparateurs en CSS
Modifiez les noms pour l'essayer. Les chevrons viennent de la règle ::before, pas de caractères dans le HTML.
Générateur de fil d'Ariane
Votre fil, un niveau par ligne : Nom | adresse complète
Aperçu
HTML
Données structurées JSON-LD
Copier
Copié
Google demande au moins deux éléments dans un BreadcrumbList. Ajoutez un autre niveau.
La ligne {n} n'a pas d'adresse. Seul le dernier élément peut s'en passer.
Généré dans votre navigateur à partir de ce que vous saisissez. Rien n'est envoyé.