Naar de inhoud

Warren Weckesser

Persoonlijke site

Hoe navigeer je eenvoudig op een website met een goed georganiseerde sitemap?

Een bezoeker komt op een e-commercesite om een assortiment behang te vinden. In het hoofdmenu staan zes categorieën, maar geen enkele sluit aan…

Femme pointant un plan du site hiérarchique affiché sur un écran d'ordinateur dans un bureau moderne
5 min

Een bezoeker komt op een e-commercesite om een assortiment behang te vinden. Het hoofdmenu toont zes categorieën, maar geen daarvan sluit aan bij wat hij zoekt. Hij scrolt, klikt lukraak en verlaat de pagina. Dit probleem is vaak op te lossen met een element dat veel sites zonder erbij na te denken onderaan de pagina plaatsen: de sitemap.

Een goed georganiseerde sitemap doet meer dan alleen links opsommen. Hij biedt een overzicht van de sitestructuur, helpt bezoekers binnen enkele seconden een pagina te vinden en compenseert de beperkingen van een hoofdmenu waarin niet alles past.

HTML-sitemap en XML-sitemap: twee bestanden met verschillende functies

De sitemap die zichtbaar is voor bezoekers (een HTML-pagina met klikbare links) wordt vaak verward met de XML-sitemap voor zoekmachines. Ze hebben dezelfde naam, maar vervullen verschillende functies.

De HTML-sitemap is bedoeld voor mensen. Hij toont de sitestructuur in de vorm van een hiërarchische lijst en is bereikbaar via de footer of een link in het menu. Een bezoeker die de weg kwijt is, vindt er de gezochte pagina terug zonder de zoekbalk te hoeven gebruiken.

De XML-sitemap is een technisch bestand dat wordt gelezen door de crawlers van Google of Bing. Hij geeft aan welke URL’s moeten worden gecrawld, wanneer ze voor het laatst zijn gewijzigd en wat hun relatieve prioriteit is. Google vermeldt in zijn documentatie overigens dat een XML-sitemap helpt om pagina’s te ontdekken, maar niet garandeert dat ze worden geïndexeerd.

Op een website over interieurdecoratie bijvoorbeeld brengt de sitemap van Côté Déco alle rubrieken op één plek samen. Zo hoeft de bezoeker niet op goed geluk door de menucategorieën te navigeren.

Een overzichtelijke sitestructuur: de niveaus van de sitemap indelen

Man analyseert een op een whiteboard getekende websitestructuur in een gedeeld kantoor

Een sitemap met tweehonderd links op één niveau, zonder groepering, zorgt net zo goed voor verwarring als helemaal geen sitemap. De waarde van een sitemap zit in de visuele hiërarchie.

Groepeer op basis van gebruik, niet van de interne organisatie

Een veelgemaakte fout is om de structuur van de backoffice over te nemen: technische mappen, administratieve categorieën en interne codenamen. Bezoekers denken anders. Ze zoeken op basis van hun behoefte (kopen, vergelijken, contact opnemen) of op thema (woonkamer, slaapkamer, buitenruimte).

Een effectieve sitemap groepeert pagina’s op basis van deze gebruiksscenario’s. De hiërarchische niveaus sluiten aan bij de keuzes van de bezoeker:

  • Eerste niveau: de hoofdrubrieken van de site (catalogus, gidsen, contact, juridische informatie)
  • Tweede niveau: subcategorieën die elke rubriek verder uitsplitsen (behang, verlichting, meubels voor een decoratiecatalogus)
  • Derde niveau, indien nodig: specifieke pagina’s die bij elke subcategorie horen

Meer dan drie niveaus gaat ten koste van de overzichtelijkheid. Als de sitestructuur een vierde niveau vereist, is dat vaak een teken dat de structuur van de site zelf vereenvoudigd moet worden.

Linkteksten: duidelijkheid boven creativiteit

