De koptekst-hiërarchie in WordPress oplossen

Kopteksten geven uw pagina-inhoud een duidelijke, logische structuur. Het zijn niet alleen visuele elementen om tekst groter te laten lijken. Schermlezers gebruiken ze om gebruikers door secties te laten navigeren, en zoekmachines gebruiken ze om de onderwerphiërarchie van uw content te begrijpen. Een gebroken koptekststructuur verwart zowel mensen als machines, dus het correct krijgen ervan loont voor toegankelijkheid, SEO en algemene leesbaarheid.

Hoe een correcte koptekst-hiërarchie eruitziet

Beschouw uw kopteksten als een outline of inhoudsopgave. Elk niveau vertegenwoordigt een nestingdiepte, en u moet nooit een niveau overslaan terwijl u afdaalt. Zo ziet een correcte structuur eruit:

H1: Paginatitel (slechts één per pagina)
  H2: Eerste hoofdsectie
    H3: Subsectie van de eerste hoofdsectie
    H3: Andere subsectie
      H4: Detail binnen de subsectie
  H2: Tweede hoofdsectie
    H3: Subsectie van de tweede hoofdsectie
  H2: Derde hoofdsectie

Merk op hoe elk koptekstniveau is opgenomen binnen het niveau erboven. U zou niet van H2 direct naar H4 springen, net zoals u geen sub-subsectie zou maken zonder eerst een subsectie. Teruggaan omhoog is prima: na een H4 kunt u terug naar een H2 voor een nieuwe hoofdsectie.

Veelvoorkomende WordPress-koptekstfouten

De meeste problemen met koptekst-hiërarchie in WordPress komen voort uit een paar terugkerende patronen:

• Thema gebruikt verkeerde tags voor de paginatitel: Sommige thema's geven de bericht- of paginatitel uit als een H2 in plaats van een H1, of ze gebruiken de sitenaam als H1 op elke pagina. Dit betekent dat uw werkelijke contenttitel wordt gedegradeerd, en veel pagina's hebben mogelijk helemaal geen goede H1.
• Meerdere H1-tags op één pagina: Dit gebeurt meestal wanneer het thema de sitetitel als H1 in de koptekst uitgeeft, en de paginatitel ook een H1 is. Elke pagina moet precies één H1 hebben. Op binnenpagina's moet de sitenaam een <p>, <span> of gestileerde <div> zijn, geen H1.
• Koptekstniveaus overslaan: Springen van H2 naar H4 of van H1 naar H3 gebeurt wanneer auteurs koptekstniveaus kiezen op basis van hoe ze er visueel uitzien in plaats van hun logische betekenis. Als de H3 er qua grootte goed uitziet, kiezen ze H3, zelfs als er geen H2 boven staat.
• Kopteksten gebruiken voor visuele styling: Auteurs gebruiken soms een H2 of H3 alleen omdat ze vetgedrukte, grote tekst willen voor een call-to-action of een sidebar-widgettitel. Dit zijn geen daadwerkelijke contentkopteksten en moeten in plaats daarvan met CSS-klassen worden gestileerd.
• Pagebuilder- en widgetkopteksten: Pagebuilders zoals Elementor en widgetgebieden voegen vaak kopteksten in op onverwachte niveaus. Een sidebar-widget kan een H3 gebruiken terwijl het contentgebied geen H2 heeft, waardoor een overgeslagen niveau ontstaat in de algehele paginahiërarchie.

Hoe u uw koptekst-hiërarchie controleert

Voordat u iets repareert, moet u zien hoe uw huidige koptekststructuur eruitziet. Hier zijn verschillende manieren om dat te doen:

• InspectWP: Voer een scan uit en kijk naar de contentsectie. InspectWP toont de volledige koptekst-hiërarchie van uw pagina, waardoor het gemakkelijk is om ontbrekende H1-tags, dubbele H1's, overgeslagen niveaus en andere problemen op te sporen.
• HeadingsMap browser-extensie: Beschikbaar voor Chrome en Firefox, deze extensie toont een boomstructuur van alle kopteksten op de huidige pagina. Hij markeert structurele fouten zoals overgeslagen niveaus met waarschuwingspictogrammen.
• WAVE accessibility tool: De WAVE browser-extensie (wave.webaim.org) evalueert uw pagina op toegankelijkheidsproblemen, inclusief problemen met de koptekststructuur. Het plaatst pictogrammen direct over de pagina waar problemen worden gevonden.
• Handmatige inspectie: Klik met de rechtermuisknop op de pagina, selecteer "Paginabron bekijken" (Ctrl+U) en zoek naar <h1, <h2, <h3, enzovoort. Dit toont u de ruwe koptekst-tags in de HTML.

