Een logische koppenstructuur (H1, H2, H3, …) is cruciaal voor webtoegankelijkheid én SEO. Maar hoe weet je of jouw pagina goed is opgebouwd? Met de gratis browserextensie HeadingsMap zie je in één oogopslag of de structuur klopt en waar verbeteringen nodig zijn. In deze handleiding lees je stap voor stap hoe je de tool gebruikt en waar je op moet letten.
1. Installeer de HeadingsMap-extensie
- Ga naar de Chrome Web Store en zoek op HeadingsMap.
- Klik op ‘Toevoegen aan Chrome’ en bevestig de installatie.
2. Open de webpagina die je wilt testen
Navigeer in Chrome naar de pagina waarvan je de koppenstructuur wilt controleren.
3. Start HeadingsMap
Klik rechtsboven in je browser op het HeadingsMap-icoon (h/) in de werkbalk. Het paneel opent direct.
4. Bekijk de koppenstructuur
- Je ziet een hiërarchisch boomdiagram van alle koppen (H1 t/m H6).
- De niveaus zijn kleurgecodeerd voor snelle herkenning.
- Klik op een kop in de lijst om naar dat gedeelte van de pagina te springen; de kop wordt gemarkeerd.
Op de onderstaande screenshot heb ik een voorbeeld opgenomen van een fout: in de footer staan vier kopjes van hetzelfde niveau. In de headingsmap moeten deze kopjes niveau 2 hebben. Dit is nu niet het geval
5. Spoor problemen op
Met HeadingsMap zie je meteen waar de structuur niet klopt:
- Ontbrekende koppen: Teksten die visueel als kop zijn opgemaakt, maar niet met een h-element (h1–h6) in de HTML, verschijnen niet in het overzicht. Dit wijst op een toegankelijkheidsprobleem.
- Overgeslagen niveaus: Bijvoorbeeld een H2 die direct wordt gevolgd door een H4. Dat maakt de structuur onlogisch.
- Meerdere H1’s: Er mag maar één hoofdtitel (H1) zijn.
- Oneigenlijk gebruik van koppen: Soms wordt een tekst die géén kop is, zoals een call-to-action of een afsluitende zin, onterecht in een h-element geplaatst. Ook dat is fout.
💡 Tip: Een kop hoort altijd inhoud in te leiden – of dat nu tekst, een afbeelding, een lijst of een video is. Staat er niets onder? Dan is het geen kop.
6. Verbeter de toegankelijkheid van je pagina
- Bespreek de gevonden problemen met je ontwikkelaar of contentbeheerder.
- Voeg ontbrekende koppen toe of herstel de hiërarchie.
- Controleer daarna opnieuw met HeadingsMap of de structuur nu klopt.
Met deze simpele check zorg je dat jouw website beter toegankelijk wordt voor schermlezers, makkelijker te begrijpen is voor bezoekers en ook nog eens SEO-technisch sterker scoort.