Elke link in de sitemap moet de inhoud van de pagina duidelijk beschrijven. “Onze oplossingen” of “Meer informatie” zegt de bezoeker niets. “Vinylbehang voor de badkamer” vertelt precies wat hij na het klikken kan verwachten.

Deze regel sluit aan bij een aanbeveling van het W3C: navigatielabels moeten consistent zijn in het menu, het kruimelpad en de sitemap. Als dezelfde link op verschillende plekken op de site telkens een andere naam heeft, raken gebruikers in de war.

Toegankelijkheid van de sitemap: toetsenbord, mobiel en visuele herkenningspunten

Een sitemap die op een groot scherm goed leesbaar is, kan op een telefoon onbruikbaar worden als de links te dicht op elkaar staan of als de hiërarchie niet meer zichtbaar is doordat visuele inspringingen ontbreken. Het W3C adviseert dat de weergave zich aanpast aan kleine schermen en tegelijkertijd de informatiestructuur behoudt.

Twee punten verdienen bijzondere aandacht:

  • Toetsenbordnavigatie: elke link in de sitemap moet bereikbaar zijn met de Tab-toets, in een logische volgorde (van boven naar beneden, van links naar rechts). De actieve focus, oftewel de link die op dat moment is geselecteerd, moet visueel herkenbaar zijn (bijvoorbeeld met een rand of kleurverandering)
  • Contrast en grootte van klikbare elementen: op mobiel leidt een te kleine link of een link die te dicht bij een andere staat tot onbedoelde klikken. Door voldoende ruimte tussen de lijstitems te laten en een groot genoeg lettertype te gebruiken, voorkom je dit probleem
  • Herkenningspunten voor rubrieken: koppen of tussenkoppen in de sitemap (en niet alleen lijsten) helpen gebruikers van schermlezers rechtstreeks naar de relevante categorie te springen

Jonge vrouw bekijkt een HTML-sitemap op haar laptop in een Scandinavische woonkamer

Vaak wordt vergeten dat de sitemap ook een toegankelijkheidstool is. Voor bezoekers die een schermlezer gebruiken of uitsluitend met het toetsenbord navigeren, is deze pagina soms de betrouwbaarste manier om specifieke inhoud te bereiken.

Sitemap en algemene navigatie: aanvulling, geen vervanging

De sitemap vervangt noch het hoofdmenu, noch de zoekbalk, noch het kruimelpad. Het W3C benadrukt dit punt: meerdere navigatiemogelijkheden aanbieden verkleint de kans dat een bezoeker vastloopt.

Het hoofdmenu biedt snelle toegang tot de belangrijkste rubrieken. Het kruimelpad toont de huidige positie in de sitestructuur. De zoekbalk helpt bij specifieke zoekopdrachten. De sitemap komt van pas wanneer deze drie mechanismen niet volstaan: voor bezoekers die zonder duidelijk doel rondkijken, voor pagina’s die op het derde niveau verborgen zitten of voor menu’s die slechts een deel van de catalogus tonen.

Op grote sites (met honderden pagina’s) fungeert de sitemap als vangnet. Hij toont de volledige sitestructuur, terwijl het menu maar een deel ervan kan laten zien. Voor kleinere sites volstaan een twintigtal goed georganiseerde links om alle pagina’s te omvatten.

De link naar de sitemap staat meestal in de footer, waar webgebruikers verwachten hem te vinden. Sommige sites plaatsen hem ook op een helppagina of in het secundaire menu. Zo wordt hij beter zichtbaar zonder de hoofdnavigatie te overladen.

De sitemap actueel houden is de meest onderschatte uitdaging. Elke nieuwe pagina, gewijzigde URL of verwijderde pagina moet ook in de sitemap worden verwerkt. Een kapotte link in een sitemap geeft zowel bezoekers als zoekmachines een negatief signaal. CMS’en zoals WordPress bieden plug-ins die deze pagina automatisch genereren, maar periodieke handmatige controles blijven noodzakelijk om inconsistenties op te sporen die de automatisering niet detecteert.

Hoe navigeer je eenvoudig op een website met een goed georganiseerde sitemap?