Serg DianovBreadcrumbs (een kruimelpad) laat mensen op je pagina’s zien waar ze zich op jouw website bevinden, en biedt een makkelijke manier om terug naar de bovenliggende pagina te gaan. Ook Google houdt ervan als je breadcrumbs gebruikt. Wij vertellen je over drie soorten breadcrumbs, de SEO voordelen van breadcrumbs en best practices voor UX en mobiel.
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.
Inhoud
De positie van breadcrumbs op de pagina is schijnbaar duidelijk. Al jaren tonen ze hun waarde voor SEO. Maar nu is Google overgestapt op mobile-first indexatie. Wat we nu vaak zien is dat veel websites een onjuiste breadcrumbs indeling hebben (en in sommige gevallen helemaal geen kruimelpad…).
Breadcrumbs moet je niet onderschatten. Ze zijn (nog steeds) gunstig voor SEO en de gebruiksvriendelijkheid van je website, wanneer ze optimaal worden geïmplementeerd voor mobiele apparaten.
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.
Breadcrumbs zijn een kruimelpad-regel met contextuele links die aangeven waar de gebruiker zich op een website bevindt. Ze zijn een vorm van secundaire navigatie, waarmee gebruikers hun pad in de sitehiërarchie kunnen volgen.
Niet alle websites hebben per se baat bij een kruimelpad. Breadcrumbs zijn zijn niet nodig voor sites die:
- reeds veel genestelde navigatieniveaus bevatten;
- een logische hiërarchie of groepering hebben;
- of puur zijn ontworpen voor een lineaire gebruikservaring.
Voor dergelijke websites met platte structuren waar veel van de inhoud op een logische manier op hetzelfde niveau zit, zouden breadcrumbs weinig waarde bieden. Voor een kruimelpad dien je immers meer dan twee niveaus te hebben, zodat je niet verdwaalt.
Dit kan zelfs gelden voor grote websites. Een bedrijfsnieuwssite kan bijvoorbeeld veel onderwerpen en duizenden artikelen bieden, maar heeft niet meerdere navigatieniveaus nodig.
Anderzijds zijn voor sites, die gebaseerd zijn op complexe hiërarchische structuren, breadcrumbs essentieel. Het klassieke voorbeeld is e-commerce.
De vraag is hoe je broodkruimels écht zinvol kunt inzetten voor zowel gebruikers als Google. Dit is een kunst op zich.
De meeste UX-experts zijn het erover eens: er bestaan drie verschillende soorten kruimelpaden:
- Op pad gebaseerde (ook bekend als op geschiedenis gebaseerde) breadcrumbs
- Op kenmerk gebaseerde breadcrumbs
- Op hiërarchie gebaseerde breadcrumbs, ook wel locatiegebaseerd
Voor SEO zou er maar één moeten zijn: hiërarchische breadcrumbs. Dit is waarom.
Breadcrumbs, die op paden zijn gebaseerd, geven de unieke stappen van een gebruiker weer die naar zijn/haar huidige pagina leiden.
Het weergeven van het eerdere klikpad van een gebruiker is zowel voor SEO als usability niet de beste breadcrumbs keuze, omdat:
- het repliceert de functie van de terug-knop van de browser;
- het is van weinig nut voor gebruikers die op een zeer diepliggende terechtkomen;
- het kruimelpad is vaak lang, repetitief en vaak verwarrend
- aangezien breadcrumbs dynamisch en uniek zijn voor elke sessie, zal Google de interne links niet verwerken.
Breadcrumbs dienen een hiërarchie weer te geven, geen historie.
Op kenmerk gebaseerde breadcrumbs worden aanbevolen wanneer de content op één bepaalde pagina onder meerdere categorieën en/of kenmerken behoort. Voorbeeldje: een jas kan bijvoorbeeld blauw zijn van kleur, een zomer- of winterjas of bijvoorbeeld voor dames of heren.
Er is geen logische hiërarchie voor deze kenmerken. Het is dus de vraag in welke volgorde de breadcrumbs moeten worden weergegeven. Het kruimelpad in het voorbeeld van de kledingwebshop zou er als volgt uit kunnen zien:
Webshop home > Jassen > Heren > Blauw > Zomerjas
of bijvoorbeeld
Webshop home > Heren > Jassen > Zomerjas > Blauw
Je zou het primaire pad aan kunnen wijzen op basis van attribuutgebruik of zoekvolumevolume. Of de breadcrumbs personaliseren, zodat het het individuele pad van elke gebruiker binnen de sitehiërarchie weerspiegelt. Beiden zijn niet de ideale oplossing.
In dit geval zou je überhaupt de gedachte omtrent breadcrumbs opzij moeten zetten. Je kunt beter de attributen vertonen in een formaat dat geschikt is voor als filteropties:
Dan nu de hiërarchie-gebaseerde breadcrumbsvariant. Deze visualiseert de diepte van de sitestructuur, beginnend met de breedste categorie op het hoogste niveau en verder naar beneden door meer specifieke subcategorieën, uiteindelijk uitkomend bij de huidige pagina.
Home > Overkoepelende categorie > Parent categorie > Child categorie > Huidige content
Hiërarchische breadcrumbs zijn de meest gebruikte, meest intuïtieve en de meest krachtige voor SEO. Dit het enige type breadcrumbs waar we in dit artikel verder op ingaan.
Breadcrumbs (kruimelpaden) zijn een essentieel element om jouw websitebezoekers te ondersteunen: de gebruiker oriënteren, door met één klik toegang bieden tot relevante pagina’s op een hoger niveau. Dit is vooral belangrijk wanneer een bezoeker op een pagina diep in de websitehiërarchie terechtkomt.
Maar naast usability hebben breadcrumbs een ander groot voordeel, op het gebied van zoekmachine-optimalisatie. Breadcrumbs ondersteunen elke stap van het SEO-proces.
A. Frequentere crawls
De interne links die door de broodkruimels worden gegenereerd, helpen om alle niveaus van de hiërarchie bloot te stellen aan crawlers van Google (en andere zoekmachines). Dit is vooral belangrijk voor lagere niveaus, die zonder dergelijke signalen mogelijk niet worden bereikt. Óf wanneer ze worden bereikt, niet voldoende hoge prioriteit krijgen in de crawl-wachtrij van Google.
De voordelen kunnen worden gemeten door een vermindering van “ontdekt – momenteel niet geïndexeerd”-uitsluitingen in Google Search Console en een verhoogde crawlfrequentie.
B. Betere Google indexering
Hiërarchische links helpen Google om content van je site te contextualiseren en pagina’s correct te associëren in de sitestructuur. Als Google alleen URL’s ziet via een sitemapbestand, is het niet duidelijk genoeg hoe de URL’s aan elkaar gerelateerd zijn.
Dit veroorzaakt problemen wanneer Google probeert te begrijpen hoe relevant een pagina is in de context van de site. Breadcrumb-links helpen hierbij, gezien op entiteiten gerichte indexering steeds zwaarder gaat wegen.
De voordelen kunnen worden gemeten door een toename van geldige URL’s in Google Search Console en een hogere indexeringssnelheid.
C. Hogere rankings, hoger doorklikratio (CTR) en daarmee meer organische sessies
Op het gebied van rankings helpen breadcrumbs op de volgende manieren:
- Ze versterken de interne linkstructuur, de link juice gaat beter stromen tussen thematisch gerelateerde pagina’s.
- Breadcrumbs zijn een natuurlijke manier om belangrijke zoektermen boven de vouw op te nemen. Op zoektermen met een zeer hoge concurrentiegraad heeft dit echter een gering effect.
De voordelen kunnen worden gemeten in een daling van de gemiddelde positie en een stijging van vertoningen in Google Search Console. Een hogere ranking verhoogt het aantal klikken en daarmee logischerwijs de organische sessies op je website.
Schema Breadcrumbs (structured data)
Breadcrumbs die op de pagina worden weergegeven en de code van het breadcrumb-schema zijn aparte zaken. Alleen omdat er een kruimelpad op de site is, betekent niet dat er structured data voor je breadcrumbs bestaat.
De snelste manier om erachter te komen of je site geldige opmaak voor breadcrumb-schema’s heeft, is door het breadcrumbs-rapport in Google Search Console te controleren. Als je fouten ziet, bekijk dan de gestructureerde gegevens van BreadcrumbList.
Voor een optimaal resultaat is het het beste dat beide niet alleen bestaan, maar ook elkaars boodschap over de sitestructuur bevestigen. Dit zal Google verder ondersteunen om je website content te contextualiseren, wat opnieuw leidt tot betere indexering.
Kruimelpad in de SERP, dankzij structured data
Structured data gegevens voor breadcrumbs kunnen ook bijdragen aan organische prestaties door het URL-pad te wijzigen in een breadcrumb-pad in het SERP-fragment. Hoewel Google zelf ook al een broodkruimelpad kan weergeven, zelfs zonder de broodkruimelmarkering.
Let wel: het biedt geen garantie voor de verandering binnen je Google snippet. Houd de wijzigingen dus goed in de gaten. Maar voor de meeste sites is structured data voor breadcrumbs een zogenaamde best practice.
Toen kwam Mobile-First
Breadcrumb-navigatie was altijd al een trouw en consistent interfaceonderdeel. Waarschijnlijk vanwege de relatieve eenvoud ervan. Hiërarchische verbindingen, gescheiden door een soort scheidingsteken. Maar toen kwam mobile-first en werd het iets ingewikkelder. De gebruikelijke best practices moesten worden aangepast voor het kleinere scherm.
De belangrijkste best practices voor mobiele UX vs. broodkruimels zijn:
- Consequent beschikbaar: breadcrumbs dienen op elke relevante pagina aanwezig te zijn. Met relevantie doelen we op een aanzienlijke toevoeging qua navigatie voor de bezoeker.
- Logische plaatsing van breadcrumbs: plaats je breadcrumbs direct onder het primaire navigatiemenu en boven de H1. Dit is waar gebruikers ze verwachten. Lager op de pagina is onlogisch voor je bezoeker; tevens vermindert het de interne linkkracht.
- Duidelijk begin en einde: broodkruimels zouden de customer journey vanaf de homepage naar de huidige pagina moeten laten zien. De startpagina fungeert als een anker dat de gebruikers een sterk gevoel van oriëntatie geeft. Het laatste item weergeven als niet-klikbaar en als zodanig visueel onderscheidend element bevestigt de gebruiker op welke pagina hij/zij zich momenteel bevindt.
- Symbolisch scheidingsteken: Het optimale scheidingsteken voor het scheiden van hyperlinks in kruimelpaden blijft het ‘groter dan’-symbool (>) omdat het beknopt is en de relatie tussen pagina’s aangeeft. Andere opties zoals schuine strepen (/) of pijpen (|) duiden geen hiërarchie aan. Terwijl opties zoals » en -> onnodige ruimte in beslag nemen. Persoonlijk vind ik het “»”-teken visueel chique.
- Precies goed formaat: houd de stijl broodkruimels eenvoudig en onopvallend met een klein lettertype. Wel opvallend om een tikdoel te zijn, in een stijl die consistent is met tekstlinks op de rest van de website. Vervuil de ruimte niet met onnodige teksten als “Je bent hier” of “Navigatie”.
Het is vrij voor de hand liggend, maar veel sites doen dit verkeerd. Zorg dat je breadcrumbs op mobiel in hetzelfde ontwerp zichtbaar zijn als op desktop.
Zoals elk essentieel SEO-element, moeten deze aan de serverzijde worden weergegeven en kunnen worden gecrawld zonder dat JavaScript is ingeschakeld.
Neem het volledige navigatiepad in de hiërarchie op naar de huidige pagina. Koppel al deze pagina’s, behalve het laatste item, om verwarring te voorkomen van een zelfverwijzende link die de pagina opnieuw laadt. Verkort broodkruimels niet door stappen weg te laten of tussenstappen in te korten met “…” of alleen de laatste niveaus op te nemen. Dit doet SEO-kracht teniet.
De vraag wordt dan, hoe alle links zonder breadcrumbs op meerdere regels op mobiel kunnen worden opgenomen. Niet alleen omdat een meerregelig kruimelpad de opbouw van de keten niet goed illustreert. Maar nog belangrijker, omdat het kostbare ruimte op het kleine scherm in beslag neemt.
Om breadcrumbs met één regel te kunnen vertonen op mobiel, wordt er gebruikgemaakt van een overloop. Hierdoor kunnen gebruikers (naar links en rechts) vegen/swipen om het hele pad te zien, wat kan worden verduidelijkt met de toevoeging van een zogenaamde swiper-assistent of horizontale schuifbalk. Het is echter absoluut noodzakelijk dat de overloop wordt geïmplementeerd met CSS om SEO-vriendelijk te blijven.
Denk niet dat je de paginakop in broodkruimels moet spiegelen. Het is leuk om te hebben, maar niet ten koste van lang of repetitief worden. En kort nooit paginatitels af. Kies liever een duidelijke korte benaming.
Als je de breadcrumbs op titel baseert, krijg je mogelijk de volgende breadcrumbs:
Home > Koopobject > Huizen te koop > Huizen te koop in Zuid-Holland > Huizen te koop in Leiden > Huizen met 4 slaapkamers te koop in Leiden
In plaats van beknopt:
Home > Verkoop > Huizen > Zuid-Holland > Leiden > 4 Slaapkamers
Breadcrumbs toevoegen met de WordPress SEO-plugin
Als je de plugin WordPress SEO van Yoast gebruikt, is het heel eenvoudig om breadcrumbs aan je WordPress-website toe te voegen. We raden je ook zeker aan om de plugin van Yoast hiervoor te gebruiken, want Yoast zorgt er niet alleen voor dat je breadcrumbs getoond worden op je website, maar voegt ook een mooie snippet toe waardoor Google je zoekresultaten voorziet van een kruimelpad.
Om de breadcrumbs toe te voegen, ga je in de Yoast-plugin naar Zoekweergave; vervolgens naar het tabje Kruimelpad. Hier kun je het kruimelpad activeren. Vervolgens moet je het volgende stukje code in je thema plakken, op de plek waar je de breadcrumbs wilt laten verschijnen:
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>De ideale plek hiervoor is in het header.php-bestand. Zo zorg je ervoor dat het kruimelpad automatisch op iedere pagina terug komt.
Kruimelpad instellingen binnen de Yoast plugin
Zoals je in de bovenstaande afbeelding ziet, kun je instellen welk scheidingsteken er wordt gebruikt, en welke tekst er gebruikt moet worden voor de Home-pagina. Verder kun je een tekst instellen voor archief-pagina’s, zoekresultaten en 404-pagina’s.
Een andere handige instelling is de taxonomie die je wilt laten zien bij berichten. Wij hebben gekozen voor “Categorie”. Dit zorgt ervoor dat de categorie waarin je bericht is geplaatst ook getoond wordt in het kruimelpad. Dit is ook te zien bovenaan deze pagina. Dit artikel bevindt zich in de categorie “WordPress Tutorials“.
Je kruimelpad opmaken
Je kunt je kruimelpad ook een andere kleur geven, of de lettergrootte aanpassen. Dit doe je met behulp van CSS. De standaard “id” van de breadcrumbs is “breadcrumbs“. Om hier in de CSS-code van je thema een bepaalde opmaak aan te geven, voeg je het volgende stuk code toe aan het CSS-bestand:
#breadcrumbs {
font-size: 12px;
color: #000000;
}Je kunt op deze manier bijvoorbeeld de lettergrootte aanpassen (in het voorbeeld hierboven is dat 12px) of de kleur aanpassen (in het voorbeeld hierboven is dat #000000, zwart). Om een andere kleur te vinden, heb je de kleurcode nodig (zes cijfers). Deze achterhaal je bijvoorbeeld op de website ColorPicker.com.
Breadcrumbs, broodkruimels, kruimelpad… Ze zijn essentieel!
Breadcrumbs zijn een essentieel als secundaire navigatie voor hiërarchisch (relatief) complexe sites. Ze ondersteunen het navigatieproces van de gebruiker en daarmee de UX.
Bovendien stimuleren broodkruimels de SEO (zoekmachine-optimalisatie) door het crawlen te vergemakkelijken, content te contextualiseren voor indexering en interne link juice beter te laten doorstromen. Vergeet niet de vertoning van het kruimelpad op mobiele apparaten. Maak ze passend passend op een enkele regel dankzij CSS-overloop. Zo haal je de volledige kracht uit je breadcrumbs. Succes!
Roger.Overdevest
Reageer