Breadcrumbs (ook wel broodkruimelpaden genoemd) tonen gebruikers waar ze zich bevinden binnen de structuur van een website. Ze maken de hiërarchie van pagina’s zichtbaar en helpen gebruikers eenvoudig terug te navigeren naar hogere niveaus in de structuur.
Naast betere navigatie dragen breadcrumbs bij aan een sterker intern linkprofiel, wat directe voordelen oplevert voor zoekmachineoptimalisatie (SEO).
Wat zijn website breadcrumbs
Het is eigenlijk heel simpel, broodkruimelpad laat de bezoeker zien waar de huidige pagina zich bevindt binnen de algehele paginastructuur van je website. We nemen even onze eigen website als voorbeeld. De blogpost “Hoe vind je de juiste zoekwoorden waarmee je 1e wordt in Google!” heeft deze breadcrumbs:
Home > Blog > SEO > Google Zoekwoorden
Hierdoor is het voor de gebruiker meteen duidelijk dat deze blogpost valt onder de SEO blogposts. Als je bezoeker meer wil weten over SEO zal hij intuïtief op “SEO” klikken. Hiermee heb je direct een voordeel van een broodkruimelpad te pakken; het houdt bezoekers op je website! Doordat ze goed kunnen zien waar ze zitten en wat de onderliggende structuur is, nodig je ze eigenlijk uit om verder op onderzoek uit te gaan.
Verschillende soorten broodkruimelpaden
Er bestaan verschillende soorten breadcrumbs, elk met een eigen functie. De drie meest gebruikte typen zijn:
- Hiërarchische breadcrumbs: tonen de paginavolgorde binnen de websitestructuur (bijv. Home > Blog > Artikel).
- Attribute-gebaseerde breadcrumbs: vooral gebruikt op webshops. Ze tonen geselecteerde productkenmerken, zoals: Home > Schoenen > Merk > Maat > Kleur.
- Historie-gebaseerde breadcrumbs: geven het pad weer dat een bezoeker heeft afgelegd binnen de site. Dit type wordt vaak dynamisch gegenereerd en laat bijvoorbeeld zien: “Vorige pagina > Categorie > Huidige pagina.”
De voordelen van het gebruiken van breadcrumbs op je website
Breadcrumbs dragen op meerdere fronten bij aan een betere website-ervaring. Ze verhogen het gebruiksgemak, verlagen de bounce rate en versterken het interne linkprofiel voor SEO.
Gebruiksgemak
Breadcrumbs verbeteren het gebruiksgemak doordat ze bezoekers direct laten zien waar zij zich bevinden binnen de website. Dit helpt bij het oriënteren en voorkomt dat gebruikers verdwalen. Door overzicht te bieden, vergroten breadcrumbs de kans dat bezoekers langer blijven en andere pagina’s bekijken.
Lagere bounce rate en meer pagina’s binnen één bezoek
Breadcrumbs verlagen de bounce rate doordat gebruikers gemakkelijker alternatieve routes binnen je site vinden wanneer de huidige pagina niet aansluit bij hun zoekintentie. Dit stimuleert het doorklikken naar andere relevante pagina’s, waardoor de gemiddelde sessieduur en het aantal bezochte pagina’s per gebruiker toenemen.
SEO
Breadcrumbs versterken het interne linkprofiel van je website doordat elke breadcrumb-link een contextuele verwijzing is naar een hoger liggende pagina. Dit draagt bij aan betere indexeerbaarheid en verdeling van linkwaarde. Cornerstone-pagina’s profiteren hierdoor van meer interne links, wat de autoriteit van deze pagina’s versterkt. Voor maximale SEO-waarde is een logische sitestructuur essentieel.
Hoe implementeer je een broodkruimelpad
Je implementeert een broodkruimelpad door deze visueel zichtbaar te maken op je website via HTML en CSS, en vervolgens te versterken met structured data (zoals JSON-LD) voor zoekmachines. De exacte methode hangt af van je CMS of ontwikkelomgeving.
Voor WordPress-gebruikers is de eenvoudigste oplossing het activeren van breadcrumbs via de Yoast SEO-plugin. Deze functie genereert automatisch een breadcrumb-pad, voegt de juiste Schema.org structured data toe, en integreert dit bovenaan je content.
Heb je een maatwerk-website of werk je met een ander CMS, dan kun je breadcrumbs handmatig implementeren met:
- HTML: gebruik een <nav>-element met een gestructureerde lijst (bijv. <ol> met <li>-items)
- CSS: voor visuele opmaak en scheidingstekens (zoals “>”)
- JSON-LD structured data: om de breadcrumbstructuur begrijpbaar te maken voor zoekmachines
JavaScript kan gebruikt worden voor dynamische breadcrumbs, maar dit is niet aanbevolen tenzij noodzakelijk. Gebruik liever server-side rendering voor SEO-doeleinden. Zorg bij elke implementatie voor:
- Semantische HTML met bijvoorbeeld aria-label=”breadcrumb” voor betere toegankelijkheid
- Een logische en hiërarchische structuur (bijv. Home > Categorie > Subcategorie > Pagina)
- Interne links naar bovenliggende pagina’s
