Een bezoeker komt op een e-commercesite om een productpagina terug te vinden die hij de dag ervoor heeft bekeken. Het hoofdmenu bevat acht categorieën, elk met verschillende subcategorieën. Na drie vergeefse klikken verlaat hij de pagina. Een HTML-sitemap had het probleem in één stap opgelost: een volledig overzicht van de sitestructuur, met een rechtstreekse link naar de juiste pagina.
HTML-sitemap en XML-sitemap: twee tools met verschillende functies
De sitemap voor bezoekers wordt vaak verward met het XML-bestand voor zoekmachines. De XML-sitemap is een technisch document met URL’s dat zoekmachinebots helpt de site te crawlen. Hij vervangt de interne linkstructuur niet en biedt menselijke bezoekers geen meerwaarde bij het navigeren.
De HTML-sitemap is daarentegen een pagina die voor iedereen toegankelijk is. Ze geeft de structuur van de site weer in de vorm van links, geordend per categorie en subcategorie. Het is een snelkoppeling voor de navigatie, geen duplicaat van het menu. Wil je zien hoe zo’n pagina er in de praktijk uitziet? de sitemap van Journal Du Web is een goed voorbeeld van een sitestructuur die je in één oogopslag kunt overzien.
Op een kleine site (met enkele tientallen pagina’s) lijkt een HTML-sitemap misschien overbodig. Op een portaal met honderden pagina’s is het een vangnet wanneer het hoofdmenu niet meer volstaat.
Toegankelijkheid en RGAA: de sitemap als concrete verplichting
De algemene richtlijnen voor verbetering van de toegankelijkheid (RGAA) vereisen niet alleen dat er een sitemap aanwezig is. Ze controleren ook of die sitemap de algemene structuur correct weergeeft, of de links werken en of de linkteksten overeenkomen met de pagina’s waarnaar ze verwijzen.
De RGAA verplicht ook om minstens twee navigatiemiddelen aan te bieden uit drie opties: een navigatiemenu, een sitemap en een interne zoekfunctie. Een site met alleen een hoofdmenu en zonder sitemap of zoekbalk voldoet niet aan deze eis.
Wat dit betekent voor schermlezers
Een gebruiker van een schermlezer die een site pagina voor pagina doorloopt, is veel tijd kwijt aan het begrijpen van de algemene structuur. De sitemap biedt in één pagina een overzicht, zonder dat de gebruiker met de tabtoets door elk interactief menu-item hoeft te navigeren.
ArianeGroup wil in zijn toegankelijkheidsactieplan voor 2026 de sitemap verbeteren, naast aanpassingen aan de koppenstructuur, de zichtbaarheid van de toetsenbordfocus en de linkteksten. Dit voorbeeld laat zien dat de sitemap deel uitmaakt van een breder toegankelijkheidstraject en geen op zichzelf staand element is.
Een HTML-sitemap opzetten die de navigatie echt ondersteunt
Een slecht ontworpen sitemap kan net zo verwarrend zijn als een overvol menu. De pagina moet overzichtelijk blijven, wat redactionele keuzes vereist.
Welke pagina’s neem je op en welke laat je weg?
Neem pagina’s op die de structuur bepalen en content waar bezoekers actief naar zoeken. Laat pagina’s weg die geen directe navigatiewaarde hebben.
- Opnemen: de homepage, hoofdcategorieën, subcategorieën, service- of productpagina’s, contactpagina’s en juridische informatie
- Weglaten: interne zoekresultaten, omleidingspagina’s, bevestigingspagina’s van formulieren en dubbele versies (URL-parameters, paginering)
- Speciaal geval: blogs en nieuwsberichten. Vermeld categorieën of tags in plaats van elk afzonderlijk artikel; anders verandert de pagina in een onleesbare lijst van honderden regels
Visuele hiërarchie en groepering
De leesbaarheid hangt af van een duidelijke indeling in niveaus. Op het eerste niveau staan de hoofdcategorieën. Het tweede niveau toont de subcategorieën. Bij meer dan drie niveaus verliest de pagina aan duidelijkheid en belandt de gebruiker in precies de situatie die je wilde voorkomen.
Elke link in de sitemap moet een duidelijke tekst hebben. Een link met de tekst ‘Pagina 1’ of ‘Meer informatie’ vertelt noch de gebruiker, noch de schermlezer waar de link naartoe leidt.
Een sitemap automatisch genereren of handmatig opbouwen
Op WordPress genereren plug-ins automatisch een HTML-sitemap op basis van de bestaande sitestructuur. Deze aanpak werkt als de structuur van de site al goed is. Zo niet, dan geeft de gegenereerde pagina de bestaande chaos nauwkeurig weer.
Handmatig opbouwen kost meer tijd, maar maakt het mogelijk om onnodige pagina’s weg te laten, content te groeperen op basis van de behoeften van gebruikers in plaats van de technische structuur en de weergavevolgorde te bepalen. Op een site waarvan de structuur vaak verandert, wordt handmatig onderhoud al snel een belemmering. Daarom kiezen de meeste teams voor een hybride oplossing: automatische generatie, met uitsluiting van bepaalde categorieën of paginatypen.
De keuze hangt af van het aantal pagina’s en hoe vaak de site wordt bijgewerkt. Een bedrijfswebsite met dertig pagina’s is zonder problemen handmatig te beheren. Een productcatalogus die elke week wordt bijgewerkt, heeft automatisering nodig.
De sitemap aanvullen met andere navigatiehulpmiddelen
De aanbevelingen van het W3C benadrukken één punt: de sitemap mag nooit het enige alternatief zijn. Een broodkruimelpad, duidelijke paginatitels en een interne zoekfunctie vormen samen een samenhangend geheel.
- Het broodkruimelpad laat de gebruiker op elk moment zien waar die zich in de sitestructuur bevindt, zonder de huidige pagina te verlaten
- De interne zoekfunctie helpt wanneer de gebruiker een specifieke term kent, maar niet weet bij welke categorie die hoort
- Beschrijvende paginatitels (title- en H1-tags) helpen gebruikers van ondersteunende technologieën om snel de inhoud van elke pagina te herkennen
Op een zeer grote site kan een pagina met alle URL’s zelfs averechts werken. In dat geval zijn goed onderling gelinkte categoriepagina’s een beter alternatief dan een volledige sitemap. De interne linkstructuur blijft de basis voor soepele navigatie; de sitemap is slechts een gestructureerde aanvulling.
Een goed ontworpen sitemap maakt van een slecht georganiseerde site geen toonbeeld van gebruiksvriendelijkheid. Ze maakt een bestaande structuur zichtbaar. Is die structuur verwarrend, dan moet je die eerst vereenvoudigen voordat je haar in kaart brengt.
