Breadcrumbnavigatie: kleine links, grote voordelen voor je website

Breadcrumbs zijn ook nuttig voor de toegankelijkheid en de structuur van een website. Maar heeft iedere website ze nodig? En waaraan herken je een goede breadcrumbtrail? Laten we het spoor volgen en ontdekken hoe het zit.

Je zult misschien verbaasd zijn hoeveel er te ontdekken valt over deze ogenschijnlijk eenvoudige navigatiefunctie.

Van sprookjes tot websites: een korte geschiedenis van breadcrumbs

De naam komt uit het sprookje Hans en Grietje van de gebroeders Grimm. Twee kinderen die in een bos worden achtergelaten, proberen de weg naar huis terug te vinden door een spoor van broodkruimels achter te laten. Helaas eten de vogels de broodkruimels op en raken de kinderen de weg kwijt. Gelukkig zijn digitale breadcrumbs een stuk betrouwbaarder.

Breadcrumbnavigatie verscheen in de jaren negentig op websites, toen ontwerpers zochten naar manieren om bezoekers door steeds complexere websites te laten navigeren. De usability-expert Jakob Nielsen beveelt breadcrumbs al sinds 1995 aan. Dat geeft wel aan hoe ingeburgerd dit ontwerppatroon inmiddels is.

Hoewel webdesign de afgelopen drie decennia ingrijpend is veranderd, zijn breadcrumbs opmerkelijk consistent gebleven. Ze staan meestal bovenaan de pagina, gebruiken korte tekstlabels die met pijltjes of vergelijkbare tekens van elkaar worden gescheiden en bieden links naar hoger gelegen onderdelen van de website.

Soms zijn het de eenvoudigste ideeën die de tand des tijds doorstaan.

Wat is breadcrumbnavigatie?

Breadcrumbnavigatie, ook wel een breadcrumbtrail of kruimelpad genoemd, is een secundair navigatiesysteem dat bezoekers helpt te begrijpen waar een pagina zich binnen de structuur van een website bevindt.

Een typische breadcrumbtrail ziet er bijvoorbeeld zo uit:

Home › Diensten › Digitale marketing › SEO-audits

Elke link vertegenwoordigt een niveau binnen de website, van een breed onderdeel naar steeds specifiekere inhoud. In dit voorbeeld kan iemand die een artikel over SEO-audits leest op ‘Digitale marketing’ klikken om verwante diensten te bekijken, of op ‘Diensten’ om het volledige aanbod van het bedrijf te zien.

Breadcrumbs staan meestal onder het hoofdmenu en boven de hoofdtitel van de pagina. Ze zijn vooral handig wanneer iemand rechtstreeks op een specifieke pagina terechtkomt via een zoekmachine, een bericht op sociale media, een e-mail of een andere website.

Een bezoeker die halverwege je website binnenkomt, heeft immers niet noodzakelijk de zorgvuldig uitgestippelde route gevolgd die je bij het ontwerpen ervan voor ogen had.

Een breadcrumbtrail geeft direct houvast en context.

Drie soorten breadcrumbnavigatie

Hoewel de meeste breadcrumbs er ongeveer hetzelfde uitzien, zijn er drie algemeen erkende typen.

1. Breadcrumbs op basis van hiërarchie

Deze laten zien waar de huidige pagina zich binnen de structuur van de website bevindt.

Bijvoorbeeld:

Home › Recepten › Vegetarisch › Groentecurry

Breadcrumbs op basis van hiërarchie zijn het meest gebruikelijk en over het algemeen geschikt voor bedrijfswebsites, blogs, onlinepublicaties en websites met duidelijk georganiseerde categorieën.

2. Breadcrumbs op basis van browsegeschiedenis

Deze worden ook wel padgebaseerde breadcrumbs genoemd. Ze geven de route weer die een bezoeker heeft afgelegd om een pagina te bereiken.

