SEO-koppenstructuur

Hoe deze controle werkt

Scanaris telt de <h1>-tags in de HTML van je pagina. Het juiste resultaat is precies één. Is er geen, dan opent hij een bevinding met gemiddelde ernst: noch Google noch een schermlezer weet wat het hoofdonderwerp is. Zijn er twee of meer, dan opent hij er een met lage ernst en de telling: meerdere hoofdkoppen verwateren waar de pagina over gaat. Alleen de geserveerde HTML wordt bekeken, zonder JavaScript uit te voeren, en alleen de gescande pagina.

Waarom dit belangrijk is

De <h1> is de kop van de pagina, het eerste wat een schermlezer aankondigt en een van de duidelijkste signalen die Google heeft om het onderwerp te begrijpen. Een pagina zonder h1 is als een artikel zonder titel: de zoekmachine moet het uit de rest afleiden. Meerdere h1's zijn geen HTML-fout, maar ze verspreiden dat signaal: heeft je productpagina de productnaam, de slogan en "Beoordelingen" allemaal als h1, dan is geen van de drie het onderwerp. En het is de basis van de rest van de hiërarchie: h2's delen de inhoud in secties, h3's onderverdelen, en zo navigeert wie toetsenbord of schermlezer gebruikt en zo knippen AI-assistenten je tekst op om hem te citeren.

Waarom het gebeurt

Het meest voorkomende geval van nul h1's is het ontwerp: de grote tekst in de hero is een div met grootteklassen, of een p, omdat wie het bouwde aan het uiterlijk dacht en niet aan de structuur. In single-page apps rendert JavaScript de h1 en staat hij niet in de initiële HTML. Het geval van meerdere h1's komt meestal van componenten: elke kaart, elke sectie of elke widget brengt zijn eigen h1 mee, of het logo is "voor de SEO" in een h1 gewikkeld, wat een advies uit 2008 is.

Hoe je het oplost

• Eén h1 per pagina met het hoofdonderwerp, zichtbaar en dicht bij het begin van de inhoud. Op de homepage wat je doet; bij een artikel de titel; bij een product de naam.
• Het logo is geen h1. Het is een link naar de homepage met de merknaam als tekst of als alt.
• De rest in h2 en h3, zonder niveaus over te slaan: een h3 hoort in een sectie met een h2. Interesseert een tag je alleen om de grootte, gebruik dan een CSS-klasse, geen kopniveau.
• In componenten neem je het niveau als prop aan (<Heading :level="2">) in plaats van het binnenin vast te zetten, zodat dezelfde kaart op de ene pagina h2 en op de andere h3 kan zijn.
• In SPA's render je minstens de paginastructuur op de server of gebruik je prerendering; anders ziet Google een lege pagina voordat het je JavaScript uitvoert.

Controleer of het opgelost is

curl -s https://jouwdomein.nl | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Er moet precies één regel met h1: beginnen, gevolgd door de h2- en h3-hiërarchie in logische volgorde. Komt er niets uit, dan rendert JavaScript de inhoud en ziet Google hem in eerste instantie ook niet.

Veelgestelde vragen

HTML5 staat één h1 per sectie toe. Waarom wordt het gemeld?

De specificatie stond het toe met het "outline"-algoritme per sectie, maar geen enkele browser of schermlezer heeft dat ooit geïmplementeerd, en de specificatie schrapte het in 2022. In de praktijk blijft één h1 per pagina de aanbeveling van Google en van de toegankelijkheidsrichtlijnen.

Mijn h1 is met CSS verborgen zodat het ontwerp strak blijft.

Een h1 die met display: none verborgen is, wordt door Google noch door schermlezers gelezen. Moet hij onzichtbaar maar leesbaar zijn, gebruik dan een klasse voor visueel verborgen tekst (sr-only); maar vraag je af of de hoofdkop van de pagina echt verborgen hoort te zijn.

Worden de andere niveaus bekeken?

Deze controle telt alleen h1's. Lege koppen worden gedetecteerd door toegankelijkheid, en de tabbladtitel, die niet hetzelfde is als de h1 hoewel ze meestal op elkaar lijken, wordt bekeken door SEO-metadata.