Breadcrumb: laat zien waar je bezoeker zit

Een bezoeker komt zelden binnen op je homepage. Hij landt via Google midden in je site, op een productpagina of een artikel. Op dat moment weet hij niet waar hij is. Hij ziet één pagina, zonder context. Klopt hij hier wel? Wat is er nog meer?

Een kruimelpad lost dat in één regel op. Het is het kleinste navigatie-element dat bestaat, en tegelijk een van de nuttigste.

Bij Wijnwagentje speelde dit sterk. Dat is een webshop met productfotografie waar ik het webdesign en de zoekoptimalisatie voor deed. Bezoekers kwamen via Google direct op een product terecht.

Ik heb daar een kruimelpad boven de productnaam gezet, gekoppeld aan de categoriestructuur. Wie op een fles landt, ziet nu meteen tot welke groep die hoort. Eén klik terug en je zit in het hele assortiment.

Breadcrumb uitgelegd in het webdesign woordenboek van Project Direct
Een kruimelpad laat in een regel zien waar je bent.

Wat is een breadcrumb?

Een breadcrumb is een rij links die het pad naar je huidige pagina toont. Meestal bovenaan, in kleine letters. Bijvoorbeeld: Home, Woordenboek, B, Breadcrumb.

De naam komt uit het sprookje van Hans en Grietje. Zij strooiden broodkruimels om de weg terug te vinden. Dat is precies de functie van dit navigatiepad.

Drie soorten

De meest gebruikte vorm volgt je sitestructuur. Home, categorie, subcategorie, pagina. Die is stabiel en voorspelbaar. Een tweede vorm volgt de route die de bezoeker zelf liep. Dat werkt zelden goed, want die route is grillig.

De derde vorm toont eigenschappen, bijvoorbeeld merk en maat in een webshop. Handig bij grote assortimenten, verwarrend bij kleine.

Waarom ik ze standaard plaats

Voor je bezoeker

Het geeft context en het biedt een uitweg. In plaats van op de terugknop te drukken, kan iemand een niveau omhoog. Dat scheelt vertrek en het helpt bij terugnavigeren.

Op mobiel is dat effect nog groter. Daar past geen volledig menu in beeld, en een kruimelpad wel.

Voor zoekmachines

Google gebruikt kruimelpaden om je structuur te begrijpen. Welke pagina hoort waaronder, en wat is belangrijk? Dat helpt bij indexering van diepere pagina’s.

Bovendien verschijnen ze in de zoekresultaten. In plaats van een lange URL zie je daar het pad staan. Dat leest prettiger en levert vaak meer klikken op.

Gestructureerde data eronder

Om dat effect in Google te krijgen, heb je meer nodig dan zichtbare tekst. Je moet gestructureerde data meesturen in de code. Dat gebeurt via BreadcrumbList in schema.org.

Zonder die code ziet een bezoeker het pad wel, maar Google leest het niet als structuur. Meer daarover lees je bij schema markup en rich snippet.

Instellen in WordPress

In WordPress regel je dit meestal met je SEO-plugin. Die genereert het pad én de gestructureerde data in één keer. Je plaatst het daarna in je sjabloon of via een widget.

Waar ik op let bij het instellen

  • Begin altijd bij Home, ook op mobiel.
  • De huidige pagina is geen link, alleen tekst.
  • Gebruik een pijl of streepje als scheiding, geen slash.
  • Houd de tekst klein maar leesbaar, minimaal 14 pixels.
  • Zet het boven de H1, niet eronder.

In een webwinkel op WooCommerce is het extra belangrijk. Daar zitten producten vaak drie niveaus diep.

Wanneer je ze kunt overslaan

Heeft je site vijf pagina’s op één niveau? Dan voegt een kruimelpad niets toe. Je toont dan alleen Home en de pagina zelf. Dat is ruis.

Ook op je homepage zelf hoort geen breadcrumb. Dat klinkt logisch, maar ik kom het regelmatig tegen. Zie ook navigatie en informatiearchitectuur.

Wat een kruimelpad je oplevert

Het effect is klein maar meetbaar. Bezoekers klikken vaker door naar een categorie in plaats van weg te gaan. Dat zie je terug in het aantal bekeken pagina’s per bezoek.

Voor mij weegt nog iets anders mee. Een kruimelpad dwingt je om na te denken over je structuur. Past een pagina nergens onder, dan klopt je indeling niet. Dat is een gratis controle op je hele site.

Ik zet ze daarom standaard aan bij elke site met meer dan twee niveaus. Het kost tien minuten instellen en het werkt daarna jarenlang mee. Zie ook URL voor de structuur eronder.

Meer vragen over Breadcrumb

Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.

  • Wat is een breadcrumb op een website?
  • Waarom zijn kruimelpaden goed voor SEO?
  • Waar plaats je een breadcrumb op de pagina?
  • Heeft elke website breadcrumbs nodig?
  • Hoe stel je breadcrumbs in WordPress in?
  • Verschijnen breadcrumbs ook in de zoekresultaten?
