Breadcrumbs, in het Nederlands kruimelpad of broodkruimelnavigatie genoemd, doen veel mensen denken aan het sprookje van Hans en Grietje. Zij lieten broodkruimels achter in het bos om zo de weg terug naar huis te kunnen vinden. In het bos kun je immers eenvoudig verdwalen! In dit artikel ga ik je echter uitleggen waarom het gevaarlijk is de vergelijking met dit sprookje serieus te nemen. Ik neem hierbij een project als uitgangspunt, een website die ik heb gemaakt voor een meubelbedrijf.
Wat zijn breadcrumbs?
Volgens WikiPedia is broodkruimelnavigatie:
een manier om een bezoeker van een webpagina duidelijk te maken waar hij zich precies bevindt op een hiërarchisch ingedeelde website.
Een voorbeeld van een hiërarchisch ingedeelde website is Bol.com. Als we de pagina “Hobby & Creatief” bezoeken blijkt dit in alle opzichten een subpagina te zijn van de categorie “Speelgoed”. In de hoofdnavigatie moet je immers eerst klikken klikken op “Speelgoed” en kun je pas daarna doorklikken naar “Hobby & Creatief”. Deze hiërarchie is ook zichtbaar in de URL: http://www.bol.com/nl/m/speelgoed/hobby-en-creatief/N/10505/index.html. Kom je nu rechtstreeks op de pagina “Hobby & Creatief” terecht, bijvoorbeeld omdat je deze pagina via Google bezoekt, dan helpt de breadcrumb trail van Bol.com jou om te bepalen waar je je precies bevindt op de website van Bol.com. 
In de breadcrumb trail kun je bovendien eenvoudig klikken op de bovenliggende pagina “Speelgoed” of de hoofdpagina “Home”. Google zegt hierover in de Beginnershandleiding voor zoekmachineoptimalisatie (SEO):
Garandeer een groter gemak voor gebruikers door het gebruik van broodkruimel-links. Een broodkruimel-pad is een rij interne links die boven of onder aan de pagina wordt weergegeven. Hierdoor kunnen gebruikers snel terugkeren naar een eerder gedeelte of naar de startpagina. In de meeste broodkruimel-paden wordt de meest algemene pagina (vaak de startpagina) aan de linkerkant weergegeven en worden de specifiekere siteonderdelen rechts hiervan weergegeven.
Jakob Nielsen schreef in 2007 dat hij al vanaf 1995 adviseerde om breadcrumbs te integreren op een website om de volgende redenen:
- Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
- Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
- Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
- Breadcrumbs take up very little space on the page.
Breadcrumbs en SEO
Breadcrumbs en SEO gaan hand in hand. Naast het gemak voor de bezoeker om eenvoudig te navigeren naar hoger gelegen pagina’s in de website structuur, zijn breadcrumbs ook belangrijk als je je website wilt optimaliseren voor de zoekmachines. In de Beginnershandleiding voor zoekmachineoptimalisatie (SEO) zegt Google het volgende:
Navigatie is heel erg belangrijk voor zoekmachines. De navigatie van een website helpt gebruikers snel de inhoud te vinden die ze zoeken. Ook zoekmachines hebben hierdoor meer inzicht in welke inhoud de webmaster belangrijk vindt. Hoewel de zoekresultaten van Google op paginaniveau worden geleverd, wil Google ook graag weten welke rol een pagina speelt in het grotere geheel van de site.
Hoewel breadcrumbs slechts een kleine ruimte innemen op de website, hebben deze een grote rol gespeeld in het verbeteren van de zoekresultaten van Google. Met dank aan breadcrumbs is Google in 2009 begonnen met het tonen van sitehiërarchie in de zoekresultaten in plaats van de soms weinig informatieve URL’s.
Voordat ik een voorbeeld geef hoe dit er dan uitziet in de zoekresultaten, wil ik benadrukken dat er natuurlijk ook URL’s zijn die de sitestructuur op een goede manier laten zien, en dus wel informatief zijn. Weet je de URL van Bol.com nog: http://www.bol.com/nl/m/speelgoed/hobby-en-creatief/10505/index.html. Deze URL laat zien dat de pagina ‘”Hobby & Creatief” zich bevindt onder de pagina “Speelgoed” op de “Bol.com” website. Dit kan belangrijke informatie zijn als iemand besluit gaat nemen om wel of niet te klikken op dit zoekresultaat.
Hoewel de URL van Bol.com informatief is, is deze toch niet helemaal gebruiksvriendelijk. Wederom legt de Beginnershandleiding voor zoekmachineoptimalisatie (SEO) uit waarom. Zelfs grote websites als Bol.com kunnen dus nog wat leren!
Sta toe dat mogelijk een deel van de URL verwijderd wordt. Bedenk wat er gebeurt als een gebruiker een deel van uw URL verwijdert – sommige gebruikers navigeren op ongebruikelijke manieren op uw site en het is belangrijk dat u hierop inspeelt. Een gebruiker kan bijvoorbeeld in plaats van de broodkruimellinks op een pagina te gebruiken, een gedeelte van de URL verwijderen in de hoop meer algemene inhoud te vinden. Hij of zij kan bijvoorbeeld naar ‘http://www.brandonsbaseballcards.com/nieuws/2010/ruilbeurzen-voor-honkbalplaatjes.htm’ gaan, maar vervolgens ‘http://brandonsbaseballcards.com/nieuws/2010/’ in de adresbalk van de browser opgeven in de veronderstelling dat al het nieuws uit 2010 dan wordt weergegeven. Kan uw site in dat geval inhoud weergeven, of wordt er een 404-foutmelding weergegeven (‘pagina niet gevonden’)? En nog een directoryniveau hoger, op ‘http://www.brandonsbaseballcards.com/nieuws/’?
Nu dan een voorbeeld van een weinig informatieve URL. 
De URL zichtbaar op deze afbeelding is kort en weinig informatief. In 2009 is Google gestopt met het tonen van deze korte URL. In plaats daarvan toont het nu de sitehiërarchie. 
Nu zie je dat de ProductWiki site informatie heeft over veel verschillende producten, georganiseerd in verschillende categorieën. Bovendien weet je nu dat de “Spidersapien” speelgoed is, en wel een robot. Ook kun je nu klikken op “Toys & Games” en “Robots” zodat je vanuit dit zoekresultaat in Google direct naar pagina’s kunt navigeren die een breder aanbod tonen dan alleen de pagina over de “Spidersapien”. Het hoofddomein “www.productwiki.com” blijft altijd zichtbaar. Zo weet je altijd welke website je gaat bezoeken.
Mocht het nog niet duidelijk zijn, breadcrumbs zijn de reden dat Google de zoekresultaten op deze manier heeft kunnen verbeteren:
The information in these new hierarchies come from analyzing destination web pages. For example, if you visit the ProductWiki Spidersapien page, you’ll see a series of similar links at the top, “Home> Toys & Games> Robots.” These are standard navigational tools used throughout the web called “breadcrumbs,” which webmasters frequently show on their sites to help users navigate. By analyzing site breadcrumbs, we’ve been able to improve the search snippet for a small percentage of search results, and we hope to expand in the future.
Als Google meer of betere informatie toont in een zoekresultaat ten opzicht van de standaard resultaten noemen we die informatie “Rich snippets”. Vanaf 2010 werd het mogelijk om als website eigenaar Google actief te informeren over de sitehiërarchie van je website:
We are now adding support for a Breadcrumbs markup format that allows webmasters to explicitly identify the breadcrumb hierarchy on their pages.
Dit maakte het een stuk eenvoudiger om net als in bovenstaand voorbeeld de sitehiërarchie in de zoekresultaten te tonen in plaats van de URL. Informeer je Google niet actief en vertrouw je blindelings op Google, dan kan het misgaan. Zie hieronder een voorbeeld van Bol.com. 
Bol.com heeft wel breadcrumbs op de website, maar informeert Google hier niet actief over. Het is zeer ongebruikelijk dat er nu “Home” in de sitehiërachie staat. Volgens dit zoekresultaat zou “www.bol.com” de bovenliggende pagina van “Home” zijn, terwijl het natuurlijk aan elkaar gelijk staat. Weer een punt wat Bol.com kan verbeteren.
De klantcasus
Bij de ontwikkeling van de website voor het meubelbedrijf had ik mij voorgenomen om breadcrumbs op de website te integreren. Het is handig voor de bezoeker en goed voor SEO. Ik liep echter snel tegen een probleem aan bij het opzetten van de sitestructuur. Zoals je in onderstaande sitemap kunt zien kon ik één en dezelfde pagina over steigerhouten tafels plaatsen onder een drietal bovenliggende pagina’s.
Dit vormt een probleem. Een bovenliggende pagina (ouder) kan wel meer onderliggende pagina’s (kinderen) hebben, maar vice versa is niet mogelijk. En in werkelijkheid is de structuur van de website nog complexer. Ik kwam er dus snel achter dat een hiërarchie alleen goed werkt als een pagina maar één ouder heeft. Er bleef er maar één optie over, géén hiërarchie. Dit betekent dus dat er geen URL’s zullen zijn die de sitehiërarchie goed weergeven, maar dat een breadcrumb die de sitehiërachie weergeeft dus ook niet mogelijk is.
Uiteraard zullen we het de bezoeker wel mogelijk maken om via alle bovenliggende pagina’s dezelfde pagina over steigerhouten tafels te bezoeken. Een bezoeker kan dus via een link op de pagina Tafels, Steigerhouten meubels en Landelijke meubels op één en dezelfde pagina terechtkomen. Omdat dit echter geen echte bovenliggende pagina’s zijn zoals in een normale sitehiërarchie, vroeg ik me af of een breadcrumb niet gewoon hoort weer te geven hoe iemand op de pagina steigerhouten tafels is terecht gekomen. De broodkruimels van Hans & Grietje waren toch ook van belang om de weg terug te vinden?
Matt Cutts van Google lijkt dit met mij eens te zijn. In onderstaande video waar hij meer uitlegt over het canonical element, zegt hij op 7:23 over breadcrumbs:
Finally there is breadcrumbs, so breadcrumbs are: how do I get to this page, am I coming to this red tent example via tents, or am I coming to it via color, or did I come to it because I was interested in accesoiries, how did I land on this page.
Toch zie ik in deze methode ook problemen. Als de breadcrumb elke pagina weer moet geven die de bezoeker bekijkt, dan krijgen we enorm lange breadcrumbs. Bovendien begint ook niet elke bezoeker vanaf de homepage te navigeren naar dieperliggende pagina’s. Welke breadcrumb moet je tonen als iemand direct een dieperliggende pagina bezoekt, bijvoorbeeld via Google, Twitter of Facebook? Daarom ben ik op verder onderzoek uitgegaan en vertel ik je hieronder graag verder over de problematiek van breadcrumbs.
De problematiek van breadcrumbs
Ook Michael Smethurst denkt gelukkig na over de problematiek van breadcrumbs. We gaan dan ook de twee smaken breadcrumbs verder analyseren:
- path based trails show the path the user has navigated through to arrive at the current page
- location based trails show where the page is located in the ‘website hierarchy’
In de klantcasus is duidelijk geworden dat ik problemen voorzie met zowel hiërarchische breadcrumbs als spoorvolgende breadcrumbs. Als je echter verder leest blijkt dat beide varianten problematisch zijn!
Spoorvolgende breadcrumbs
Een spoorvolgende breadcrumb is voor iedereen persoonlijk. Het pad met broodkruimels van Hans en Grietje is immers gelijk aan de route die zij hebben gelopen. Als Alice en Bob het bos in waren gegaan, is de kans erg klein dat zij exact dezelfde route zouden lopen.
Wat is er mis met websites die laten zien welke pagina’s je hebt doorlopen om de huidige pagina te bereiken? Klik op de voorgaande link voor het technische aspect. Waar het simpel gezegd op neerkomt is dat als iemand een pagina opvraagt op het web je een verzoek naar een server stuur met de boodschap ’toon mij deze pagina’. De server weet echter helemaal niks over de verzoeker!
HTTP does not know who you are, does not know ‘where’ you are, does not care where you’ve come from.
Iedereen met een PC en een internetverbinding krijgt dus dezelfde pagina te zien. Dit geldt ook voor de bots van zoekmachines. De bots zien exact hetzelfde als elke andere gebruiker.
Put simply, anybody with a PC and a web connection can request a page on the web and they’ll get the same content; regardless of geographic location, accessibility requirements, gender, ethnic background, relative poverty and all other external factors. And it’s the statelessness of HTTP that allows search bots to crawl (and index) pages just like any other user.
Omdat de server niks weet over de verzoeker, is het dus niet mogelijk om spoorvolgende breadcrumbs te tonen. Iedereen, waaronder de bots van zoekmachines, krijgen immers exact dezelfde pagina te zien. De server weet niet welk pad je op de website hebt afgelegd om op de huidige pagina te komen. Dit is simpelweg hoe het internet werkt.
Wil je tegen dit basisprincipe van het internet ingaan? Met behulp van ‘cookies’ kun je dynamisch spoorvolgende breadcrumbs genereren die voor elke bezoeker persoonlijk zijn. Maar deze zijn dus per definitie niet zichtbaar voor andere gebruikers. Een bot van een zoekmachine, wat niet meer is dan een ‘domme gebruiker’, heeft dus niets aan deze dynamisch gegenereerde spoorvolgende breadcrumbs.
Any effort you put into creating links through user specific path based breadcrumbs will not be seen or followed by Google et al so will accrue no extra SEO juice and won’t make your content any more findable by other users.
Bovendien kun je in browsers eenvoudig via de knop ‘Vorige’ terug gaan naar de pagina’s die je voor de huidige pagina hebt bezocht. Er wordt dan ook terecht opgemerkt dat spoorvolgende breadcrumbs alleen maar zorgen voor een functionaliteit die al is ingebouwd in browsers.
And that code will just replicate functionality already built into the browser: the back button and browser history.
In de casus heb ik mijzelf terecht de vraag gesteld hoe spoorvolgende breadcrumbs moeten functioneren als de bezoeker bijvoorbeeld vanuit Google op een pagina komt. De tijd dat iemand in de adresbalk een domeinnaam intypt en vanaf de homepage begint te navigeren naar andere pagina’s op de website ligt immers ver achter ons. Als ik je daar niet voldoende van kan overtuigen dan kan ik je het boek ‘Marketing in the Age of Google’ van harte aanbevelen. En ook Michael Smethurst geeft deelt deze mening. Naast het feit dat een bezoeker uit Google kan komen bestaat er natuurlijk ook nog Twitter, Facebook en RSS-feeds die linken naar specifieke pagina’s in plaats van de homepage. Spoorvolgende breadcrumbs kunnen op zo’n moment dus niet getoond worden en zijn dus niet bruikbaar. Het gaat er dus niet om hoe je op een pagina terecht bent gekomen.
Hiërarchische breadcrumbs
Nu we weten dat het er niet om gaat hoe je op een pagina terecht bent gekomen, mogen we concluderen dat breadcrumbs het meest waardevol zijn als ze de sitehiërarchie aan de bezoeker tonen. Als een bezoeker op welke manier dan ook op een dieperliggende pagina terecht komt, ziet deze meteen waar de pagina zich bevindt ten opzichte van bovenliggende pagina’s. Het probleem dat hierin schuilt is dat een dieperliggende pagina (kind) maar één bovenliggende pagina (ouder) kan hebben. Dit werkt misschien goed voor simpele websites, maar niet voor een complexe website zoals in de klantcasus is beschreven. Voor simpele websites navigeer je als het ware door een website zoals je dat ook doet in de folders op je computer. Een bestand kan dan slechts op één locatie staan. Zie hier een opzet voor een simpele website uit de Beginnershandleiding voor zoekmachineoptimalisatie (SEO).
De URL kun je eenvoudig afleiden uit de folderstructuur en weerspiegelt daarmee de sitehiërarchie. De hiërarchische breadcrumbs hebben hier een prima functie omdat deze de ‘folderstructuur’ tonen. Dit maakt het een stuk eenvoudiger om naar bovenliggende pagina’s te navigeren. Zoals eerder geconstateerd zijn hiërarchische breadcrumbs net als spoorvolgende breadcrumbs geen oplossing voor complexe websites.
Dan maar geen breadcrumbs…
De oplossing voor complexe websites is wat mij betreft om geen gebruik te maken van breadcrumbs. Ik troost me met de gedachte dat breadcrumbs vooral prettig zijn voor de bezoeker om te weten waar ze zich bevinden op een website, en ze niet zozeer als navigatie veelvuldig gebruikt worden. In plaats van breadcrumbs kun je voor een complexe website dus beter tijd investeren in een manier waarop je bezoeker zo eenvoudig mogelijk alle content kan vinden, en daar zijn natuurlijk genoeg mogelijkheden voor.
Een voorbeeld waar een folderstructuur vaak niet voldoet zijn blogposts. Standaard kun je hier in WordPress categorieën voor aanmaken. Als je een blogpost plaats in twee categorieën, bijvoorbeeld ‘Webdesign’ en ‘Webdevelopment’, is dat helemaal geen probleem. Het blogbericht krijgt een unieke URL, namelijk http://domeinnaam.nl/naam-blogbericht/. Vervolgens is het met WordPress heel eenvoudig om overzicht pagina’s (ook wel archiefpagina’s genoemd) te genereren van bijvoorbeeld de laatste 10 blogposts in de categorieën ‘Webdesign’ en ‘Webdevelopment’. In beide overzichtpagina’s zal dus een link aanwezig zijn naar dezelfde blogpost. Zo is het dus voor de bezoeker zeer eenvoudig om je content te vinden, via beide overzicht pagina’s. Op de pagina van het blogbericht zelf zou je kunnen vermelden dat het in twee categorieën geplaatst is. Uit de URL kun je dat immers niet meer herleiden, omdat dit alleen mogelijk is als je een hiërarchische website hebt. Als je op deze manier je content toegankelijk en makkelijk vindbaar maakt voor je bezoekers maak je gebruik van taxonomieën. Voor webwinkels wordt bijvoorbeeld veelvuldig gebruikt gemaakt van filters. Daar dit een artikel is over breadcrumbs, en niet over sitenavigatie, laten we verdere bespreking van taxonomieën, filters en andere mogelijkheden hier achterwege.
Breadcrumbs in WordPress
Heb je besloten dat breadcrumbs wel voor jou kunnen werken in WordPress, dan kun je deze in je WordPress website implementeren door gebruik te maken van de plugin WordPress SEO.
In de “The Definitive Guide To Higher Rankings For WordPress Sites” van Yoast vertelt hij meer over breadcrumbs, al is het zeer beperkt. Zoals we net besproken hadden kan een blogbericht in meerdere categorieën geplaatst worden, en wordt een breadcrumb dus praktisch onmogelijk. Opvallend is dat Yoast hier een oplossing voor heeft gevonden:
If the post is in multiple categories it should pick one. For that to work, adapt single.php and page.php in your theme, and use the breadcrumbs from my WordPress SEO plugin. You find the settings for the breadcrumbs in the SEO → Internal Links settings page.
Eerder hebben we aangegeven dat we Google zelf kunnen informeren over de sitehiërarchie van je website. Dit doe je met behulp van structured data, informatie die je aan de html van de breadcrumbs toevoegd. Dit hoef je niet zelf te doen, want Yoast heeft dit reeds geïmplementeerd in zijn plugin.
Voor de fanatiekelingen onder ons is het echter opgevallen dat Yoast hierbij niet gebruikt maakt van structured data met behulp van schema.org, maar nog op basis van rDFA. Collega webdeveloper Felix Arntz had dit ook aangekaart via de Github pagina van WordPress SEO, met de bevinding dat breadcrumbs ook op basis van schema.org werken. Via zijn artikel How to modify WP SEO breadcrumbs for schema.org heb ik hem helaas zijn ongelijk moet bewijzen. Zijn breadcrumbs op basis van schema.org werden niet geaccepteerd door de Google testtool voor gestructureerde gegevens, terwijl de breadcrumbs op basis van rDFA wel door Google werden geaccepteerd!
Update 16-04-2015: Op de pagina Breadcrumbs via Google Developers kun je ook daadwerkelijk lezen dat Schema.org voor breadcrumbs nog niet werkt.
De juiste HTML voor breadcrumbs
Wat ik wel ter discussie stel is de HTML die Yoast gebruikt voor zijn breadcrumbs, maar eigenlijk is dat niet terecht omdat de juiste HTML voor breadcrumbs ook continue ter discussie staat bij w3.org, die het gebruik van HTML voor Bread crumb navigation toelichten.
Zoals het nu op w3.org staat vermeld heb ik een groot deel aan bijgedragen in de discussie, die overigens voor iedereen open staat.
Mijn bemoeienissen vind je via onderstaande links.
- http://lists.w3.org/Archives/Public/public-html/2013Sep/0260.html
- Bug 22739 – modify advice on marking up breadcrumb navigation
Vooralsnog lijkt Joost geen gehoor te geven aan mijn verzoek om ook juiste HTML voor zijn breadcrumbs te gebruiken, zie mijn ticket HTML5 markup for breadcrumbs.
Geef een reactie