H1-H2-structuur: zo zet je koppen op je website goed neer

Een goede H1-H2-structuur werkt als een inhoudsopgave. Je pagina heeft één H1 die zegt waar de pagina over gaat. Daaronder staan H2's voor de grote onderdelen en H3's voor de stukken binnen zo'n onderdeel. Je slaat geen niveaus over en je gebruikt koppen nooit alleen om tekst groter te maken. Zo snappen bezoekers, schermlezers en Google in één keer hoe je pagina in elkaar zit. Hieronder lees je hoe je dat aanpakt, met een voorbeeld, een stappenplan en een manier om je eigen site te controleren.

Sneleenwebsitenodig

Een website met duidelijke structuur

Durfmakers bouwt websites met ontwerp en teksten op maat, technisch vindbaar vanaf de eerste dag in Google en AI-assistenten.

Bekijk de mogelijkheden

Kort samengevat

Er zijn zes kopniveaus, van H1 tot en met H6. Voor de meeste bedrijfspagina's heb je genoeg aan H1, H2 en H3.
Geef elke pagina één duidelijke, unieke H1. Google heeft geen probleem met meer H1's, maar voor bezoekers en schermlezers is één hoofdkop het helderst.
Nest je koppen netjes: een H3 hoort onder een H2, niet direct onder de H1.
Een kop beschrijft wat eronder staat. Zet het belangrijkste woord vooraan en prop er geen zoekwoorden in.
Controleer je structuur met de Outline in WordPress of met een browserextensie zoals HeadingsMap.

Inhoudsopgave

Wat H1, H2 en H3 betekenen
Zo ziet een goede koppenstructuur eruit
In vijf stappen naar een logische structuur
Eén H1 of meer?
Wat koppen doen voor SEO
Koppen en toegankelijkheid
Veelgemaakte fouten en hoe je ze oplost
Koppen instellen en controleren op je site
Onze kijk op koppen
Een site waarvan de structuur al klopt
Veelgestelde vragen
Bronnen

Wat H1, H2 en H3 betekenen

HTML kent zes headingniveaus, van h1 tot en met h6. De H1 is de hoofdkop, de H2 een subkop, de H3 een sub-subkop. H4, H5 en H6 gaan steeds een laag dieper in dezelfde hiërarchie. In de code staat een kop tussen tags, bijvoorbeeld <h2>Onze werkwijze</h2>. Daarom heet het een heading tag.

Het verschil zit niet in de lettergrootte. Dat is een veelgehoord misverstand. Een H2 is niet "de wat kleinere kop", maar "een hoofdonderdeel van deze pagina". Hoe groot hij eruitziet, regel je met de vormgeving van je site. MDN zegt het ronduit: gebruik heading-elementen niet om tekst groter of kleiner te maken, maar CSS, en bewaar het niveau voor de betekenis.

Niveau	Wat het is	Hoe vaak per pagina	Voorbeeld op een bedrijfssite
H1	De hoofdkop: waar gaat deze pagina over?	Eén	Badkamer laten renoveren in Enschede
H2	Een hoofdonderdeel van de pagina	Zoveel als je onderdelen hebt	Wat een renovatie kost
H3	Een deel binnen een H2	Alleen waar een H2 zich opsplitst	Kosten voor tegelwerk
H4 t/m H6	Nog diepere lagen	Zelden nodig	Vloertegels versus wandtegels

MDN raadt aan om meestal niet meer dan drie niveaus op één pagina te gebruiken. Heb je echt H5 en H6 nodig, dan is je pagina vaak te groot en kun je hem beter splitsen in meer pagina's.

Zo ziet een goede koppenstructuur eruit

Een voorbeeld maakt het concreet. Stel: je bent zzp-schilder en je bouwt een dienstpagina over buitenschilderwerk. Een logische opbouw ziet er zo uit:

H1  Buitenschilderwerk in Hengelo en omgeving
  H2  Wat we voor je schilderen
    H3  Kozijnen en deuren
    H3  Gevelbetimmering
  H2  Zo verloopt een klus
  H2  Wat buitenschilderwerk kost
    H3  Prijs per kozijn
    H3  Wanneer je extra betaalt
  H2  Veelgestelde vragen
  H2  Offerte aanvragen