Boven de H1 en onder je hoofdmenu. Dat is de plek waar bezoekers hem verwachten, en verwachting is bij navigatie belangrijker dan creativiteit. Houd hem klein maar leesbaar. Ik gebruik minimaal 14 pixels en een gedempte kleur. Zo is hij aanwezig zonder de aandacht van je kop te stelen. De huidige pagina is geen link. Die staat als gewone tekst aan het einde van de rij. Klikken op de pagina waar je al bent, is verwarrend. Als scheidingsteken gebruik ik een pijltje of een streepje. Een slash lijkt te veel op een webadres en leest daardoor minder prettig. Op mobiel laat ik hem staan, juist omdat daar geen volledig menu in beeld past. Wordt het pad te lang, kort dan de middelste stap in. Zie ook navigatie. Kijk ook of je thema er niet al een plaatst. Twee kruimelpaden onder elkaar zie ik vaker dan je zou denken. Test het daarna zelf even op je telefoon. Daar valt het snelst op als iets niet past.
Ze doen drie dingen tegelijk, en dat is zeldzaam voor zo’n klein element. Allereerst maken ze je structuur zichtbaar voor Google. Een zoekmachine leidt uit je kruimelpad af welke pagina onder welke categorie hangt. Dat helpt bij het indexeren van pagina’s die diep in je site zitten. Ten tweede leveren ze interne links op die logisch zijn. Elke productpagina verwijst automatisch naar zijn categorie. Zonder dat je daar handmatig iets voor hoeft te doen. Ten derde verschijnen ze in de zoekresultaten. In plaats van een lange onleesbare URL zie je daar het pad staan. Dat leest prettiger en levert in de praktijk meer klikken op. Daarvoor moet je wel gestructureerde data meesturen. Zonder BreadcrumbList in je code ziet Google alleen tekst. Zie ook schema markup. Het mooie is dat je er verder niets voor hoeft te doen. Eenmaal ingesteld werkt het op elke nieuwe pagina mee. Het is dus een van de weinige ingrepen die drie dingen tegelijk verbetert.
Nee. Bij een site met vijf pagina’s op één niveau voegt een kruimelpad niets toe. Je toont dan alleen Home en de pagina zelf, en dat is ruis. De vuistregel die ik hanteer: heb je meer dan twee niveaus, dan zijn ze nuttig. Denk aan een webshop met categorieën, een kennisbank of een woordenboek als dit. Bij een webshop zou ik ze altijd plaatsen. Producten zitten daar vaak drie lagen diep, en bezoekers komen via Google rechtstreeks op zo’n product binnen. Op je homepage horen ze niet. Dat klinkt vanzelfsprekend, maar ik kom het regelmatig tegen bij thema’s die het automatisch overal aanzetten. Twijfel je? Kijk hoe diep je diepste pagina zit. Moet een bezoeker meer dan twee keer klikken vanaf de voorpagina, dan zijn ze de moeite waard. Zie ook informatiearchitectuur. Groeit je site later door? Zet ze dan alsnog aan. Achteraf toevoegen is een kwestie van minuten. Groeit je aanbod, dan groeit de behoefte vanzelf mee. Houd dat in de gaten.
De meeste SEO-plugins hebben deze functie ingebouwd. Die genereren het zichtbare pad én de gestructureerde data. Dat is precies wat je wilt. Je zet de functie eerst aan in de instellingen van de plugin. Daarna plaats je het element in je sjabloon of via een widget in je paginabouwer. Bij Elementor is dat een losse widget die je bovenaan sleept. Controleer daarna twee dingen. Klopt het pad met je werkelijke structuur? En staat de gestructureerde data er ook echt in? Dat laatste test je met de Rich Results Test van Google. Plak je URL erin en kijk of BreadcrumbList wordt herkend. Heb je een eigen thema, dan kan het ook in code. Dat geeft meer controle over de opmaak. Zie ook WordPress. Controleer daarna een pagina van elk type. Een product, een categorie en een gewone pagina. Zie ook sitemap. Werkt het niet meteen? Leeg dan eerst je cache voordat je gaat zoeken.
Ja, mits je de gestructureerde data goed hebt staan. Google vervangt de URL in het zoekresultaat dan door je kruimelpad. In plaats van een lange reeks met slashes ziet iemand dan bijvoorbeeld: jouwsite.nl, woordenboek, breadcrumb. Dat is korter, leesbaarder en het geeft context voordat iemand klikt. Garantie is er niet. Google beslist zelf of het die weergave toont, net als bij andere verrijkte resultaten. Zonder de juiste code gebeurt het in elk geval nooit. Het effect merk je vooral op mobiel. Daar is de ruimte krap en wordt een lange URL bruut afgekapt. Een kruimelpad past wel. Test het na het instellen en wacht daarna een paar weken. Google moet je pagina’s opnieuw ophalen voordat je het terugziet. Zie ook rich snippet. Blijft het uit? Controleer dan eerst je gestructureerde data opnieuw. Daar zit vrijwel altijd de oorzaak. Geduld hoort erbij. Google bepaalt zelf wanneer het je pagina opnieuw ophaalt.
Weet je niet of jouw site een logische structuur heeft? Stuur me het adres via het formulier hieronder. Ik teken je huidige opbouw uit en laat zien waar bezoekers de weg kwijtraken. Dat kost je niets en levert vaak direct inzicht op. Vermeld je plaats, dan weet ik meteen waar je zit.

Waar kan ik je mee helpen?