In tegenstelling tot hiërarchische breadcrumbs kan het pad veranderen afhankelijk van de manier waarop iemand bij de inhoud terechtkomt. Ze zijn minder gebruikelijk op traditionele websites, mede omdat browsers al knoppen voor Vorige en Volgende hebben.

Het is belangrijk om te onthouden dat een hiërarchische breadcrumb niet noodzakelijk de daadwerkelijke browsegeschiedenis van iemand weergeeft. De breadcrumb laat zien waar een pagina thuishoort, niet waar de bezoeker allemaal is geweest.

3. Breadcrumbs op basis van kenmerken

Deze worden vaak gebruikt op webshops, waar bezoekers producten bekijken via categorieën of productkenmerken.

Bijvoorbeeld:

Home › Kleding › Dames › Jurken › Avondjurken

In geavanceerdere webshops kunnen breadcrumbs ook geselecteerde productkenmerken of filters weergeven.

Dit kan ingewikkeld worden wanneer klanten producten bekijken met verschillende combinaties van eigenschappen. Het belangrijkste is dat de navigatie begrijpelijk blijft en geen verwarrende of misleidende routes creëert.

Voor de meeste websites bieden hiërarchische breadcrumbs de meest overzichtelijke oplossing.

Waarom zijn breadcrumbs goed voor de gebruikerservaring?

Een van de basisprincipes van goed webdesign is bezoekers helpen begrijpen waar ze zijn en wat ze vervolgens kunnen doen.

Breadcrumbs ondersteunen dit door drie eenvoudige vragen te beantwoorden:

• Waar ben ik?

• Waar hoort deze pagina thuis?

• Hoe navigeer ik naar een hoger gelegen onderdeel?

Stel je iemand voor die via Google naar een bepaald product zoekt. Die persoon klikt op een zoekresultaat en komt rechtstreeks op de productpagina terecht. Het product ziet er interessant uit, maar is niet helemaal wat de bezoeker zoekt.

Zonder breadcrumbs moet diegene mogelijk het hoofdmenu verkennen, opnieuw zoeken of gewoon teruggaan naar Google. Met breadcrumbs kan de bezoeker rechtstreeks naar de relevante categorie gaan en alternatieven bekijken.

Een duidelijk gelabelde breadcrumb biedt dus een handige route naar een breder onderwerp.

De structuur van de website zichtbaar maken

Breadcrumbs geven bezoekers ook aanwijzingen over de manier waarop een website is georganiseerd.

Bekijk dit voorbeeld:

Home › Kenniscentrum › Webdesign › Toegankelijkheid

Zonder het menu te hoeven verkennen, ziet de bezoeker meteen dat het artikel onder de sectie Webdesign valt, die op haar beurt deel uitmaakt van een groter kenniscentrum.

Dit is vooral nuttig voor websites met veel inhoud, waarvan bezoekers de volledige structuur mogelijk niet kennen.

Het benadrukt ook iets wat website-eigenaren soms over het hoofd zien: navigatie draait niet alleen om het bereiken van een bestemming. Het gaat ook om het begrijpen van de onderlinge relaties tussen verschillende onderdelen van een website.

Wat zegt gebruikersonderzoek?

De Nielsen Norman Group heeft breadcrumbnavigatie uitgebreid onderzocht. De organisatie beveelt breadcrumbs aan als hulpmiddel waarmee bezoekers hun positie binnen de informatiehiërarchie van een website beter kunnen begrijpen.

Belangrijk is dat de Nielsen Norman Group benadrukt dat breadcrumbs een aanvulling moeten zijn op de primaire navigatie, en deze niet mogen vervangen.

Ze kunnen een slecht georganiseerde website niet redden, maar ze kunnen een al logische structuur wel eenvoudiger toegankelijk maken. Dat is een belangrijk onderscheid. Breadcrumbs zijn geen vervanging voor een goede informatiearchitectuur. Ze maken die architectuur juist bruikbaarder voor bezoekers.

