Gebruik broodkruimels bij een echte paginahiërarchie
Een broodkruimelpad is een reeks links naar de bovenliggende pagina’s van de huidige pagina. Het helpt een bezoeker herkennen waar die pagina binnen de website staat en maakt het mogelijk om stap voor stap naar een hoger niveau te gaan.
Dat is vooral nuttig wanneer je website meer dan één of twee navigatieniveaus heeft. Denk aan “Diensten → Websitebeheer → Onderhoud aanvragen” of “Kennisbank → Formulieren → Foutmeldingen”. Heeft je website alleen Home, Diensten, Over en Contact, allemaal direct bereikbaar vanuit het hoofdmenu, dan is een extra broodkruimelpad meestal niet nodig.
Toon de websitestructuur, niet de klikgeschiedenis
Laat het pad de vaste relatie tussen pagina’s zien. Iemand kan via Google, een nieuwsbrief of een directe link binnenkomen; de broodkruimels moeten dan nog steeds dezelfde logische route tonen. Ze zijn dus geen overzicht van de pagina’s die deze bezoeker hiervoor heeft geopend.
Kies per niveau een echte bovenliggende overzichtspagina. Zet geen stap in het pad alleen omdat hetzelfde woord in de URL voorkomt. Google adviseert voor gestructureerde breadcrumbgegevens een gebruikelijke gebruikersroute naar de pagina te beschrijven in plaats van de URL-structuur simpelweg te kopiëren.
Houd ieder niveau herkenbaar en klikbaar
Begin bij een herkenbaar hoofdniveau, voeg alleen noodzakelijke tussenstappen toe en eindig met de huidige pagina. De W3C-uitleg over broodkruimels beschrijft een hiërarchische lijst van links naar bovenliggende pagina’s. Het huidige paginaniveau staat als laatste in de reeks.
Gebruik korte, beschrijvende namen die overeenkomen met wat iemand op de doelpagina aantreft. “Diensten” en “Websitebeheer” zijn bruikbaarder dan “Overzicht” en “Meer”. Laat een tussenstap niet klikbaar lijken wanneer er geen echte pagina achter zit; maak dan eerst de informatiearchitectuur duidelijker of laat dat niveau weg.
Maak de navigatie ook technisch herkenbaar
Plaats de broodkruimels in een navigatiegebied met een duidelijk label, bijvoorbeeld “Broodkruimels”. W3C adviseert een navigation landmark met aria-label of aria-labelledby. Markeer een gelinkte huidige pagina met aria-current="page"; wanneer de huidige pagina geen link is, is die markering optioneel.
Een geordende lijst past bij de vaste volgorde van de niveaus. Voeg visuele scheidingstekens, zoals een schuine streep of pijl, zo toe dat een schermlezer ze niet onnodig voorleest. Het W3C-voorbeeld gebruikt daarvoor CSS in plaats van betekenisloze tekens in de toegankelijke naam.
Behandel zichtbare navigatie en structured data apart
De zichtbare broodkruimels zijn er voor bezoekers. Daarnaast kun je dezelfde hiërarchie beschrijven met BreadcrumbList-structured data. Google vereist daarvoor minimaal twee ListItem-elementen en gebruikt onder meer position en name; voor het laatste item mag item ontbreken.
Structured data vervangt de zichtbare navigatie niet en garandeert geen bijzondere weergave in zoekresultaten. Zorg dat de gemarkeerde route past bij de route die bezoekers op de pagina zien. Controleer de code na een wijziging met de Rich Results Test en los kritieke fouten op voordat je publiceert.
Controleer het pad op mobiel en desktop
Een lang pad kan op een klein scherm meerdere regels innemen. Laat de reeks netjes afbreken en voorkom horizontaal scrollen. Kort liever de labels in dan dat je essentiële niveaus alleen op mobiel verbergt, want de route moet daar dezelfde betekenis houden.
Open tot slot een paar diepe pagina’s rechtstreeks, dus zonder eerst door het menu te klikken. Zo zie je of het pad ook voor een nieuwe bezoeker begrijpelijk is en of iedere bovenliggende link echt naar het bedoelde overzicht leidt.
- De website heeft genoeg niveaus om broodkruimels nuttig te maken.
- Het pad toont de vaste websitestructuur en geen bezoekgeschiedenis.
- Iedere tussenstap verwijst naar een echte bovenliggende pagina.
- De broodkruimels staan in een gelabeld navigatiegebied.
- De huidige pagina is als laatste niveau herkenbaar.
- Structured data beschrijft dezelfde logische hiërarchie.
- Het pad blijft zonder horizontale overflow bruikbaar op mobiel.