Naar de inhoud

o2mer.net

Blog

Hoe navigeer je eenvoudig op een website met een complete sitemap?

Een sitemap is een pagina met een overzicht van alle of de meeste pagina’s die via klikbare links toegankelijk zijn op een…

Femme étudiant un plan de site imprimé à son bureau pour mieux naviguer sur un site web
5 min

Een sitemap is een pagina met klikbare links naar alle of de meeste pagina’s die op een website beschikbaar zijn. De pagina geeft de hiërarchie van de rubrieken en subrubrieken van de site weer en biedt zo een overzicht dat noch het hoofdmenu, noch de zoekbalk op zichzelf kan geven. Voor bezoekers die niet binnen twee klikken vinden wat ze zoeken, is deze pagina een directe snelkoppeling naar de gewenste inhoud.

Toegankelijkheid met het toetsenbord en de sitemap: een vaak vergeten technische vereiste

De meeste gidsen over sitemaps richten zich op SEO of de visuele structuur. Maar voordat we het over navigatie hebben, moeten we controleren of de sitemap voor alle gebruikers werkt, ook voor mensen die zonder muis navigeren.

Het W3C benadrukt dat interactieve elementen met het toetsenbord toegankelijk moeten zijn en dat de focus zichtbaar moet blijven. Voor een sitemap met soms honderden links betekent dit dat elke link met de Tab-toets bereikbaar moet zijn en dat gebruikers op elk moment duidelijk moeten kunnen zien welke link geselecteerd is.

Een sitemap waarvan de links geen zichtbare focusstijl hebben (de CSS-outline is verwijderd of de kleur is hetzelfde als die van de rest) is onbruikbaar met het toetsenbord. De bezoeker drukt op Tab zonder te weten waar die zich in de lijst bevindt. Op de sitemap van Allo Papa zijn de rubrieken hiërarchisch ingedeeld, wat zowel het stapsgewijs lezen als het visueel doorlopen vergemakkelijkt.

Man analyseert een sitemap op een groot scherm in een professionele open kantoorruimte

De WCAG 2.2 verduidelijken ook dat de sitemap niet de enige manier mag zijn om een pagina te vinden. De sitemap is een aanvulling op de hoofdnavigatie, de interne zoekfunctie of het kruimelpad. Als het sitemenu slecht is opgebouwd, lost een sitemap het onderliggende probleem niet op.

HTML-structuur van een sitemap: wat bezoekers echt helpt

Een effectieve sitemap is gebaseerd op een nauwkeurige HTML-structuur. De links zijn gegroepeerd in geneste lijsten (ul- en li-tags) die de daadwerkelijke hiërarchie van de site weergeven. Het eerste niveau bevat de hoofdrubrieken, het tweede de subcategorieën en het derde de afzonderlijke pagina’s.

Deze nesting heeft een dubbel effect. Bezoekers zien de logica van de site in één oogopslag: productpagina’s staan onder de catalogusrubriek, artikelen onder de blogrubriek en juridische informatie onder de informatierubriek. Hulptechnologieën (schermlezers) herkennen deze hiërarchie ook en geven het diepteniveau aan.

Verschil tussen een HTML-sitemap en een XML-sitemap

De XML-sitemap is bedoeld voor crawlers (Googlebot, Bingbot). Deze bevat technische metadata, zoals de datum van de laatste wijziging of de geschatte updatefrequentie. Menselijke bezoekers openen deze niet via hun browser.

De HTML-sitemap is daarentegen een gewone webpagina die iedereen kan lezen. Deze is bedoeld voor menselijke navigatie. Op een goed geconfigureerde site bestaan beide formaten naast elkaar, maar ze vervullen verschillende functies:

  • De XML-sitemap laat zoekmachines weten welke pagina’s ze moeten crawlen en hoe recent die zijn via het veld lastmod (Google negeert de velden priority en changefreq inmiddels)
  • Met de HTML-sitemap kunnen bezoekers een pagina vinden zonder het menu, de zoekfunctie of een contextuele link te gebruiken
  • Een grote site (e-commerce, media) heeft beide nodig: XML voor een volledige crawl en HTML om gebruikers wegwijs te maken

Navigatie op een website: wanneer een sitemap echt van pas komt

Op een site met minder dan tien pagina’s volstaat het menu. Een sitemap bewijst vooral zijn waarde op sites met een hiërarchie van meer dan drie niveaus diep of met inhoud die regelmatig verandert.

Drie concrete situaties waarin bezoekers de sitemap raadplegen:

  • De interne zoekfunctie levert geen relevant resultaat op, vaak omdat de ingevoerde term niet overeenkomt met de woordkeuze op de site
  • Het menu toont slechts een deel van de hiërarchie (dit komt vaak voor op mobiele apparaten, waar submenu’s standaard verborgen zijn)
  • Bezoekers willen de omvang van de site verkennen zonder een specifiek doel, bijvoorbeeld om te zien hoe uitgebreid een catalogus is of welke thema’s een blog behandelt

Een goed gestructureerde sitemap vangt de beperkingen van het menu en de zoekfunctie op. De sitemap vervangt geen van beide, maar biedt een vangnet wanneer deze twee mechanismen tekortschieten.

Jongere navigeert op een tablet door een interactieve sitemap in een minimalistische woonkamer

Consistente navigatie tussen pagina’s: wat de sitemap niet oplost

De WCAG adviseren om herhaalde navigatie-elementen op meerdere pagina’s in dezelfde volgorde weer te geven. Een menu dat per rubriek van structuur verandert, brengt bezoekers in verwarring, ook als er elders een volledige sitemap beschikbaar is.

De sitemap geeft de hiërarchie weer, maar vormt op zichzelf geen geslaagde informatiearchitectuur. Als categorieën op de site elkaar overlappen of dezelfde inhoud zonder doorverwijzing onder twee verschillende rubrieken staat, neemt de sitemap die inconsistentie over.

Controleer voordat je een sitemap maakt of vernieuwt eerst drie zaken:

Ten eerste moet elke pagina op de site vanaf de homepage in maximaal drie klikken bereikbaar zijn. Ten tweede moet het hoofdmenu dezelfde rubrieken bevatten als de sitemap. Ten slotte moeten de linkteksten in de sitemap exact overeenkomen met de titels van de doelpagina’s, om verwarring te voorkomen.

Een link in de footer blijft nuttig

Met een link naar de sitemap in de footer is deze vanaf elke pagina bereikbaar. Deze conventie is zo gangbaar dat bezoekers weten waar ze moeten zoeken. Een link in de footer, een actuele sitemap en correct gemarkeerde geneste lijsten: deze drie elementen volstaan om een site navigeerbaar te maken, zelfs als de structuur complex is.

De sitemap blijft een aanvullend navigatiemiddel en is geen vervanging voor een duidelijke architectuur. De sitemap komt pas echt tot zijn recht wanneer het menu, de zoekfunctie en het kruimelpad al goed werken: zo voegt deze een extra laag van overzichtelijkheid toe die de andere mechanismen, die van nature slechts een deel van de site tonen, niet kunnen bieden.

Hoe navigeer je eenvoudig op een website met een complete sitemap?