Breadcrumbs en toegankelijkheid

Breadcrumbnavigatie kan ook de toegankelijkheid verbeteren, vooral voor mensen die baat hebben bij extra navigatiemogelijkheden. Breadcrumbs bieden bijvoorbeeld een directe route naar bovenliggende pagina's, zonder dat iemand het volledige menu hoeft te doorlopen.

Het toevoegen van een breadcrumbtrail maakt een website echter niet automatisch toegankelijk.

Het Web Accessibility Initiative van het W3C beschrijft een aanbevolen breadcrumbpatroon waarbij een correct gelabeld navigatiegebied wordt gebruikt. Hierdoor kunnen ondersteunende technologieën, waaronder schermlezers, de breadcrumbtrail herkennen als een afzonderlijk navigatiegebied.

Ook moet de huidige pagina herkenbaar zijn. Ontwikkelaars kunnen hiervoor het HTML-attribuut aria-current="page" gebruiken om aan te geven welk onderdeel overeenkomt met de pagina die op dat moment wordt bekeken.

Voor webdesigners zijn daarnaast de volgende aandachtspunten belangrijk:

• Gebruik duidelijke, betekenisvolle linkteksten.

• Zorg voor voldoende kleurcontrast.

• Maak links toegankelijk via het toetsenbord.

• Zorg voor zichtbare focusindicatoren bij toetsenbordnavigatie.

• Maak links gemakkelijk aanklikbaar op touchscreens.

• Voorkom dat breadcrumbtrails op mobiele apparaten onleesbaar worden.

Een veelvoorkomend ontwerpprobleem is dat breadcrumbs zo klein worden gemaakt dat ze nauwelijks zichtbaar zijn, vooral op kleinere schermen.

Hoewel breadcrumbs visueel ondergeschikt moeten blijven aan de hoofdinhoud, moeten ze wel bruikbaar zijn.

Goede toegankelijkheid en een goede gebruikerservaring gaan vaak hand in hand.

Heeft iedere website breadcrumbs nodig?

Niet noodzakelijk.

Een kleine bedrijfswebsite met vijf of zes pagina's, die allemaal rechtstreeks via het hoofdmenu bereikbaar zijn, heeft misschien weinig behoefte aan een extra breadcrumbtrail. Als iedere breadcrumb alleen maar ‘Home’ en de huidige pagina zou tonen, is de meerwaarde mogelijk beperkt.

Naarmate websites groter en complexer worden, neemt het nut van breadcrumbs echter toe.

Ze zijn vooral handig voor:

• Webshops met meerdere productcategorieën.

• Onlinemagazines en nieuwspublicaties.

• Websites met uitgebreide kenniscentra of blogs.

• Educatieve websites en onlinecursussen.

• Documentatie- en supportwebsites.

• Bedrijfswebsites met meerdere niveaus van diensten of informatiebronnen.

De beslissing moet gebaseerd zijn op de structuur van de website en de behoeften van de bezoekers.

Vraag je dus niet af of breadcrumbs een SEO-best practice zijn die iedere website moet volgen. Stel liever een eenvoudigere vraag:

Maakt breadcrumbnavigatie deze website gemakkelijker te gebruiken?

Als breadcrumbs bezoekers helpen hun positie te begrijpen, relevante inhoud te ontdekken of tussen secties te navigeren, zijn ze waarschijnlijk de moeite waard.

Als ze alleen navigatie dupliceren die toch al duidelijk is, kunnen ze juist onnodige drukte veroorzaken.

Breadcrumbnavigatie in Joomla

Een van de voordelen van Joomla is dat breadcrumbnavigatie beschikbaar is via een ingebouwde module. Je hoeft doorgaans geen extensie van een derde partij te installeren om een standaard breadcrumbtrail weer te geven.

Websitebeheerders kunnen de module Breadcrumbs via de Joomla-beheeromgeving aanmaken of configureren, deze toewijzen aan een geschikte templatepositie en instellen op welke pagina's de module moet worden weergegeven.

