1. Balise schema.org Breadcrumb :
La balise schema.org Breadcrumb sert à définir un fil d’ariane dans une page, ce dernier indique la position de cette page dans la hiérarchie du site.
Comment la mettre en place ? (Code HTML) :
Insérez le bloc de fils d'Ariane HTML sur la page en tant qu'élément de la conception visuelle. Voici un fil d'Ariane HTML :
<html>
<head>
<title>Titre de la page</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Accueil",
"item": "https://example.com/Accueil"
},{
"@type": "ListItem",
"position": 2,
"name": "catégorie",
"item": "https://example.com/accueil/catégorie"
},{
"@type": "ListItem",
"position": 3,
"name": "marque",
"item": "https://example.com/accueil/catégorie/marque"
},{
"@type": "ListItem",
"position": 4,
"name": "Produit",
"item": "https://example.com/accueil/catégorie/marque/Produit"
}]
}
</script>
</head>
<body>
</body>
</html>
Exemple concret :
Voici comment ça a été implémenter sur une page catégorie chez Cdiscount
<script type="application/ld+json">
{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/photo-numerique/v-112-0.html","@type":"Thing","name":"Appareil photo"}},{"@type":"ListItem","position":2,"item":{"@id":"/photo-numerique/reflex-numerique/l-11213.html","@type":"Thing","name":"Reflex numériques"}}],"@context":"https://schema.org"}
</script><script type="application/ld+json">
Concernant la fiche produit, ça a été implémenté de la manière suivante :
<script type="application/ld+json">
{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/photo-numerique/v-112-0.html","@type":"Thing","name":"Appareil photo"}},{"@type":"ListItem","position":2,"item":{"@id":"/photo-numerique/reflex-numerique/l-11213.html","@type":"Thing","name":"Reflex numériques"}},{"@type":"ListItem","position":3,"item":{"@id":"/photo-numerique/reflex-numerique/reflexs-avec-objectifs/l-1121318.html","@type":"Thing","name":"Reflex avec objectif"}},{"@type":"ListItem","position":4,"item":{"@id":"/photo-numerique/reflex-numerique/reflexs-avec-objectifs/lf-102064_6-canon.html","@type":"Thing","name":"Reflex avec objectif Canon"}}],
"@context":"https://schema.org"}</script><script type="application/ld+json">
Vous pouvez également consulter la doc de Google sur le sujet.
Vous voilà maintenant expert sur sujet 😊
Pour aller plus loin :