Générateur de schéma et HTML de fil d'Ariane

Créez des données structurées BreadcrumbList et un HTML de fil d'Ariane accessible (nav, ol, aria-current) à partir de noms et URL de pages. JSON-LD prêt à copier.

Éléments du fil d’Ariane (de l’accueil à la page actuelle)
1.
2.
3.
JSON-LD (BreadcrumbList)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Cold Brew Guide",
      "item": "https://example.com/blog/cold-brew"
    }
  ]
}
</script>
HTML
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>
Le JSON-LD suit schema.org BreadcrumbList ; le dernier élément peut omettre son URL puisqu’il s’agit de la page actuelle. Le HTML utilise une liste ordonnée dans <nav> avec aria-current="page" pour l’accessibilité ; stylez les séparateurs en CSS.

Qu'est-ce que Générateur de fil d'Ariane ?

Ce générateur transforme une liste d'éléments de fil d'Ariane (nom + URL, de la page d'accueil à la page courante) en deux sorties : un JSON-LD schema.org BreadcrumbList pour les moteurs de recherche et un balisage HTML accessible pour les visiteurs.

Comment utiliser Générateur de fil d'Ariane

  1. Modifiez les éléments : une ligne par niveau avec son nom et son URL absolue.
  2. Ajoutez ou supprimez des lignes ; la dernière ligne est la page courante et peut ne pas avoir d'URL.
  3. Définissez l'aria-label de l'élément de navigation dans la langue de votre site.
  4. Copiez le bloc JSON-LD et le HTML dans votre page.

Exemple

Entrée
Home → Blog → Cold Brew Guide
Sortie
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>

Quand utiliser Générateur de fil d'Ariane

Utilisez-le pour les pages qui affichent un fil d'Ariane, surtout dans les structures profondes comme les boutiques ou les documentations. Les données structurées doivent correspondre au fil d'Ariane visible sur la page. Stylez les séparateurs en CSS plutôt que d'ajouter des caractères au balisage.

Comment fonctionne Générateur de fil d'Ariane

Chaque ligne non vide devient un ListItem avec une position commençant à 1, un nom et l'URL de l'élément (omise si vide). Le HTML est un <nav aria-label> contenant une liste ordonnée ; les éléments précédents sont des liens et le dernier reçoit aria-current="page", selon le motif de fil d'Ariane WAI-ARIA. Les noms et URL sont échappés en HTML ; les URL relatives déclenchent un avertissement car les données structurées doivent utiliser des URL absolues.

Cas d'utilisation courants

  • Ajouter des résultats enrichis de fil d'Ariane aux pages de catégories et de produits.
  • Créer un HTML de fil d'Ariane accessible pour un site de documentation.
  • Remplacer un fil d'Ariane à séparateurs en texte brut par un balisage sémantique.
  • Générer le balisage d'un site statique sans plugin de fil d'Ariane.

Questions Fréquentes

Le dernier élément a-t-il besoin d'une URL ?

Non. Google autorise la page courante à omettre item ; il est inclus ici si vous en saisissez un.

Le balisage garantit-il un fil d'Ariane dans les résultats de recherche ?

Non. Il aide les moteurs à comprendre la structure du site et rend le résultat éligible à un chemin de type fil d'Ariane, mais Google décide de ce qui s'affiche.

Une page peut-elle avoir plusieurs fils d'Ariane ?

Oui, ajoutez un BreadcrumbList par parcours si la page est accessible par plusieurs chemins.

Explorer d'autres catégories