De opties omvatten onder meer het wel of niet weergeven van de Home-link, het aanpassen van de tekst daarvan en het tonen van de huidige pagina als laatste breadcrumb.

Een bijzonder belangrijk punt is dat de breadcrumbs in Joomla afhankelijk zijn van de navigatie- en routeringsstructuur van de website. De breadcrumbtrail kan daardoor worden beïnvloed door menu-items, hun onderlinge ouder-kindrelaties en de component die de huidige pagina weergeeft.

Als je breadcrumbs niet de hiërarchie tonen die je verwachtte, is het verstandig eerst de onderliggende menu- en contentstructuur te controleren voordat je ervan uitgaat dat er iets mis is met de module.

Het is ook goed om te weten dat Joomla menu-itemtypen ondersteunt, zoals scheidingstekens en koppen, die niet naar echte bestemmingspagina's verwijzen. Deze kunnen als niet-aanklikbare onderdelen in een breadcrumbtrail verschijnen.

Voor wie een uitgebreidere technische uitleg wil, heeft Peter Martin, lid van de Joomla-community, een uitgebreide handleiding gepubliceerd: Joomla-breadcrumbs configureren.

Peter behandelt de moduleopties, het Pathway-systeem van Joomla, menu-relaties, vormgeving, meertalige websites en gestructureerde gegevens.

Het is een uitstekende informatiebron voor Joomla-beheerders en ontwikkelaars die willen begrijpen hoe alles achter de schermen werkt.

Zeven best practices voor breadcrumbnavigatie

Of je nu Joomla, een ander contentmanagementsysteem of een op maat gebouwde website gebruikt, dezelfde basisprincipes zijn van toepassing.

1. Begin met een logische websitestructuur.

Breadcrumbs moeten betekenisvolle relaties tussen pagina's weerspiegelen. Als de onderliggende structuur verwarrend is, lossen breadcrumbs dat probleem niet op.

2. Gebruik duidelijke, beschrijvende labels.

Kies woorden die bezoekers begrijpen, in plaats van interne terminologie of onhandige zoekwoordcombinaties.

3. Zorg voor een consistente weergave.

Breadcrumbs moeten op een voorspelbare plaats staan en op de hele website hetzelfde herkenbare patroon volgen.

4. Maak links naar bovenliggende pagina's aanklikbaar waar dat mogelijk is.

Breadcrumbs moeten bezoekers helpen naar hoger gelegen onderdelen van de website te navigeren. Sommige contentmanagementsystemen, waaronder Joomla, ondersteunen echter ook niet-aanklikbare koppen of scheidingstekens in navigatiestructuren.

Als een bovenliggende sectie een nuttige bestemmingspagina heeft, biedt een link daarnaartoe doorgaans een betere navigatie-ervaring.

5. Vervang het hoofdmenu niet.

Breadcrumbs zijn een extra navigatiehulpmiddel, geen vervanging voor de primaire navigatie.

6. Houd rekening met mobiele gebruikers.

Lange breadcrumbtrails kunnen kostbare schermruimte innemen. Test hoe ze op kleinere apparaten worden weergegeven en functioneren.

7. Geef toegankelijkheid prioriteit.

Zorg ervoor dat breadcrumbs leesbaar zijn, met het toetsenbord kunnen worden bediend en begrijpelijk zijn voor ondersteunende technologieën.

Hoe weet je of je breadcrumbs goed werken?

Begin door je website te gebruiken zoals een bezoeker dat zou doen.

Open een pagina die zich meerdere niveaus onder de homepage bevindt en bekijk de breadcrumbtrail.

• Laat deze correct zien waar de pagina thuishoort?

• Zijn de labels betekenisvol?

• Kun je gemakkelijk naar een relevante bovenliggende categorie navigeren?

