Kopteksten (H1-H6) en hiërarchie

Wat zijn kopteksttags?

Koptekstlabels van H1 tot en met H6 zijn HTML-tags die de inhoudshiërarchie en de indeling van een pagina definiëren. H1 staat voor de hoogste koptekst, H2 voor de hoofdonderdelen, H3 voor de subonderdelen, enzovoort. Hoewel deze tags in de browser visueel groot en vetgedrukt worden weergegeven, is hun primaire doel niet visueel, maar structureel: net als de inhoudsopgave van een boek vormen ze het logische raamwerk van de pagina.

Deze hiërarchie is niet alleen een indeling die door het menselijk oog wordt gelezen, maar ook een boomstructuur die door browsers en ondersteunende technologieën (zoals schermlezers) programmatisch wordt ‘begrepen’. Een gebruiker van een schermlezer navigeert doorgaans door van kop naar kop te springen; als de hiërarchie dus verstoord raakt, raakt ook de navigatie verstoord.

Kopniveaus maken de lange inhoud van een pagina bovendien scanbaar: in plaats van de pagina regel voor regel te lezen, scant de gebruiker de koppen om het gewenste gedeelte te vinden. Dit kan zowel de gebruikerservaring als de tijd die op de pagina wordt doorgebracht positief beïnvloeden.

Waarom is dit belangrijk?

Een juiste kopjeshiërarchie maakt het voor zoekmachines gemakkelijker om de thematische samenhang en de subonderwerpen van de pagina te begrijpen, en zorgt er tevens voor dat gebruikers die een schermlezer gebruiken, op de pagina kunnen navigeren. Google leidt uit de kopstructuur af welk gedeelte van een lange pagina welk subonderwerp behandelt; dit kan met name helpen bij het selecteren van de juiste passage in uitgebreide zoekresultaten, zoals een ‘featured snippet’.

Een onregelmatige of ontbrekende hiërarchie leidt tot onduidelijkheid in de inhoudsstructuur en tot toegankelijkheidsproblemen. Als er bijvoorbeeld rechtstreeks van H2 naar H4 wordt gesprongen, kan dit bij een gebruiker van een schermlezer verwarring veroorzaken: ‘ontbreekt hier een tussenliggend niveau, of is de sectie afgelopen?’.

In een extreem geval kunnen bij single-page-applicaties of sjabloonsystemen met meerdere componenten verschillende componenten onafhankelijk hun eigen H1-koppen weergeven; dit kan er onbedoeld toe leiden dat er meerdere H1-koppen op de pagina verschijnen. Bij dit soort technische architecturen is het belangrijk om de kopniveaus centraal te beheren.

Hoe los je dit op?

• Er mag slechts één H1 op de pagina staan; dit is doorgaans de hoofdkop van de pagina en moet het onderwerp van de pagina duidelijk samenvatten.
• Gebruik de koppen in de juiste volgorde: H1 → H2 → H3, zonder niveaus over te slaan.
• Gebruik koppen niet voor visuele opmaak, maar om de inhoudsstructuur aan te geven; gebruik CSS als u grote/vetgedrukte tekst wilt, en kies niet het verkeerde kopniveau.
• Elke H2/H3 moet een echte sectietitel zijn, geen decoratieve tekst of slogan.
• Gebruik trefwoorden op een natuurlijke manier in de koppen; vul niet elke kop met de hand met trefwoorden.
• Schrijf koppen op lange pagina’s op een consistente en voorspelbare manier, zodat ze een inhoudsopgave vormen; dit helpt zowel de gebruiker als de zoekmachine.
• Als u een thema of componentbibliotheek gebruikt, documenteer dan in een centrale stijlgids welk kopniveau de verschillende componenten (header, hero, kaart, footer) gebruiken.
• Controleer bij het wijzigen van de lay-out regelmatig met de ontwikkelaarstools van de browser (DOM-boom) of de kopjerarchie niet verstoord raakt.
• Zet voor blog- of nieuwssites een contentmanagement-workflow op waarbij de artikelkop (H1) in de redactionele kop staat en de SEO-titel in een apart veld; koppel deze twee niet aan elkaar.
• Op websites met meerdere auteurs kunnen verschillende redacteuren verschillende gewoontes hebben; daarom verhoogt het vastleggen van de regels voor de kopjerarchie in een stijlgids de consistentie.

Voorbeeld

<h1>SEO-gids</h1>
<h2>Technische SEO</h2>
<h3>Sitesnelheid</h3>
<h2>Content-SEO</h2>
<h3>Zoekwoordenonderzoek</h3>

Slecht voorbeeld: <h1>Welkom</h1> gevolgd door direct <h4>Onze producten</h4> — de niveaus H2 en H3 zijn overgeslagen, de hiërarchie is doorbroken.

Veelgemaakte fouten

• Meer dan één H1 op een pagina gebruiken (bijv. zowel in het logogebied als in de inhoud).
• Geen enkele H1 gebruiken.
• Koptekstlabels alleen gebruiken om een groot/vet lettertype te krijgen, waarbij de hiërarchie wordt genegeerd.
• Van H2 direct naar H4 overslaan en zo niveaus overslaan.
• Wanneer er in het rapport van Seoraporu.co een waarschuwing verschijnt over "meer dan één H1" of "ontbrekende H1", moet dit op sjabloon-/themaniveau worden gecorrigeerd, omdat dit doorgaans een probleem is dat zich op alle pagina's herhaalt.