Lees alleen de koppen en je weet al wat er op de pagina staat. Dat is de test. Elke H3 hoort duidelijk bij de H2 erboven. Er zit geen H3 los onder de H1. En geen enkele kop is een loze kreet als "Welkom" of "Meer info".

Hiërarchie van H1-, H2- en H3-koppen

Vergelijk dat met wat we vaak tegenkomen bij sites die we herbouwen:

H1  Logo van het bedrijf
H2  Welkom!
H4  Kwaliteit staat bij ons voorop
H2  Bel ons
H2  Volg ons op Instagram

Hier zegt de H1 niets over de pagina, wordt H4 gekozen omdat die "mooi klein" is en zijn de knoppen in de footer tot H2 gemaakt. Een schermlezer leest dit voor als een rommelige inhoudsopgave, en ook Google krijgt weinig houvast.

De koppen op één pagina hangen samen met de opbouw van je hele site. Hoe je je menu en pagina's indeelt, lees je in ons stuk over websitestructuur voor je bedrijfswebsite.

In vijf stappen naar een logische structuur

Schrijf eerst de H1. Vat in één zin samen waar deze pagina over gaat en voor wie. Volgens NL Design System begint een normale pagina met één h1 die kort, duidelijk en uniek beschrijft waar de pagina over gaat. Uniek betekent ook: niet op elke pagina dezelfde H1.
Maak een lijst van de vragen van je bezoeker. Wat kost het, hoe werkt het, waarom jij, wat moet ik nu doen? Elke grote vraag wordt een H2.
Splits alleen waar het nodig is. Bestaat een H2-onderdeel uit duidelijk aparte stukken, dan krijgen die een H3. Is het één verhaal, dan laat je het bij de H2.
Schrijf koppen die de inhoud beschrijven. W3C adviseert dat elke kop het onderwerp van zijn sectie beschrijft, met de belangrijkste informatie vooraan. "Prijs per kozijn" is beter dan "Even over de centen".
Lees alleen je koppen terug. Snap je de pagina zonder de lopende tekst? Dan klopt je structuur. Zo niet, herschrijf of herorden.

Werk je met een tekstschrijver of schrijf je zelf, dan helpt het om de koppen vóór de lopende tekst vast te leggen. Wie zijn webteksten laten schrijven overweegt, kan zo'n koppenplan ook goed als briefing gebruiken: het laat precies zien welke vragen elke pagina moet beantwoorden.

Eén H1 of meer?

Dit is de vraag waar SEO-tools het vaakst over klagen. Het korte antwoord: technisch mag het, praktisch kies je voor één.

Google zegt zelf dat er geen ideaal aantal koppen bestaat en dat de volgorde van de niveaus voor Google Search niet doorslaggevend is. Google-medewerker John Mueller zei het nog sterker: volgens hem rankt een site net zo goed zonder H1 als met vijf H1-tags. Krijg je in een audit de melding "multiple H1 tags", dan is dat dus geen ramp voor je posities.

Toch adviseren de richtlijnen voor toegankelijkheid één H1. NL Design System kiest voor één h1 per pagina, aan het begin van de hoofdinhoud, zodat iemand met een schermlezer direct naar de kern kan springen. Ook MDN raadt bij voorkeur één H1 per pagina aan. Die ene H1 is de duidelijkste manier om te zeggen: dit is waar het hier om draait.

Onze regel is daarom simpel:

Eén H1 per pagina, bovenaan, in de hero of direct daaronder.
Het logo is geen H1. Je bedrijfsnaam staat al in de paginatitel en in de header.
Op een onepager blijft het ook één H1. De verschillende blokken (diensten, over mij, contact) worden H2's.

Twijfel je of je beter een onepager of een site met meer pagina's kunt nemen, dan helpt onze keuzehulp onepager of multipage. En hoe je die bovenste kop sterk maakt, lees je in hero section best practices.

Wat koppen doen voor SEO

Heading tags zijn geen geheime rankingknop. Ze helpen Google wel om je pagina te begrijpen. NL Design System beschrijft dat zoekmachines kopniveau 1 gebruiken als belangrijkste kop van de pagina. En WordPress schrijft in zijn documentatie dat koppen de leesbaarheid voor mensen en zoekmachines verbeteren.

Wat je er in de praktijk mee wint:

Begrip. Een H2 "Wat buitenschilderwerk kost" vertelt Google precies welke vraag die sectie beantwoordt.
Scanbaarheid. Bezoekers scannen eerst de koppen. Vinden ze hun vraag, dan blijven ze lezen. Dat is goed voor je conversie.
Hergebruik. Zoekmachines en AI-assistenten halen graag een duidelijk afgebakend stuk uit je pagina om een vraag te beantwoorden. Een kop die de vraag noemt met het antwoord direct eronder, maakt dat makkelijker.

Zoekwoorden in koppen zonder te forceren

Gebruik het woord waar je op gevonden wilt worden in je H1, op een natuurlijke manier. In de H2's gebruik je het alleen waar het logisch is. Google noemt het onnatuurlijk herhalen van woorden keyword stuffing: een pagina volstoppen met zoekwoorden om rankings te beïnvloeden. Dat valt onder spam.

Een voorbeeld van te veel:

H1: Schilder Hengelo
H2: Schilder Hengelo voor buitenwerk
H2: Goedkope schilder Hengelo
H2: Schilder Hengelo offerte

Beter is dit:

H1: Schilder in Hengelo voor binnen- en buitenwerk
H2: Wat we voor je schilderen
H2: Wat een schilderklus kost
H2: Vraag een offerte aan

Klinkt een kop geforceerd als je hem hardop leest? Herschrijf hem dan. Een bezoeker die "Schilder Hengelo offerte" ziet staan, haakt eerder af dan iemand die gewoon leest wat hij kan doen.

Koppen en toegankelijkheid

Voor mensen met een schermlezer zijn koppen de belangrijkste manier om door een pagina te bewegen. Ze kunnen een lijst van alle koppen oproepen en met een sneltoets van kop naar kop springen. Is je structuur rommelig, dan is je pagina voor hen een doolhof.

Daarom zegt W3C ook dat je koppen naar niveau nest en een sprong van H1 direct naar H3 zoveel mogelijk vermijdt. NL Design System raadt bij de controle aan te kijken of de h1 niet op alle pagina's hetzelfde is en of er geen niveaus worden overgeslagen.

Twee dingen die we vaak zien en die je direct kunt oplossen:

Vette tekst die eruitziet als een kop. Voor jou is het een kop, maar een schermlezer ziet gewone tekst. Maak er een echte H2 of H3 van.
Koppen die eigenlijk opmaak zijn. Een slogan of een citaat als H2 zetten omdat het groot moet. NL Design System adviseert koppen alleen te gebruiken voor echte nieuwe secties, niet om tekst op te laten vallen.

Toegankelijkheid is voor veel ondernemers ook een wettelijke vraag geworden. Wat er voor jouw site precies geldt, zetten we op een rij in website toegankelijkheid eisen.

Veelgemaakte fouten en hoe je ze oplost

Fout	Waarom het misgaat	Zo los je het op
Het logo is de H1	De hoofdkop zegt niets over de pagina	Maak de belangrijkste zin in je hero de H1
Elke pagina heeft dezelfde H1	Pagina's zijn niet van elkaar te onderscheiden	Geef elke pagina een eigen H1 over haar eigen onderwerp
H1 gevolgd door H3	Er ontbreekt een laag, dat is verwarrend	Maak de H3 een H2, of zet er een H2 boven
Kopniveau gekozen op grootte	De betekenis klopt niet meer	Kies het niveau op inhoud, regel de grootte in de vormgeving
Footer- en sidebartitels als H2	Ze lijken op hoofdonderdelen van je pagina	Gebruik daar gewone tekst of een lager niveau
Koppen als "Welkom" of "Meer"	Ze beschrijven niets	Schrijf wat er in die sectie staat
Zoekwoord in elke kop	Leest onnatuurlijk en telt als stuffing	Gebruik het zoekwoord in de H1 en waar het logisch valt

Wil je elke pagina op deze punten en meer nalopen, dan helpt onze website copy checklist. Je beoordeelt er een pagina mee in een half uur.

Koppen instellen en controleren op je site

In WordPress voeg je een kop toe met het Heading block. Volgens de WordPress-documentatie over het Heading block doe je dat via de Block Inserter of door /heading te typen. Het niveau kies je met Transform in de werkbalk van het blok of in de blokinstellingen (H1 tot en met H6). Daarna open je het Document Overview en kijk je bij Outline: daar zie je je hele koppenstructuur in één lijst.