Herhaal deze test vervolgens op een mobiel apparaat. Controleer of de links gemakkelijk te selecteren zijn, de tekst leesbaar blijft en de breadcrumbtrail een redelijke hoeveelheid schermruimte inneemt.

Heb je een meertalige website, controleer dan of de breadcrumbs de juiste taal gebruiken en naar de bijbehorende taalversies van de pagina's verwijzen.

Gebruik voor technische validatie de Rich Results Test van Google of de Schema Markup Validator om de gestructureerde gegevens te controleren. Je kunt ook Google Search Console gebruiken om relevante rapporten over gestructureerde gegevens te bekijken en mogelijke problemen op te sporen.

Wil je weten hoe bezoekers breadcrumbs gebruiken, dan kun je Google Tag Manager (GTM) configureren om klikken op breadcrumblinks te registreren en deze interacties als gebeurtenissen naar Google Analytics 4 (GA4) te sturen.

De verzamelde gegevens kun je vervolgens in GA4 analyseren om te begrijpen welke breadcrumblinks bezoekers gebruiken en of ze naar hoger gelegen onderdelen van de website navigeren.

Dit kan vooral nuttig zijn bij grotere websites, waar breadcrumbnavigatie meerdere mogelijke routes door de inhoud biedt.

De resultaten moeten echter zorgvuldig worden geïnterpreteerd. Een bezoeker die niet op een breadcrumb klikt, kan simpelweg precies hebben gevonden wat die zocht. Niet iedere nuttige websitefunctie hoeft klikken op te leveren om haar bestaansrecht te bewijzen.

Bij grotere websites kunnen gecontroleerde SEO-experimenten bovendien helpen vaststellen of wijzigingen aan breadcrumbs invloed hebben op de organische zoekprestaties.

Voor kleinere websites is een combinatie van gebruikerstests, gegevens uit Search Console, analytics en voortdurende observatie mogelijk praktischer.

Het doel is te begrijpen of breadcrumbs bezoekers helpen, niet simpelweg aan te tonen dat erop wordt geklikt.

Conclusie: soms zijn het juist de kleinste details die het belangrijkst zijn

Breadcrumbnavigatie is niet het spannendste onderdeel van webdesign. De meeste bezoekers zullen het waarschijnlijk niet eens opmerken wanneer alles goed werkt. En weinig mensen kiezen een website omdat deze een bijzonder indrukwekkende breadcrumbtrail heeft.

Maar dat is nu juist de bedoeling.

Goede navigatie helpt mensen vinden wat ze zoeken, zonder onnodig hun aandacht op te eisen. Breadcrumbs kunnen grote websites gemakkelijker doorzoekbaar maken, de toegankelijkheid ondersteunen en een duidelijke informatiearchitectuur versterken.

Of je nu een nieuwe website bouwt of een bestaande website onder de loep neemt, het is de moeite waard om een paar minuten de tijd te nemen om je eigen breadcrumbtrail te volgen.

Misschien ontdek je dat deze meer vertelt over de structuur van je website dan je had verwacht.

En anders dan Hans en Grietje hoeven je bezoekers niet bang te zijn dat vogels hun weg naar huis opeten.

Maar er is nog een andere kant aan het verhaal van breadcrumbs

Breadcrumbs kunnen ook invloed hebben op de manier waarop zoekmachines websitecontent ontdekken, interpreteren en presenteren. En sommige bevindingen zetten de gebruikelijke SEO-adviezen op losse schroeven.

In deel twee: Breadcrumbs en SEO bekijken we de richtlijnen van Google, gestructureerde gegevens, de bevindingen van Screaming Frog en SearchPilot en een interessante aanbeveling van de inmiddels overleden Bruce Clay.

Verder lezen?

• Nielsen Norman Group: Breadcrumbs: 11 ontwerprichtlijnen

• W3C: Toegankelijkheidspatroon voor breadcrumbs

• Peter Martin: Joomla-breadcrumbs configureren