Een breadcrumb navigatie implementeren met schema markup
Senior SEO-specialist
Breadcrumbs zorgen voor een betere gebruikerservaring én helpen zoekmachines de hiërarchie van je website te begrijpen. Door ze te verrijken met structured data (schema markup) vergroot je bovendien de kans op rich snippets in de zoekresultaten. In dit artikel: hoe je breadcrumbs correct implementeert – zowel visueel als technisch – inclusief JSON-LD-markup.
Breadcrumbs zijn navigatiesporen die de gebruiker tonen waar hij zich bevindt binnen de structuur van een site.
Voorbeeld:
kotlin
Home > SEO > Structured data > Breadcrumbs implementeren
Ze verbeteren:
- UX (snelle navigatie)
- Interne linkstructuur (extra interne links)
- SEO (context en hiërarchie)
2. Visuele implementatie (HTML/CSS)
Je plaatst breadcrumbs idealiter bovenaan een pagina, onder de H1, met gestructureerde HTML.
HTML-voorbeeld:
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>
Voeg CSS toe voor visuele opmaak (bijv. pijltjes, spacing).
3. Structured data toevoegen via JSON-LD
Structured data is nodig om de breadcrumbs zichtbaar te maken in de zoekresultaten.
JSON-LD-voorbeeld:
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>
Plaats dit script in de <head> of onderaan de <body> van de pagina.
Aan de slag met SEO? Neem gerust contact op.
4. Implementatie in WordPress
Gebruik je WordPress? Dan zijn er drie manieren om breadcrumb + schema automatisch in te stellen:
Optie 1: Yoast SEO
- Activeer onder: SEO > Zoekweergave > Breadcrumbs
Voeg de PHP-code toe in je thema:
php
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
Optie 2: Rank Math
- Breadcrumbs inschakelen onder Rank Math > Algemeen > Breadcrumbs
- Automatisch JSON-LD geïntegreerd
Optie 3: Handmatig
- Gebruik eigen HTML + custom schema-markup zoals hierboven
5. Testen en valideren
Controleer of Google je breadcrumbs correct herkent.
Tools:
- Rich Results Test
- Schema Markup Validator
Controleer op:
- Geen fouten of waarschuwingen
- Juiste posities en URLs
- Structuur komt overeen met visuele navigatie
6. Best practices
| Richtlijn | Toelichting |
| Breadcrumbs tonen waar het relevant is | Denk aan blogs, categorieën, diensten, longform content |
| Gebruik volledige hiërarchie | Geen ‘shortcut breadcrumbs’, altijd volledige pad tonen |
| Match visueel met JSON-LD | Google verwacht dat breadcrumbs ook op de pagina staan |
| Update bij siteherstructurering | Pas ook de markup aan als de URL-structuur wijzigt |
Tot slot
Breadcrumbs met schema markup verbeteren je interne linkstructuur, SEO en gebruikerservaring. Met een paar regels HTML en JSON-LD maak je ze bruikbaar én zichtbaar in de zoekresultaten. Simpel, effectief, en onmisbaar voor elke goed gestructureerde site.
