Un fil d’ariane (aussi appelé breadcrumbs en anglais) est un outil de navigation permettant à un internaute de se repérer lorsqu’il visite votre site internet.
Il indique à quel endroit de la structure hiérarchique du site l'internaute se trouve, en listant les liens des différentes pages parentes à celle consultée. Ainsi, l'utilisateur peut visiter d'autres pages de votre site en relation avec sa recherche initiale.
Mais le fil d'ariane est également très important pour indiquer aux moteurs de recherche comme Google comment votre site est structuré. Pour cela, nous allons voir comment créer un fil d'ariane et quelles données sont utiles au référencement de votre site.
Qu'est-ce que les données structurées ?
Les données structurées sont une liste d'informations que l'on ajoute sur une page web afin de donner aux moteurs de recherche comme Google des indications sur la hiérarchie d'un site internet, mais également sur la classification de ses contenus. Elles sont très utiles pour le référencement naturel car elles permettent aux moteurs de recherche de comprendre le contenu d'un site web et donc de faire ressortir les pages correspondant à la recherche d'un internaute.
Les données structurées peuvent être ajoutées dans différents formats (JSON-LD, RDFa, microdonnées) et doivent respecter les préconisations de balisage de schema.org.
Chez Com to Code, nous utilisons le système de microdonnées pour insérer des données structurées sur les sites de nos clients au moment du développement, en les ajoutant directement dans le code HTML.
Comment ajouter des données structurées sur un fil d'ariane ?
La construction d'un fil d'ariane est somme toute assez simple, puisqu'il s'agit généralement d'une liste ordonnée contenant les liens des différentes pages parentes à celle qui est consultée.
Nous allons voir comment utiliser le fil d'ariane de son site pour qu'il ressorte sur les résultats de recherche des moteurs tels que Google.
Tout d'abord, voici un exemple de fil d'ariane basique :
<html>
<head>
<title>Mon super site</title>
</head>
<body>
<ol>
<li>
<a href="https://www.mon-super-site.com">Page d'accueil</a>
</li>
<li>
<a href="https://www.mon-super-site.com/blog">Blog</a>
</li>
<li>
Mon article de blog
</li>
</ol>
</body>
</html>
Voyons maintenant comment ajouter des données structurées sur ce fil d'ariane, tout en suivant les recommandations Google concernant les propriétés obligatoires.
<html>
<head>
<title>Mon super site</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://www.mon-super-site.com">
<span itemprop="name">Page d'accueil</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://www.mon-super-site.com/blog"
href="https://www.mon-super-site.com/blog">
<span itemprop="name">Blog</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Mon article de blog</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</body>
</html>
Comme vous pouvez le constater, ce fil d'ariane est beaucoup plus complet que le précédent.
Il donne toutes les indications nécessaires aux moteurs de recherche pour savoir comment se structure votre site. Pour résumer, on déclare tout d'abord que la liste est un fil d'ariane à travers les propriétés
itemscope et
itemtype.
Ensuite, sur chaque élément de la liste, on déclare les propriétés
itemscope,
itemprop="itemListElement" et
itemtype="https://schema.org/ListItem" pour indiquer qu'il s'agit d'un des éléments de la liste composant le fil d'ariane. Sur les liens, on ajoute les propriétés
itemscope
itemtype="https://schema.org/WebPage"itemprop="item" et
itemid="https://www.mon-super-site.com/blog" pour informer les moteurs de recherche qu'il s'agit des différents liens des pages du site.
On intègre une balise
<span></span> contenant la propriété
itemprop="name" à l'intérieur de ces liens de pages pour indiquer leur nom.
Enfin, on intègre à l'intérieur de chaque élément
<li></li> une balise
<meta itemprop="position" content="position_de_la_page" /> qui va servir à donner la position de chacune de ces pages dans l'ordre.
Le seul élément du fil d'ariane qui ne comporte pas de lien est bien entendu l'élément qui correspond à la page sur laquelle on navigue.
Vous savez maintenant comment intégrer des données structurées sur un fil d'ariane afin d'optimiser le référencement naturel d'un site.
Attention à bien respecter les balisages préconisés précédemment afin que vos données structurées soient bien prises en compte par les moteurs de recherche.