De Voordelen & Nadelen Van Breadcrumbs. En Hoe Je het Effect Meet
In dit artikel ga je alles over breadcrumbs te weten komen. Wat ze zijn, waarvoor ze zijn, de voor- en nadelen, hoe je breadcrumbs op je website kan plaatsen en hoe je het effect van de breadcrumbs kan meten.
Wat zijn breadcrumbs?
Het Nederlandse woord voor breadcrumbs is broodkruimelnavigatie of kruimelpad. Maar zoals bij zoveel SEO begrippen houden we doorgaans het Engelse woord aan, breadcrumbs in dit geval.
Wat breadcrumbs zijn kan het beste duidelijk worden gemaakt met een afbeelding:
In bovenstaande afbeelding zie je een screenshot van laptopshop.nl, met rood zijn de breadcrumbs omcirkeld.
De breadcrumbs geven de hiërarchie van de webshop aan. In dit voorbeeld bevind je je op de Asus Zenbook pagina. In de hiërarchie van de webshop uit dit voorbeeld zit daarboven de Asus pagina, daarboven zit de Laptops pagina. En daar boven zit de homepage van Laptopshop.nl.
Bij iedere website zal de homepage bovenaan in de hiërarchie van de breadcrumbs (moeten) staan.
Breadcrumbs bestaan uit een regel van interne links waarvan de anchor teksten de pagina’s in de hiërarchie in zo min mogelijk woorden (idealiter in 1 woord) beschrijft.
Waarvoor zijn breadcrumbs?
Dankzij de breadcrumbs weet je altijd precies waar in de hiërarchie je je op een website bevindt. De breadcrumbs stellen je in staat om snel (met 1 muisklik) naar een andere laag in de hiërarchie te navigeren.
Bij het voorbeeld van Laptopshop.nl kan je in 1 muisklik naar het overzicht van de Laptops als je andere merken laptops wilt bekijken.
Breadcrumbs zorgen voor een groter gebruikersgemak en zorgen er bovendien voor dat de zoekmachines de interne pagina’s, via de breadcrumbs linkjes, kunnen benaderen.
Voordelen breadcrumbs
Breadcrumbs hebben twee voordelen. Ze maken het je bezoekers gemakkelijker om op je site te navigeren en met breadcrumbs weet je zeker dat de zoekmachines al je pagina’s kunnen vinden en indexeren, ze zorgen voor interne links.
Vanwege het laatste voordeel, de website goed indexeerbaar maken voor zoekmachines, zijn veel website overgestapt op het gebruik van breadcrumbs als onderdeel van de SEO strategie.
Breadcrumbs op je website implementeren, met als enige doel de vindbaarheid van de site verbeteren, is echter niet altijd even handig en ook niet altijd nodig.
Stel je hebt een blog en deze kent maar twee lagen, je homepage en de blog artikelen. In dat geval maak je het voor je bezoekers niet gebruiksvriendelijker door breadcrumbs te implementeren. Als men naar de homepage wil kan men gewoon op de home button klikken.
En als je zorgt voor een sitemap dan kunnen de zoekmachines al je webpagina’s toch wel vinden. In dergelijke gevallen zijn breadcrumbs alleen maar zonde van de ruimte welke ze in beslag nemen in je lay-out.
Een ander voordeel van breadcrumbs is dat het je bezoekers een andere manier van navigeren biedt. Breadcrumbs dienen altijd een aanvulling op het navigeren te zijn, nooit de enige manier van navigeren.
In webshops kan men heel diep verzanden door het maken van verschillende filter selecties. Breadcrumbs geven de gebruiker dan de mogelijkheid om in 1 klik terug te gaan naar ‘het begin’.
Een ander voordeel van breadcrumbs is dat je de bezoekers kan laten zien welke pagina’s er nog meer op de site te vinden zijn. Dit is handig omdat de meeste bezoekers niet via de homepage binnen komen maar op onderliggende pagina’s, wat in de praktijk vaak het geval is.
Stel ik zoek naar een bureaustoel en kom uit op een productpagina van een webshop met bureaustoelen. Aan de breadcrumbs navigatie zou ik kunnen zien dat men nog meer kantoorartikelen verkoopt. Zo vergroot de webshop zijn kansen nog meer artikelen te verkopen.
Nadelen van breadcrumbs
Als je breadcrumbs gebruikt dan laat Google de permalinks van je pagina’s niet meer in de zoekresultaten zien. In plaats daarvan laat Google de hiërarchie van de pagina in haar zoekresultaten zien. Zie onderstaande afbeelding:
Google laat www.laptopshop.nl > Laptops > Asus zien in plaats van de URL: http://www.laptopshop.nl/category/188170/asus-zenbook.html
Mijn ervaring is dat je Click Through Rate (CRT) vanuit Google naar je webpagina wat lager is als je permalinks niet meer zichtbaar zijn.
Voor webshops zijn breadcrumbs eigenlijk een onmisbaar onderdeel van de navigatie, dit vanwege de diepe hiërarchieën welke kunnen ontstaan door het grote productenaanbod. Vandaar dat je ook ziet dat vrijwel iedere webshop gebruik maakt van breadcrumbs, de iets lagere CTR nemen zij voor lief. En als al je concurrenten ook breadcrumbs gebruiken dan vervalt het nadeel van een lagere CTR.
Een ander nadeel van breadcrumbs is dat ze de logische hiërarchie van de website aangeven. Dit hoeft niet perse het pad te zijn welke de bezoeker heeft gevolgd om op een diepliggende pagina te komen. Dit kan bij de bezoeker voor verwarring zorgen.
Los dit nooit op door bezoekers met breadcrumbs het pad, wat gevolgd is, terug te laten volgen. Dit zijn zogenaamde dynamische breadcrumbs welke aan de hand van informatie welke in cookies worden opgeslagen gegeneerd kunnen worden. Iedere gebruiker (inclusief de zoekmachines) zouden dan een eigen kruimelpad moeten krijgen.
Omdat zoekmachines pagina’s random opvragen wordt de hiërarchie van de site nooit duidelijk voor de zoekmachines.
Wil men dezelfde weg terug bewandelen op je website dan zal men simpelweg de back button van de browser moeten gebruiken.
Het implementeren van breadcrumbs
Bij het implementeren van breadcrumbs op je site zijn een aantal zaken belangrijk.
De plaats van de breadcrumbs
Op de eerste plaats heb je te maken met de plaats op je website waar je de breadcrumbs wilt laten zien. Een plaats waar je breadcrumbs in ieder geval nooit laat zien is op de homepage van de website.
Als je breadcrumbs op je website gebruikt dan zal je ze consequent op alle pagina’s moeten gebruiken. Niet op de ene productcategorie wel en op de andere niet.
Het meest gangbare is dat breadcrumbs vrij hoog op de pagina’s vertoond worden. Onder de topbalk waar de primaire navigatie zich bevindt is het meest gangbaar. Aan de linkerzijde van de lay-out en links uitgelijnd.
Hierop zijn nog variaties denkbaar. Een andere logische plaats voor breadcrumbs is direct boven de content (vlak boven de titel) van de pagina.
De breadcrumbs zullen in ieder geval altijd ‘boven de vouw’ moeten zitten zodat ze altijd te vinden zijn zonder dat men naar beneden hoeft te scrollen.
De afmeting van de breadcrumbs
Breadcrumbs zijn een secundaire manier van navigeren, door voor de breadcrumbs een iets wat kleiner lettertype te gebruiken kan dit duidelijk gemaakt worden.
Een wat kleiner lettertype zorgt er tevens voor dat de breadcrumbs op 1 regel passen. Wat zeker bij website met veel lagen – waardoor lange breadcrumbs kunnen ontstaan – aan te bevelen is.
Hou altijd in het achterhoofd dat breadcrumbs als handig navigatie hulpmiddel dienen. Ze moeten voldoende opvallen om gezien te worden maar ze mogen de aandacht van andere zaken (je content, je product of diensten) ook niet afleiden.
Leestekens in breadcrumbs
Tussen de links van de breadcrumbs kan je verschillende leestekens of afbeeldingen gebruiken. Het meest gangbare is het ‘groter dan teken’: >
De breadcrumbs zien er dan als volgt uit:
Home > Laptops > Asus > Asus Zenbook
Ook andere leestekens kunnen gebruikt worden, zoals een – of een |. Persoonlijk geef ik de voorkeur aan > (het groter-dan-teken) omdat dit het beste de hiërarchie duidelijk maakt.
Er kunnen ook kleine afbeeldingen, met bijvoorbeeld een pijl of driehoek, tussen de links geplaatst worden. Dit kan je via de stylesheet van de website doen.
Je bent vrij om afbeeldingen naar smaak tussen de links in de breadcrumbs te gebruiken zolang je maar in je achterhoofd houdt dat het hiërarchie tussen de pagina’s moet duiden.
De bovenste laag is altijd de homepage
De bovenste laag in de hiërarchie van een website is de homepage. Deze zal altijd via de breadcrumbs benaderbaar moeten zijn. Hiervoor kan je het woord Home in de breadcrumbs gebruiken (iedereen weet wat Home betekend) of de naam van de website zoals Laptopshop.nl heeft gedaan.
Door de homepage in de breadcrumbs op te nemen is het voor de gebruiker ook gelijk duidelijk dat het breadcrumbs zijn.
De breadcrumbs moeten aankikbaar zijn
Het spreekt voor zich dat de breadcrumbs moet bestaan uit hyperlinks welke aanklikbaar zijn. Uitzondering hierop is de breadcrumb van de pagina waarop men zich bevindt, de laatste breadcrumb.
WordPress breadcrumb plugins
WordPress is het meeste gebruikte Content Management Systeem en zoals we van WordPress gewend zijn is er overal wel een plugin voor. Er zijn voor WordPress dan ook tal van plugins waarmee je in een handomdraai breadcrumbs op je site kunt implementeren. Hieronder vindt je de meest gebruikte.
De Yoast SEO plugin
De Yoast SEO plugin voor WordPress heb je waarschijnlijk al geïnstalleerd als je je met SEO bezig houdt. Met deze plugin kan je breadcrumbs eenvoudig in en uitschakelen.
Je kan dit doen onder optie ‘geavanceerd’ van de Yoast SEO plugin. Om de breadcrumbs zichtbaar te kunnen maken in je template (Theme) moet je wel een stukje code aan je Theme toevoegen. Op deze pagina staat deze code en uitgelegd hoe dat werkt.
De Yoast SEO plugin geeft je nog allerlei opties welke je kunt instellen. Zo kan je instellen welke separator je in je breadcrumbs wilt gebruiken en welke anchor tekst je voor de homepage wilt (Home of bijvoorbeeld de naam van je website).
De Breadcrumb NavXT plugin
Een andere populaire breadcrumb plugin voor WordPress is Breadcrumb NavXT (meer dan 500.000 installaties en 4.7 van 5 sterren).
De kruimelpaden zijn met deze plugin helemaal naar je eigen hand te zetten.
Het leuke van de plugin is dat unieke classes en ID’s kan geven aan je breadcrumbs, hierdoor zijn je breadcrumbs vorm te geven (via de CSS styling) zoals jij wilt.
Ook om deze plugin te kunnen gebruiken zal je een stukje code aan je Theme moeten toevoegen. Dit kan je eenvoudig doen door je Theme Editor in WordPress te gebruiken. De code plaats je op de plaats waar je wilt dat de breadcrumbs vertoond worden. Dit moet je eenmalig doen.
Om de breadcrumbs te kunnen customizen gebruik je de administratieve interface van de Breadcrumb NavXT plugin.
De Breadcrumb trail plugin
Een laatste breadcrumb plugin welke ik het vermelden nog wel waard vindt is de Breadcrumb trail plugin. Deze plugin ondersteunt schema.org HTML5-valid microdata.
Het kruimelpad wordt gegenereerd aan de hand van je permalink setup. De breadcrumbs welke getoond worden zijn gebaseerd op deze structuur. Het voordeel van deze plugin is dat deze plugin zelfs voor websites met een complexe hiërarchie een kruimelpad weet te genereren.
Ook om de plugin te kunnen gebruiken zal je een stukje code aan je Theme moeten toevoegen.
Verder zijn er nog tig breadcrumb plugins voor WordPress te vinden. Deze drie zijn het meest gebruikt en het hoogst gewaardeerd.
Mijn persoonlijke favoriet is Breadcrumb NavXT vanwege de uitgebreide customize mogelijkheden welke deze plugin biedt.
Breadcrumbs voor andere CMS-en
Naast WordPress zijn Joomla en Drupal Content Management Systemen welke vaak gebruikt worden. Voor Joomla zijn ook breadcrumbs plugins beschikbaar en bij Drupal is het standaard functionaliteit.
Het A/B split testen van breadcrumbs
Als je twijfelt om breadcrumbs op je site te implementeren dan kan je dit eerst gaan testen door middel van een A/B split test.
Bij een A/B split test krijgen verschillende bezoekers een verschillende versie van de website te zien.
Als je het effect van breadcrumbs wilt gaan meten dan kan je de ene bezoeker de website versie laten zien met breadcrumbs, de andere bezoeker de website versie zonder breadcrumbs.
Het belangrijkste wat je wilt weten is de invloed van de breadcrumbs op je conversie.
Je wilt niet alleen weten of de breadcrumbs je conversie verhogen, je wilt ook weten op welke plaats in je site lay-out je de breadcrumbs het beste kan opnemen. Een andere plaats voor de breadcrumbs kan de conversie positief of negatief beïnvloeden. Het kan teveel afleiden als het te prominent geplaatst is of het kan slecht gevonden worden waardoor men afhaakt.
En je wilt weten in hoeverre het ontwerp van de breadcrumbs invloed hebben op je conversie. Zo kan de keuze van het font, de lettergrote, de kleur en de keuze van de separators van invloed zijn op de conversie.
Daarnaast kan je gaan testen wat de breadcrumbs doen met het klik gedrag van je bezoekers. Blijven ze langer op je website (wordt de sessieduur langer?) en gaat je bounce rate omlaag (gaan meer gebruikers meer dan één pagina bezoeken)?
Van de sessieduur en de bounce rate is bekend dat deze van invloed zijn op de ranking van je website. Hoe langer de sessieduur en hoe lager de bounce rate hoe beter dat voor je ranking in Google is. Dit zijn dus belangrijke waarden om te gaan meten.
Voor de commerciële websites zal de conversie het belangrijkste criterium zijn in de beslissing om breadcrumbs wel of niet te gaan implementeren op de website.
Hoeveel dagen moet je A/B testen?
Als je een A/B split test gaat opzetten dan is het belangrijk dat je een betrouwbare meting doet. Voor een betrouwbare meting zullen er voldoende bezoekers op de site geweest moeten zijn.
Aan de hand van het aantal bezoekers welke je website dagelijks heeft kan je hier berekenen hoeveel dagen je de A/B test moet laten lopen.
A/B split test van breadcrumbs in de praktijk
Om een A/B test op te zetten kan je gebruik maken van software tools welke je ondersteunen bij het opzetten van de test en het uitlezen van de vergaarde data.
WordPress plugins
Je site zal 2 verschillende versies aan verschillende gebruikers moeten laten zien. Voor WordPress zijn hier diversen A/B split test plugins voor te installeren.
Google Content Experiments
Om je A/B split test te kunnen meten kan je gebruiken maken van diversen software tools. Een gratis tool is Google Content Experiments.
Google Content Experiments is een onderdeel van Google Analytics voor het opzetten van A/B testen. Omdat het geïntegreerd is met Google Analytics voorziet het je van alle gewenste data om conclusies te kunnen trekken.
Je kan o.a. de conversie met Google Analytics bijhouden, het bounce percentage en de sessieduur. Deze drie zijn belangrijk als je breadcrumbs gaat testen.
Om Google Content Experiments te kunnen gebruiken zal je een stukje code op je site moeten plaatsen. In Google Analytics zal je de doelen moeten definiëren welke je wilt meten.
Je kan met Google Content Experiments 10 experimenten gelijktijdig testen. Het verdient echter de aanbeveling om de A/B test voor de breadcrumbs te beperken tot een versie van de website met en zonder de breadcrumbs. Zo wordt de meting niet beïnvloed door andere variaties op de website.
Als je een A/B splittest voor breadcrumbs gaat doen dan kan je het beste beginnen met een test waarin de breadcrumbs op de meest logische plaats in de lay-out worden vertoond. Dit is tussen de pagina navigatie en de titel van de pagina’s.
Dit kan je het beste testen met de meest gangbare opmaak voor breadcrumbs; een iets kleiner lettertype en het groter-dan-teken als separator.
Als deze test positief uitpakt voor het gebruik van breadcrumbs dan kan je eventueel variaties op de breadcrumbs gaan testen.
Je kan dan bijvoorbeeld het effect op de conversie, het bounce percentage en de sessieduur gaan meten als er van een andere separator of een groter lettertype gebruik wordt gemaakt. Dit is dan het finetunen van je breadcrumbs. Deze variabelen zullen waarschijnlijk slechts een klein effect op je conversie hebben, het is dan ook alleen je investering in tijd waard als je veel bezoekers op je site hebt.