Fil d’ariane SEO : mettre en place les bons tags

Pour que les moteurs de recherche puissent comprendre l’arborescence de votre site et les liens logiques entre vos pages (catégories, mères, filles) je vous conseille d’intégrer un fil d’ariane proprement tagué sur chacune de vos pages. Pour ça, plusieurs méthodes sont valides (vous pouvez choisir la plus simple à implémenter en fonction de la solution Web ou CMS que vous utilisez).

Voici le fil d’ariane qui nous servira d’exemple (celui que nous voulons taguer proprement) :

Accueil › Recettes › Sans gluten › Tartes salées

1. La méthode structure JSON-LD

Première façon de faire : vous déclarez une structure JSON dans le code HTML de chaque page. L’avantage est que vous n’avez pas besoin de placer cette structure autour/sur des balises HTML qui composent les liens de votre fil d’ariane.

Le code à placer dans le HTML de votre page devra être composé comme suit :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Accueil",
    "item": "https://www.votresite.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Recettes",
    "item": "https://www.votresite.com/recettes/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Sans gluten",
    "item": "https://www.votresite.com/recettes/sans-gluten/"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Tartes salées",
    "item": "https://www.votresite.com/recettes/sans-gluten/tartes-salees/"
  }]
}
</script>

2. La méthode microdonnées avec propriétés sur les éléments HTML

Une deuxième façon de faire pour aider Google à identifier la structure de votre fil d’ariane consiste à placer des attributs spéciaux issus du standard Schema.org sur les balises du code HTML qui contiennent l’information.

En reprenant l’exemple notre fil d’ariane, on obtiendrait :

<ol  >
  <li  
      >
    <a 
        href="https://www.votresite.com/">
        <span >Accueil</span></a>
    <meta  content="1" />
  </li>
  ›
  <li  
      >
    <a 
        href="https://www.votresite.com/recettes">
      <span >Recettes</span></a>
    <meta  content="2" />
  </li>
  ›
  <li  
      >
    <a 
        href="https://www.votresite.com/recettes/sans-gluten/">
      <span >Sans gluten</span></a>
    <meta  content="3" />
  </li>
  ›
  <li  
      >
    <a 
        href="https://www.votresite.com/recettes/sans-gluten/tartes-salees/">
      <span >Tartes salées</span></a>
    <meta  content="4" />
  </li>
</ol>

Ici, les attributs HTML indiquent les propriétés du standard Schema.org utilisées et les attributs la référence à ce standard (URL).

Quel que soit votre choix, vous pouvez vérifier que Google comprend bien la structure des microdonnées en copiant/collant votre code HTML dans son outil dédié (ne pas hésiter à en user et en abuser !) : https://search.google.com/structured-data/testing-tool

Voilà ! Vous savez désormais comment habiller vos fil d’ariane et rendre vos structures de pages plus compréhensibles pour les moteurs. Amusez-vous bien ! 🙂

> Revenir à la page des données structurées (sommaire).

Partager :