Breadcrumb SEO : implémentation et JSON-LD BreadcrumbList

Le breadcrumb SEO combine deux éléments complémentaires : un composant HTML visible pour l'utilisateur, et un objet JSON-LD BreadcrumbList invisible pour Google. La combinaison des deux déclenche le rich snippet « chemin de navigation » dans les SERP, qui remplace l'URL brute par une hiérarchie lisible.

Implémentation HTML du breadcrumb

<nav aria-label="Fil d'ariane">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/collections/baskets-trail">Baskets trail</a></li>
    <li aria-current="page">Salomon XT-6 femme noire</li>
  </ol>
</nav>

JSON-LD BreadcrumbList correspondant

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Accueil", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Baskets trail", "item": "https://example.com/collections/baskets-trail" },
    { "@type": "ListItem", "position": 3, "name": "Salomon XT-6 femme noire", "item": "https://example.com/products/salomon-xt6-femme-noire" }
  ]
}