Een sitemap is een pagina die een overzicht geeft van alle inhoud die toegankelijk is op een blog, georganiseerd per categorieën en subcategorieën. Op een blog met veel artikelen fungeert deze pagina als een gestructureerde samenvatting: het stelt gebruikers in staat om specifieke inhoud te vinden zonder het hoofdmenu of de zoekbalk te gebruiken.
Het onderscheid met het XML-sitemapbestand (bedoeld voor zoekmachines) is fundamenteel. De sitemap waar hier sprake van is, is een HTML-pagina die door bezoekers kan worden geraadpleegd, ontworpen om de menselijke navigatie te vergemakkelijken.
HTML-sitemap en XML-sitemap: twee verschillende functies
De verwarring tussen deze twee elementen komt vaak voor. Het XML-sitemapbestand is een technisch document dat aan zoekmachines wordt voorgelegd om pagina’s te indexeren. Het wordt nooit weergegeven in de browser van een bezoeker.
De HTML-sitemap daarentegen is een pagina van de blog die toegankelijk is vanuit de voettekst of het menu. De rol ervan is om een uitputtend overzicht van de structuur aan een menselijke lezer te presenteren. Een blog dat meerdere artikelen per week publiceert, verzamelt snel tientallen pagina’s die het navigatiemenu niet allemaal kan weergeven.
Om te visualiseren hoe een goed gestructureerde sitemap eruitziet op een blog, biedt de sitemap Chez Sylvie een goed voorbeeld van een leesbare pagina, georganiseerd per rubrieken met duidelijke titels.
Structuur van een leesbare sitemap voor een blog
Een sitemap is niet slechts een brute lijst van links. De waarde ervan hangt af van de manier waarop de inhoud is gegroepeerd en hiërarchisch is georganiseerd. Drie principes leiden de constructie ervan.
Groeperen op categorieën, niet op datum
Een blog toont vaak zijn artikelen van de meest recente naar de oudste. De sitemap moet een andere logica aannemen: indelen op thema in plaats van op chronologie. Een bezoeker die alle artikelen over een specifiek onderwerp zoekt, doorloopt de bijbehorende categorie zonder maanden aan archieven te hoeven doorbladeren.
Elke link benoemen met een duidelijke titel
Elke vermelding in de sitemap moet de volledige titel van het artikel of de pagina bevatten, niet een verkorte titel of een nummer. Recente toegankelijkheidsgidsen benadrukken dit punt: een duidelijke titel helpt gebruikers van schermlezers om de bestemming van de link te begrijpen zonder extra context.
Beperk de diepte tot twee of drie niveaus
Een te gedetailleerde sitemap (vier niveaus of meer) wordt net zo moeilijk te lezen als een overvol menu. De aanbevolen structuur volgt dit schema:
- Niveau 1: de hoofdsecties van de blog (categorieën, vaste pagina’s zoals “Over” of “Contact”)
- Niveau 2: de subcategorieën of series artikelen gegroepeerd per thema
- Niveau 3: de individuele artikelen, alleen als de sectie voldoende inhoud bevat om dit detail te rechtvaardigen
Boven de drie niveaus verliest de pagina zijn voordeel van snelle leesbaarheid.
Toegankelijkheid en navigatie met het toetsenbord op een sitemap
De sitemap voldoet aan een concrete behoefte voor mensen die zonder muis navigeren. Toetsenbordgebruikers krijgen direct toegang tot een sectie zonder door alle interactieve elementen van het menu en de inhoud te tabuleren die aan hun bestemming voorafgaan.
Voor gebruikers van schermlezers kost het tijd en cognitieve inspanning om een blog pagina voor pagina door te nemen om de architectuur te begrijpen. De sitemap biedt een globaal overzicht van de structuur op één plek.
Een vaak verwaarloosd technisch element: de skip link (overslaan link). Deze link, geplaatst als het eerste focusbare element van elke pagina, maakt het mogelijk om direct naar de hoofdinhoud te springen. De toegankelijkheidsrichtlijnen geven aan dat deze zichtbaar moet blijven voor het toetsenbord en niet verborgen mag worden door een plakkerige header. Op een sitemap voorkomt de skip link dat je door het navigatiemenu moet tabuleren voordat je de lijst met links bereikt.
Markeer je sitemap met de juiste semantische HTML
De technische kwaliteit van de markup beïnvloedt direct de navigatie-ervaring. Een sitemap die is opgebouwd met de juiste semantische tags wordt beter geïnterpreteerd door browsers en assistentietechnologieën.
- Gebruik de <nav> tag met een aria-label attribuut om het navigatiegebied van de sitemap te identificeren, dat verschilt van de hoofd navigatie
- Structuur de links in geordende of ongeordende lijsten (<ul>, <ol>) in plaats van in paragrafen of tabellen
- Gebruik titels <h2> en <h3> om de grote secties van de sitemap te scheiden, zodat schermlezers door koppen kunnen navigeren
- Vermijd ARIA-rollen die zijn ontworpen voor applicatie-interfaces (zoals “menubar”): een sitemap is een pagina met links, geen applicatie
Recente toegankelijkheidsexemplaren raden af om de navigatie van een blog te behandelen als een ARIA-toepassingsmenu. De combinatie van <nav> plus lijst van links blijft de meest betrouwbare methode.
Automatische generatie of handmatige bouw van de sitemap
Op WordPress en de meeste CMS’en genereren extensies automatisch een HTML-sitemap op basis van de bestaande structuur. Deze aanpak is geschikt voor blogs die frequent publiceren, omdat elk nieuw artikel verschijnt zonder handmatige tussenkomst.
Handmatige bouw heeft een voordeel: het stelt je in staat om bepaalde pagina’s uit te sluiten (wettelijke vermeldingen, irrelevante tagpagina’s, lege archiefpagina’s) en de weergavevolgorde te reorganiseren volgens de redactionele logica in plaats van volgens de publicatiedatum. Voor een blog met enkele tientallen pagina’s blijft de inspanning redelijk. Daarbovenop voorkomt automatische generatie met sortering op categorie dat er iets wordt vergeten.
Een sitemap vervangt noch het hoofdmenu, noch de zoekbalk. Het fungeert als een vangnet voor bezoekers die niet hebben gevonden wat ze zochten via de gebruikelijke paden, en als een primaire navigatietool voor degenen die de voorkeur geven aan een overzicht. De pagina verdient een permanente link in de voettekst van de blog, waar lezers verwachten deze te vinden.
