Techniek · Schema · Navigatie
Breadcrumbs met schema markup.
Breadcrumb-navigatie correct implementeren: visueel + technisch + schema markup. JSON-LD voor BreadcrumbList, hoe Google breadcrumbs in SERP toont, en UX-best-practices voor diepe sitestructuren.
Door Ralf van VeenUpdate: 4 augustus 2025Leestijd: 8 min
01 — implementatieHoe breadcrumbs zichtbaar én via schema werken
Een breadcrumb-navigatie heeft twee lagen: de zichtbare HTML-versie voor gebruikers, en de gestructureerde JSON-LD-versie voor zoekmachines. Beide moeten matchen voor optimale rich-result-vertoning en correcte hiërarchie-signalen. Voor breder context zie structured data met JSON-LD.
3 lagen · breadcrumb-implementatievisueel + schema
Voorbeeld 1 — Visuele breadcrumb in HTML:
Visuele weergave op de pagina
Plaats breadcrumbs idealiter direct onder de H1, met semantisch correcte HTML (nav-element, ordered list).
Voorbeeld 2 — Semantische HTML-structuur:
<nav aria-label="Breadcrumb">
<ol class="breadcrumbs">
<li><a href="/">Home</a></li>
<li><a href="/seo/">SEO</a></li>
<li><a href="/seo/schema/">Structured data</a></li>
<li aria-current="page">Breadcrumbs implementeren</li>
</ol>
</nav>
<ol class="breadcrumbs">
<li><a href="/">Home</a></li>
<li><a href="/seo/">SEO</a></li>
<li><a href="/seo/schema/">Structured data</a></li>
<li aria-current="page">Breadcrumbs implementeren</li>
</ol>
</nav>
Voorbeeld 3 — JSON-LD BreadcrumbList-schema:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.nl/"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://example.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumbs implementeren"
}
]
}
</script>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.nl/"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://example.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumbs implementeren"
}
]
}
</script>
Let op: laatste item heeft géén item-URL (we zijn al op die pagina). De position-waarden zijn 1-indexed, niet 0-indexed.
Hoe breadcrumbs eruit zien in Google SERP:
example.nl›SEO›Structured data
Breadcrumbs implementeren — Schema markup gids
Stap-voor-stap uitleg over visuele + technische implementatie van breadcrumbs met JSON-LD schema markup voor zoekmachines...
02 — best-practices5 best-practices voor breadcrumb-implementatie
Breadcrumbs lijken simpel maar er zijn verschillende uitvoeringen die UX of SEO ondermijnen. Hieronder 5 best-practices uit mijn praktijk die het verschil maken tussen "werkt technisch" en "levert echte waarde".
5 best-practices · breadcrumbsUX + SEO
Hiërarchische, geen "pad-gebaseerde" breadcrumbsBP 01
Breadcrumbs tonen de logische site-hiërarchie, niet de browse-historie. Bij twijfel: hoe een gebruiker de pagina zou vinden via menu-navigatie. Een product onder "Bureau-stoelen" hoort altijd onder Producten › Kantoor › Bureau-stoelen, niet pad gebaseerd op waar de bezoeker zojuist vandaan kwam.
Niet klik-baar maken van current pageBP 02
Laatste item in de breadcrumb-keten is de huidige pagina. Maak deze géén link — gebruiker is hier immers al. Gebruik aria-current="page" voor accessibility. In schema: laatste ListItem zonder "item"-URL.
Max 4-5 niveaus diepBP 03
Breadcrumbs van 7+ niveaus verliezen waarde. Bij diepe site-structuren overweeg "tussenhubs" — verzamelpagina's die als logische intermediairs werken. Voor extreem diepe e-commerce: gebruik breadcrumb-truncation met ellipsis (Home › ... › Categorie › Product).
Mobiel responsiveBP 04
Op mobiele schermen breken lange breadcrumbs op meerdere lijnen. Oplossing: horizontal scroll, of de "back-arrow + parent name" patroon (bijv. ‹ Bureau-stoelen). Schema blijft hetzelfde, alleen visuele weergave verandert.
Consistente label-namingBP 05
Breadcrumb-label = pagina-titel (H1) wanneer mogelijk. Geen verschil tussen "Bureau-stoelen" (in menu) en "Ergonomische bureau-stoelen" (in breadcrumb). Inconsistentie verwart gebruikers en levert ranking-noise. Maak één canonical naam per pagina.
03 — faqVeelgestelde vragen
FAQ · 3 vragenklik om te openen
Toont Google altijd mijn breadcrumbs in de SERP?›
Niet altijd. Google kiest wanneer breadcrumbs te tonen op basis van schema-kwaliteit en pagina-relevantie. Vijf factoren. (1) Schema correct geïmplementeerd. Test via Rich Results Test — moet "Eligible for rich results" tonen. Validatie-errors = geen breadcrumbs in SERP. (2) URL-structuur logisch. Breadcrumb-paden moeten de URL-hiërarchie volgen waar mogelijk. example.nl/seo/schema/breadcrumbs/ = past bij Home › SEO › Schema › Breadcrumbs. Mismatch verwart Google's interpretatie. (3) Position binnen Top 10. Breadcrumbs worden vaker getoond voor pagina's op positie 1-3 dan voor lagere posities. Niet alle eligible pages krijgen breadcrumbs in SERP. (4) Query-context. Voor sommige queries vervangt Google de URL-display met breadcrumbs, voor andere niet. Geen patroon dat consequent voorspelbaar is. (5) Mobiel vs desktop verschilt. Op mobiel toont Google breadcrumbs uitgebreider; op desktop soms alleen domein + 1 niveau. SERP-vertoning hangt af van device-context. Voor breder context zie Google Search Console gids.
Wat zijn de SEO-voordelen van breadcrumbs?›
Breadcrumbs leveren meerdere SEO- en UX-voordelen. Zes punten die in mijn praktijk meetbaar zijn. (1) Verlaagde bounce rate. Bezoekers die landen op een diepe pagina (via Google) gebruiken breadcrumbs om site verder te verkennen. Pagina's met breadcrumbs zien typisch 8-15% lagere bounce rate. (2) Hogere pagina's-per-sessie. Breadcrumbs zijn interne links naar logische parent-pagina's. Gebruikers klikken vaak één niveau omhoog. Versterkt site-engagement metrics. (3) Verbeterde crawl-efficiency. Googlebot ontdekt parent-pagina's via breadcrumbs. Belangrijk voor diepe sites zonder volledige menu-zichtbaarheid op elke pagina. (4) Cleaner SERP-vertoning. Breadcrumb in URL-display ziet er professioneler uit dan een lange URL-string. Indirect CTR-voordeel. (5) Internal link equity flow. Breadcrumbs zenden link-equity door site-hiërarchie. Parent-categorieën krijgen meer interne links via breadcrumbs van diepere pages. (6) UX-signalen. Lagere bounce + hogere engagement = positieve Google-signalen. Niet directe ranking-factor maar indirecte versterking. Voor breder context zie interne links versus navigatie.
Welke breadcrumb-stijl is beter: ">" of "/" of pijl?›
Visuele separator-keuze heeft geen SEO-impact, wel UX-overwegingen. Vijf perspectieven. (1) ">" (chevron) is meest gangbaar. Wordt herkend als "navigation deeper". Industrie-standaard. Gebruikers begrijpen direct. (2) "/" (slash) past bij URL-aesthetiek. Werkt vooral op tech-sites, developer-tools, documentation. Heel clean visueel. (3) "›" (single right pointing) is variatie op chevron. Iets eleganter dan ">" maar minder breed bekend. (4) Pijl-symbolen (→ of ➜) vermijden. Geven indruk van "ga naar X" — verwarrend voor breadcrumbs die backwards navigatie tonen. (5) Geen separator (alleen spacing) werkt op moderne minimalist sites. Vereist sterk typografisch onderscheid tussen items + huidige page. Praktisch advies: kies één separator en houd consistent door hele site. Test in usability-research bij twijfel. Schema-implementatie verandert niet door separator-keuze — schema heeft geen visuele info, alleen structurele. Voor breder context zie SEO en UX gids.
Breadcrumbs implementeren in jouw site?
Implementatie van semantisch correcte HTML-breadcrumbs + BreadcrumbList JSON-LD schema. Met UX-overweging voor mobiel + diepe sitestructuren, en monitoring van rich-result-vertoning in Search Console.
Plan een gesprek met Ralf →