Kopteksten repareren in de Gutenberg-blokeditor

Als u de WordPress-blokeditor (Gutenberg) gebruikt, is het corrigeren van koptekstniveaus eenvoudig:

1. Klik op een willekeurig Heading-blok in uw content.
2. In de blokwerkbalk bovenaan ziet u het huidige koptekstniveau (bijvoorbeeld "H3"). Klik erop om een dropdown te openen.
3. Selecteer het juiste koptekstniveau in de dropdown. Onthoud dat secties van uw content moeten beginnen met H2 (omdat H1 is gereserveerd voor de paginatitel) en subsecties H3 moeten gebruiken.
4. De blokeditor bevat nu een functie "Documentoverzicht". Klik op het info-pictogram (cirkel met "i") in de bovenste werkbalk om de koptekststructuur van het hele bericht te zien. Hij waarschuwt u voor overgeslagen niveaus.

Als u de Classic Editor gebruikt, schakel over naar het tabblad "Tekst" om de ruwe HTML te zien en de koptekst-tags handmatig te wijzigen.

Kopteksten repareren in thema-templates

Als uw koptekstproblemen voortkomen uit het thema in plaats van de content, moet u de themabestanden bewerken. Gebruik altijd een child theme zodat uw wijzigingen thema-updates overleven.

Veelvoorkomende oplossingen omvatten het wijzigen van de sitetitel-tag op binnenpagina's:

// In header.php van uw child theme
<?php if (is_front_page()) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>

En zorgen dat de berichttitel H1 gebruikt op single post-/paginatemplates:

// In single.php of content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>

Op archiefpagina's (categorie-, tag-, datumarchieven) moet de archieftitel doorgaans de H1 zijn, en afzonderlijke berichttitels binnen de loop moeten H2 zijn.

Kopteksten stylen zonder de hiërarchie te breken

Als u tekst er visueel uit wilt laten zien als een koptekst maar het is geen structurele koptekst (bijvoorbeeld een promotionele banner of een widgettitel), gebruik dan een CSS-klasse in plaats van een koptekst-tag:

.heading-style {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

Pas deze klasse toe op een <p>- of <div>-element. Omgekeerd, als u wilt dat een echte koptekst er kleiner of anders uitziet dan de standaard, style hem dan met CSS in plaats van een lager koptekstniveau te kiezen voor uiterlijk.

Toegankelijkheidsimpact van koptekst-hiërarchie (WCAG 1.3.1)

De Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1 vereist dat informatie, structuur en relaties die via presentatie worden overgebracht programmatisch bepaalbaar zijn. Kopteksten zijn een belangrijke manier waarop schermlezergebruikers webpagina's navigeren. Volgens WebAIM's gebruikersonderzoek onder schermlezergebruikers gebruikt meer dan 67% van de schermlezergebruikers kopteksten als hun primaire methode om content op een pagina te vinden. Wanneer u koptekstniveaus overslaat of kopteksten gebruikt voor visuele styling, kunnen schermlezergebruikers uw content niet betrouwbaar navigeren. Het corrigeren van uw koptekst-hiërarchie is een van de eenvoudigste en meest impactvolle toegankelijkheidsverbeteringen die u kunt aanbrengen.

SEO-impact van een goede koptekststructuur

Google heeft bevestigd dat het kopteksten gebruikt om de inhoud en structuur van een pagina te begrijpen. Hoewel kopteksten alleen uw rankings niet zullen maken of breken, leveren ze belangrijke contextsignalen. Een H2 met "Installatiehandleiding" vertelt Google dat de volgende sectie installatie behandelt. Goed geneste kopteksten helpen Google ook bij het genereren van featured snippets en sitelinks. Het overslaan van niveaus of het inconsistent gebruiken van kopteksten zendt gemengde signalen over uw contentstructuur en kan zoekmachines beletten om uw paginaonderwerpen nauwkeurig te interpreteren.

Verifieer uw koptekst-hiërarchie met InspectWP

Voer na het maken van correcties een nieuwe InspectWP-scan uit. De contentsectie toont elke koptekst op uw pagina op volgorde, samen met het niveau ervan. U zou een enkele H1 moeten zien, gevolgd door H2's voor hoofdsecties, H3's voor subsecties en geen overgeslagen niveaus. Als u resterende problemen ziet, ga terug naar de editor of het thema-template en pas dienovereenkomstig aan.