In andere websitebouwers heet het meestal "Kop 1", "Kop 2" en zo verder, of "Heading 1". Let op: sommige thema's maken van de paginatitel automatisch een H1. Zet je dan zelf ook een H1 in de tekst, dan heb je er twee.

Op elke site kun je controleren met een browserextensie zoals HeadingsMap, beschikbaar voor Chrome en Firefox. Die toont alle koppen van een pagina als boomstructuur, inclusief overgeslagen niveaus en lege koppen. Zonder extensie kan het ook: klik met de rechtermuisknop op een kop, kies "Inspecteren" en kijk welke tag erbij staat.

Loop bij de controle deze vragen langs:

Is er precies één H1, en zegt die waar de pagina over gaat?
Volgen de niveaus elkaar logisch op, zonder sprongen?
Snap je de pagina als je alleen de koppen leest?
Is alles wat eruitziet als een kop ook echt een kop, en andersom?

Onze kijk op koppen

Wij zien koppen niet als iets wat je achteraf nog even goed zet voor SEO. Ze zijn het skelet van een pagina. Als we een site bouwen, beginnen we bij de vragen van de bezoekers van onze klant. Die worden de H2's. Pas daarna schrijven we de teksten en kiezen we de vormgeving.

Daarom maken we de site eerst helemaal af en laten we hem zien op een testadres. Jij leest dan niet een ontwerp met nepteksten, maar je echte pagina's met echte koppen. Je ziet meteen of de opbouw klopt voor jouw klanten. En omdat de koppenstructuur vanaf de eerste dag technisch goed staat, is je site gelijk goed leesbaar voor Google en voor AI-assistenten zoals ChatGPT.

Een nette koppenstructuur is geen luxe. Het is het verschil tussen een etalage waar je in één oogopslag ziet wat er te koop is en een etalage waar alles door elkaar ligt.

Patrick

Een site waarvan de structuur al klopt

Heb je geen zin om zelf met koppen, niveaus en extensies te puzzelen? Wij bouwen je website met ontwerp en teksten op maat, en de koppenstructuur zit er vanaf het begin goed in. Je ziet de complete site eerst op een testadres. Je betaalt pas als je hem wilt houden. Wil je hem niet, dan betaal je niets.

Sneleenwebsitenodig

Start: een onepager voor € 350, eenmalig.
Compleet: een site met meerdere pagina's voor € 500, eenmalig.

Geen abonnement, en na betaling zijn de broncode en het ontwerp van jou. Bekijk Start en Compleet en laat ons je website zien.

Veelgestelde vragen

Is een H1 hetzelfde als de paginatitel?

Nee. De paginatitel (het title-element) is de titel in je browsertabblad en vaak de blauwe link in Google. De H1 is de zichtbare hoofdkop op de pagina zelf. Ze mogen op elkaar lijken, maar hoeven niet woord voor woord gelijk te zijn.

Mag ik een niveau overslaan, bijvoorbeeld van H2 naar H4?

Liever niet. Google maakt het niet veel uit, maar voor schermlezers en voor de logica van je pagina is een overgeslagen niveau verwarrend. Kies het niveau op inhoud en pas de grootte aan in de vormgeving.

Hoeveel H2's mag een pagina hebben?

Er is geen maximum. Je hebt er zoveel als je pagina hoofdonderdelen heeft. Een korte dienstpagina heeft er vaak vier tot zes, een uitgebreide gids meer. Wordt het een erg lange lijst, kijk dan of je de pagina kunt splitsen.

Moet elke kop een zoekwoord bevatten?

Nee. Zet je belangrijkste zoekwoord op een natuurlijke manier in de H1. In de rest van de koppen beschrijf je gewoon wat er in die sectie staat. Vaak komen daar vanzelf verwante woorden in terug.

Wat moet de H1 op mijn homepage zijn?

Een zin die zegt wat je doet en voor wie, niet je bedrijfsnaam of "Welkom". Bijvoorbeeld "Boekhouder voor zzp'ers in Twente". Wanneer je beter een aparte landingspagina maakt, lees je in landingpage vs homepage.