HTML-koptekst-tags, <h1> tot en met <h6>, definiëren de kopteksten en subkopteksten van uw content. Ze creëren een hiërarchische documentstructuur die browsers, zoekmachines en hulptechnologieën vertelt hoe uw pagina is opgebouwd. Beschouw ze als hoofdstuk- en sectietitels in een boek: de H1 is de boektitel, H2's zijn hoofdstuktitels, H3's zijn secties binnen hoofdstukken, enzovoort.
De koptekst-hiërarchie begrijpen
Elk koptekstniveau vertegenwoordigt een andere diepte in de paginastructuur:
<h1>: De hoofdkoptekst van de pagina. Beschrijft waar de hele pagina over gaat. De beste praktijk is om precies één H1 per pagina te gebruiken. Bij een blogbericht is dit doorgaans de berichttitel. Bij een homepage kan het de belangrijkste waardepropositie zijn.<h2>: Belangrijke sectiekopteksten. Deze verdelen uw content in de primaire secties. In een lang artikel introduceert elke H2 een nieuw onderwerp of belangrijk punt.<h3>: Subsecties binnen een H2-sectie. Als uw H2-sectie "Beveiligingskopteksten" behandelt en u die in delen wilt opdelen, krijgt elk deel een H3.<h4>tot en met<h6>: Diepere nestingniveaus. De meeste content heeft zelden iets verder dan H4 nodig. Het gebruik van H5 of H6 duidt er meestal op dat de content baat zou hebben bij herstructurering in afzonderlijke pagina's of secties.
Waarom koptekst-hiërarchie belangrijk is voor SEO
Zoekmachines gebruiken kopteksten om het onderwerp en de structuur van uw content te begrijpen. Google heeft bevestigd dat kopteksten de crawlers helpen begrijpen waar elke sectie van een pagina over gaat. Hoewel kopteksten alleen geen enorme rankingfactor zijn, dragen ze op verschillende manieren bij aan algemene on-page SEO:
- Onderwerpsignalen: Trefwoorden in kopteksten wegen zwaarder dan trefwoorden in lopende tekst. Een H2 met "Hoe u uw WordPress-login beveiligt" vertelt Google dat die sectie specifiek over loginbeveiliging gaat.
- Featured snippets: Google haalt vaak content uit secties met duidelijke kopteksten voor featured snippet-resultaten. Een goed gestructureerde pagina met beschrijvende kopteksten heeft een grotere kans om in deze prominente posities te verschijnen.
- Begrip van de paginastructuur: Een logische koptekst-hiërarchie helpt Google de relatie tussen secties te begrijpen. Als uw H2 "Prestatieoptimalisatie" is en uw H3's "Afbeeldingscompressie" en "Caching" zijn, begrijpt Google dat dit subonderwerpen van prestaties zijn.
- Passage ranking: Google kan afzonderlijke passages van een pagina ranken. Duidelijke kopteksten helpen Google identificeren waar de ene passage eindigt en de andere begint.
Toegankelijkheid en navigatie met schermlezers
Voor gebruikers die afhankelijk zijn van schermlezers (zoals JAWS, NVDA of VoiceOver) zijn kopteksten een van de belangrijkste navigatiemiddelen. Schermlezergebruikers drukken vaak op een sneltoets (meestal "H") om van koptekst naar koptekst te springen, en doorlopen de paginastructuur op dezelfde manier waarop een ziende gebruiker visueel scant. Als uw kopteksten ontbreken, niet op volgorde staan of voor visuele styling worden gebruikt in plaats van structuur, verliezen schermlezergebruikers het vermogen om efficiënt te navigeren. De Web Content Accessibility Guidelines (WCAG) behandelen specifiek koptekststructuur. Success Criterion 1.3.1 vereist dat informatie en relaties die via presentatie worden overgebracht programmatisch bepaalbaar zijn. In de praktijk betekent dit dat uw koptekstniveaus de werkelijke contenthiërarchie moeten weerspiegelen, niet er alleen mooi uitzien.
Veelvoorkomende koptekstfouten in WordPress
WordPress-sites zijn bijzonder vatbaar voor koptekstproblemen omdat de koptekststructuur is verdeeld tussen het thema en de contenteditor:
- Meerdere H1-tags: Dit is het meest voorkomende probleem. Sommige thema's geven de sitetitel uit als H1 in de koptekst en omhullen ook de pagina-/berichttitel met een H1. Dat geeft de pagina twee concurrerende hoofdkopteksten. Hoewel Google heeft gezegd dat meerdere H1's "prima" zijn in termen van geen straf, blijft één enkele H1 die het paginaonderwerp duidelijk vermeldt nog steeds de schoonste aanpak.
- Koptekstniveaus overslaan: Van H2 direct naar H4 springen, met H3 volledig overgeslagen. Dit doorbreekt de logische structuur. Schermlezers kondigen koptekstniveaus aan, dus een gebruiker die "Koptekstniveau 2" hoort gevolgd door "Koptekstniveau 4" zal zich afvragen wat er met niveau 3 is gebeurd.
- Kopteksten gebruiken voor styling: Een H3 kiezen in plaats van een H2 omdat de H3-lettergrootte er beter uitziet in het thema. Dit is misbruik van kopteksten. De juiste aanpak is het juiste koptekstniveau voor de structuur te gebruiken en vervolgens de CSS aan te passen om het gewenste visuele uiterlijk te krijgen.
- Helemaal geen H1: Sommige thema's of pagebuilder-lay-outs laten de H1 per ongeluk volledig weg, of de H1 is ingesteld als sitetitel in de koptekst terwijl de werkelijke pagina-inhoud bij H2 begint. Elke pagina moet precies één H1 hebben die het hoofdonderwerp beschrijft.
- Kopteksten in widgets en zijbalken: WordPress-widgets geven vaak H2- of H3-kopteksten uit voor widgettitels. Deze kopteksten maken geen deel uit van de hoofdcontenthiërarchie en kunnen de documentstructuur verwarren. Sommige thema's lossen dit op met
aria--attributen, maar veel niet. - Lege koptekst-tags: Soms laten thema's of pagebuilders lege koptekst-tags in de markup achter (een
<h2>zonder tekst). Deze zijn onzichtbaar voor ziende gebruikers maar verwarren schermlezers.
Hoe WordPress kopteksten verwerkt
In een typische WordPress-opstelling werkt de koptekststructuur zo: het thema genereert de H1, meestal uit de berichttitel of paginatitel. De content die u in de editor schrijft moet beginnen met H2-kopteksten voor hoofdsecties en H3 en lager voor subsecties. U moet bijna nooit een H1 in de contenteditor typen, omdat het thema er al een uitgeeft. Als u een pagebuilder of een aangepaste landingspagina gebruikt waar het thema geen H1 uitgeeft, moet u er zelf een toevoegen. Voordat u een pagina publiceert, is het de moeite waard om te controleren of het thema automatisch een H1 uitgeeft, zodat u duplicaten voorkomt.
Kopteksten in de Gutenberg-blokeditor
Met Gutenberg is het eenvoudig om kopteksten in te voegen en te beheren. Met het Heading-blok kunt u het niveau (H2 tot en met H6, en H1 indien nodig) selecteren via een dropdown. Gutenberg bevat ook een functie "Documentoverzicht" in de zijbalk van de editor die u in één oogopslag de volledige koptekststructuur van uw bericht laat zien. Als u een koptekstniveau overslaat, markeert de overzichtsweergave dit met een waarschuwing. Dit is een handige ingebouwde tool die veel WordPress-gebruikers over het hoofd zien. Maak er een gewoonte van om het documentoverzicht te controleren voordat u op Publiceren klikt.
Tools om de koptekststructuur te controleren en te visualiseren
Naast Gutenbergs ingebouwde overzicht zijn er verschillende manieren om uw koptekststructuur te auditen:
- Browser-extensies: De extensie "HeadingsMap" (beschikbaar voor Chrome en Firefox) toont de koptekst-hiërarchie van elke pagina als een inklapbare boom. De "WAVE"-toegankelijkheidstool markeert ook koptekstproblemen.
- SEO-plugins: Yoast SEO en Rank Math controleren beide de koptekststructuur als onderdeel van hun contentanalyse. Ze waarschuwen u over ontbrekende H1's of suboptimaal gebruik van kopteksten.
- Online validators: De W3C Markup Validation Service controleert uw HTML op structurele problemen, inclusief problemen met koptekstvolgorde.
- InspectWP: InspectWP scant uw pagina en somt elke koptekst op volgorde op, zodat u in één oogopslag de volledige hiërarchie kunt zien.
Best practices voor WordPress-kopteksten
- Eén H1 per pagina: Laat het thema de H1 verzorgen vanuit de bericht-/paginatitel. Voeg er geen andere toe in de content.
- Begin content bij H2: Uw eerste koptekst in de editor moet H2 zijn, niet H1.
- Sla geen niveaus over: Ga van H2 naar H3 naar H4. Spring nooit van H2 naar H4.
- Gebruik kopteksten voor structuur, niet voor styling: Als u kleinere of grotere tekst wilt, gebruik dan CSS-klassen in plaats van het koptekstniveau te wijzigen.
- Houd kopteksten beschrijvend: "Beveiliging" is minder nuttig dan "WordPress beveiligings best practices" voor zowel lezers als zoekmachines.
- Controleer het documentoverzicht: Gebruik Gutenbergs ingebouwde overzicht of een browserextensie vóór het publiceren.
Wat InspectWP controleert
InspectWP analyseert de koptekststructuur van uw WordPress-pagina en somt elke koptekst op volgorde op, van H1 tot en met H6. Het detecteert ontbrekende H1-tags, meerdere H1-tags, overgeslagen koptekstniveaus en lege kopteksten. Dit geeft u een duidelijk beeld van het documentoverzicht van uw pagina en helpt u structurele problemen op te lossen die zowel SEO als toegankelijkheid beïnvloeden.