Mise en place d’un fil d’Ariane de navigation à l’aide d’un schéma de balisage
Senior SEO-specialist
Les fils d’Ariane offrent une meilleure expérience utilisateur et aident les moteurs de recherche à comprendre la hiérarchie de votre site web. En les enrichissant de données structurées (balisage schema), vous augmentez également les chances d’obtenir des snippets riches dans les résultats de recherche. Dans cet article : comment implémenter correctement les fils d’Ariane – à la fois visuellement et techniquement – y compris le balisage JSON-LD.
1. Qu’est-ce que la chapelure ?
Les fils d’Ariane sont des pistes de navigation qui indiquent à l’utilisateur où il se trouve dans la structure d’un site.
Exemple :
kotlin
Home > SEO > Structured data > Breadcrumbs implementeren
Ils s’améliorent :
- UX (navigation rapide)
- Structure des liens internes (liens internes supplémentaires)
- SEO (contexte et hiérarchie)
2. Mise en œuvre visuelle (HTML/CSS)
L’idéal est de placer les fils d’Ariane en haut de la page, sous le H1, à l’aide d’un code HTML structuré.
Exemple HTML :
html
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://jouwdomein.nl">Home</a></li>
<li><a href="https://jouwdomein.nl/seo/">SEO</a></li>
<li>Breadcrumb navigatie</li>
</ol>
</nav>
Ajoutez des feuilles de style CSS pour la mise en forme visuelle (par exemple, flèches, espacement).
3. Ajout de données structurées via JSON-LD
Les données structurées sont nécessaires pour que les fils d’Ariane soient visibles dans les résultats de recherche.
Exemple JSON-LD :
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://jouwdomein.nl"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://jouwdomein.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb navigatie",
"item": "https://jouwdomein.nl/seo/breadcrumb-navigatie/"
}
]
}
</script>
Placez ce script dans le ou au bas du de la page.
Aan de slag met SEO? Neem gerust contact op.
4. Mise en œuvre dans WordPress
Vous utilisez WordPress ? Dans ce cas, il y a trois façons de définir automatiquement le fil d’Ariane et le schéma :
Option 1 : Yoast SEO
- Activez ci-dessous : SEO > Search View > Breadcrumbs
Ajoutez le code PHP dans votre thème :
php
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
Option 2 : Classement des mathématiques
- Activez les fils d’Ariane sous Rank Math > General > Breadcrumbs
- Intégration automatique de JSON-LD
Option 3 : Manuel
- Utilisez votre propre HTML + un balisage de schéma personnalisé comme ci-dessus
5. Essais et validation
Vérifiez que Google reconnaît correctement vos fils d’Ariane.
Outils :
- Test des résultats riches
- Valideur de balisage de schéma
Vérifiez :
- Pas d’erreurs ou d’avertissements
- Positions et URL correctes
- La structure correspond à la navigation visuelle
6. Meilleures pratiques
| Directive | Notes |
| Afficher les fils d’Ariane lorsqu’ils sont pertinents | Pensez aux blogs, aux catégories, aux services, au contenu à long terme. |
| Utiliser la hiérarchie complète | Pas de « fil d’Ariane de raccourci », toujours le chemin d’accès complet |
| Correspondance visuelle avec JSON-LD | Google s’attend à ce que les fils d’Ariane apparaissent également sur la page. |
| Mise à jour sur la restructuration du site | Ajustez également le balisage si la structure de l’URL change. |
En conclusion
Les fils d’Ariane avec balisage schema améliorent la structure de vos liens internes, le référencement et l’expérience utilisateur. Avec quelques lignes de HTML et de JSON-LD, vous les rendez utilisables et visibles dans les résultats de recherche. Simple, efficace et indispensable pour tout site bien structuré.
