Je zit drie niveaus diep op een website. Je wilt terug naar de categorie waar je vandaan kwam, niet helemaal naar de homepage. Zonder breadcrumbs gebruik je steeds de terugknop of begin je opnieuw bovenaan. Breadcrumbs lossen dit op met één klik.
Breadcrumbs, of broodkruimelnavigatie, zijn een secundair navigatie-element dat bezoekers het pad laat zien van de homepage naar de pagina waarop ze nu zijn. Het staat meestal bovenaan de pagina als een horizontaal spoor van links, bijvoorbeeld Home, dan Categorie, dan Subcategorie, dan de huidige pagina. Elke stap is een klikbare link die de bezoeker terugbrengt naar dat niveau van de site.
De naam komt uit het sprookje van Hans en Grietje, waarin de kinderen een spoor van broodkruimels door het bos achterlieten om de weg terug te vinden. Op een website is het idee hetzelfde: een zichtbaar spoor dat laat zien waar je bent en je een manier geeft om je stappen terug te volgen.
Welke soorten breadcrumbnavigatie zijn er?
Er zijn drie soorten breadcrumbs, elk geschikt voor een ander soort sitestructuur.
Locatiebreadcrumbs zijn de meest voorkomende soort. Ze tonen de vaste positie van een bezoeker in de hiërarchie van de site, op basis van hoe de site is opgebouwd. Een bezoeker op een productpagina binnen een categorie ziet bijvoorbeeld Home, dan Winkel, dan Categorienaam, dan Productnaam. Het pad is hetzelfde voor elke bezoeker die op die pagina landt, omdat het de structuur van de site weerspiegelt en niet de route van de bezoeker.
Padbreadcrumbs tonen de werkelijke route die een bezoeker nam om bij de huidige pagina te komen. Ze veranderen afhankelijk van hoe de bezoeker is aangekomen. Ze zijn minder gebruikelijk omdat ze verwarrend kunnen zijn: twee bezoekers op dezelfde pagina zien misschien verschillende breadcrumbs, wat het doel ondermijnt om de sitestructuur te tonen. De meeste sites gebruiken in plaats daarvan locatiebreadcrumbs.
Attribuutbreadcrumbs worden gebruikt op webwinkels waar producten tot meerdere categorieën kunnen horen of gefilterd kunnen worden op kenmerken als kleur, maat of merk. In plaats van één hiërarchisch pad tonen ze de toegepaste filters of kenmerken. Dit is een gespecialiseerde soort die vooral wordt gebruikt bij productcatalogi.
Wanneer heeft een website breadcrumbs nodig?
Breadcrumbs zijn het meest waardevol op sites met een diepe of complexe structuur, waar bezoekers meerdere niveaus onder de homepage kunnen landen en een manier nodig hebben om zich te oriënteren.
Webwinkels met productcategorieën en subcategorieën hebben er veel baat bij. Een bezoeker die vanuit een zoekresultaat op een productpagina landt, wil misschien vergelijkbare producten in dezelfde categorie bekijken. Breadcrumbs geven hem een direct pad naar het categorieniveau, zonder opnieuw te beginnen bij de homepage.
Kennisbanken, documentatiesites en inhoudsrijke sites met meerdere onderwerpcategorieën profiteren ook. Een bezoeker die een specifiek artikel leest en wil zien wat er nog meer in hetzelfde onderwerpgebied staat, kan de breadcrumb terug volgen naar de categorie in plaats van opnieuw te zoeken.
Een eenvoudige bedrijfswebsite van vijf pagina's met een platte structuur heeft geen breadcrumbs nodig. Als er geen betekenisvolle hiërarchie is om te navigeren, voegt het element visuele rommel toe zonder doel. Het artikel over wat websitestructuur is legt de hiërarchie uit die breadcrumbs weerspiegelen. Het artikel over wat websitenavigatie is behandelt het volledige navigatiesysteem en waar breadcrumbs daarin passen.
Hoe beïnvloeden breadcrumbs de gebruikerservaring?
Breadcrumbs verminderen de moeite die nodig is om door een site met meerdere niveaus te bewegen. Ze geven bezoekers drie dingen tegelijk: bevestiging van waar ze nu zijn, een zichtbare kaart van hoe de site is opgebouwd en een snelkoppeling om terug te gaan naar elk niveau van de hiërarchie.
Zonder breadcrumbs op een diepe site moeten bezoekers die een categorie willen verkennen steeds de terugknop gebruiken, naar het hoofdmenu gaan en opnieuw beginnen, of de zoekfunctie gebruiken. Alle drie vragen meer moeite dan één klik op een breadcrumb. Die frictie verminderen houdt bezoekers langer op de site en vergroot de kans dat ze vinden waarvoor ze kwamen.
Breadcrumbs verminderen ook de frustratie van bezoekers die diep in een site landen vanuit een zoekmachine. Ze kennen de structuur van de site bij aankomst misschien helemaal niet. Breadcrumbs geven hun meteen context: ze zien in één oogopslag dat ze naar een specifiek product in een specifieke categorie op een specifiek soort site kijken. Die oriëntatie telt voor vertrouwen en voor verder bladeren.
Hoe beïnvloeden breadcrumbs SEO?
Breadcrumbs beïnvloeden SEO op twee manieren: via signalen over de sitestructuur en via hoe zoekmachines resultaten tonen.
Als breadcrumbs goed zijn uitgevoerd met gestructureerde data, kunnen zoekmachines de hiërarchie van de site uit de breadcrumbpaden lezen en begrijpen. Dat helpt bij het crawlen en bij het begrijpen van hoe pagina's zich tot elkaar verhouden. Pagina's die duidelijk zijn geplaatst in een goed gedefinieerde hiërarchie worden meestal nauwkeuriger begrepen en geïndexeerd dan pagina's in platte of onduidelijke structuren.
Het tweede effect zie je in zoekresultaten. Als breadcrumbs gestructureerde data bevatten, tonen zoekmachines soms het breadcrumbpad in plaats van de volledige URL onder de paginatitel in zoekresultaten. Een resultaat dat Home, dan Categorie, dan Product toont, is in één oogopslag makkelijker te begrijpen dan een lange URL met parameters. Die betere leesbaarheid kan de doorklikratio (CTR) vanuit zoekresultaten verhogen.
Breadcrumbs dragen ook bij aan interne links. Elke breadcrumblink is een interne link die autoriteit omhoog geeft in de hiërarchie en zo het belang van categorie- en hubpagina's versterkt. Voor grote sites is dat een betekenisvol structureel SEO-voordeel. Het artikel over wat SEO is behandelt hoe interne links en sitestructuur breder samenhangen met zoekprestaties.
Wat is gestructureerde data voor breadcrumbs?
Gestructureerde data is code die aan een pagina wordt toegevoegd om zoekmachines specifieke elementen op de pagina in een gestandaardiseerd formaat te laten begrijpen. Gestructureerde data voor breadcrumbs vertelt zoekmachines de naam en URL van elke stap in het breadcrumbpad, in een formaat dat zoekmachines officieel ondersteunen.
Zonder gestructureerde data kan een zoekmachine de breadcrumbtekst op de pagina zien, maar moet hij afleiden wat die betekent. Met gestructureerde data is de informatie expliciet: dit is een breadcrumb, dit is stap één met deze naam en deze URL, dit is stap twee, enzovoort. Zoekmachines gebruiken dit om de weergave van breadcrumbs in zoekresultaten op te bouwen en om de hiërarchie van de site betrouwbaarder te begrijpen.
De meeste moderne websitebouwers en CMS-platforms maken gestructureerde data voor breadcrumbs automatisch aan als breadcrumbs aanstaan. Bouw of beheer je een site handmatig, dan is het de moeite waard om deze markup toe te voegen voor elke site met betekenisvolle hiërarchische inhoud.
Zo regelt WEMASY breadcrumbnavigatie
De Websitebouwer van WEMASY ondersteunt breadcrumbnavigatie voor sites met hiërarchische inhoudsstructuren. Als je ze aanzet, worden breadcrumbs automatisch gemaakt op basis van de categorie van de pagina en haar positie in de sitestructuur, inclusief de gestructureerde data die zoekmachines gebruiken om ze in resultaten te tonen.
Bekijk wat erbij zit op de WEMASY Websitebouwer of bekijk de abonnementen op de prijspagina.
Veelgestelde vragen
Vervangen breadcrumbs het hoofdnavigatiemenu?
Nee. Breadcrumbs en de hoofdnavigatie dienen verschillende doelen. Met de hoofdnavigatie springen bezoekers vanaf elke pagina naar elk onderdeel van de site. Breadcrumbs laten zien waar de huidige pagina in de hiërarchie staat en laten bezoekers langs dat specifieke pad terug omhoog gaan. Op een goed ontworpen site bestaan beide elementen en werken ze samen. Breadcrumbs zijn een secundaire navigatielaag, geen vervanging van het primaire menu. Met de Websitebouwer van WEMASY zet je dit direct op je website.
Waar horen breadcrumbs op een pagina?
Breadcrumbs staan meestal bovenaan de pagina, onder de hoofdnavigatiebalk en boven de paginakop. Op die plek staan ze waar bezoekers aanwijzingen voor oriëntatie verwachten en voordat de hoofdinhoud begint. Ze moeten visueel duidelijk maar niet dominant zijn: klein genoeg om de hoofdinhoud niet in de weg te zitten, groot genoeg om prettig te lezen en aan te tikken op mobiel.
Moeten breadcrumbs de huidige pagina bevatten?
Dat hangt af van de afspraak die je volgt. Sommige breadcrumbs nemen de huidige pagina op als laatste item in het pad, getoond als gewone tekst en niet als klikbare link. Andere eindigen het pad op het bovenliggende niveau, omdat linken naar de pagina waar je al bent geen doel dient. Beide aanpakken zijn gangbaar en acceptabel. De belangrijkere vraag is of het pad duidelijk het traject laat zien van de homepage naar waar de bezoeker nu is.
Helpen breadcrumbs op mobiel?
Ja, maar ze moeten zorgvuldig worden uitgevoerd. Op een klein scherm kan een lang breadcrumbpad over meerdere regels breken of buiten het vlak lopen. Gangbare oplossingen zijn tussenliggende stappen inkorten met een ellips, alles behalve het direct bovenliggende niveau inklappen of op mobiel alleen de link een niveau omhoog tonen. Het doel is het voordeel van oriëntatie te behouden zonder dat het pad het scherm domineert. Een breadcrumb die slecht werkt op mobiel is erger dan geen breadcrumb.
Zijn breadcrumbs een rankingfactor?
Niet direct. Zoekmachines rangschikken pagina's niet hoger alleen omdat ze breadcrumbs hebben. Het SEO-voordeel komt indirect: breadcrumbs met gestructureerde data helpen zoekmachines de sitestructuur nauwkeuriger te begrijpen, breadcrumblinks dragen bij aan interne linkautoriteit en de weergave van breadcrumbs in zoekresultaten kan de doorklikratio verbeteren. Dit zijn echte voordelen die de moeite waard zijn, maar ze werken via betere structuur en bruikbaarheid en zijn geen direct rankingsignaal.