Checker voor kopstructuur: H1 tot H6-overzicht uit HTML | We.Inc
Plak HTML en zie de H1- tot H6-structuur als boom, met overgeslagen niveaus, ontbrekende of dubbele H1's en lege koppen gemarkeerd. Draait in uw browser; er wordt niets geüpload.
Checker voor kopstructuur
Plak de HTML van een pagina en deze checker tekent de kopstructuur als ingesprongen boom, van h1 tot h6, inclusief elementen met role="heading". Hij markeert overgeslagen niveaus zoals een h2 gevolgd door een h4, een ontbrekende of dubbele h1, en lege koppen. Het parsen gebeurt in uw browser, dus de code verlaat uw apparaat nooit.
Wat de checker markeert
Controle
Voorbeeld
Waarom het ertoe doet
Overgeslagen niveau
h2 direct gevolgd door h4
Gebruikers van schermlezers raken kwijt waar ze zijn
Geen h1
Pagina begint bij h2
De pagina heeft geen hoofdkop
Meer dan één h1
Logo en titel allebei h1
Eén h1 hoort de pagina te benoemen
Lege kop
<h3></h3> of alleen een icoon
Wordt voorgelezen zonder iets te zeggen
Eerste kop is geen h1
h3 vóór de h1
De structuur begint halverwege
Met koppen scannen mensen die een schermlezer gebruiken een pagina, en ze geven zoekmachines de vorm van uw inhoud. Plak hieronder de HTML van een pagina of component, uit de paginabron of uw editor, en de structuur verschijnt met elk probleem gemarkeerd op de regel waar het optreedt.
Kopieer de HTML van uw pagina, bijvoorbeeld via de paginabron, en plak die in het vak. Of laad het voorbeeld om de controles te zien.
De checker leest elke h1 tot h6 en elk element met role="heading" in documentvolgorde.
Lees de boom: het inspringen volgt het niveau en waarschuwingen staan naast de kop die ze veroorzaakte.
Herstel de markup, plak opnieuw en kopieer de schone structuur als platte tekst als u die voor een briefing wilt.
Gebruik kopniveaus voor structuur en CSS voor grootte. Als een h2 in een kaart te groot oogt, geef hem dan een andere stijl in plaats van er een h4 van te maken.
Meerdere niveaus terug omhoog gaan is prima: een h4 kan gevolgd worden door een h2 als er een nieuwe sectie begint.
Een logo is zelden de juiste h1. Geef de h1 aan de titel die deze pagina benoemt.
Plak bij single-page apps de gerenderde HTML, gekopieerd uit de elementinspector van uw browser, want de paginabron toont mogelijk een lege huls.
Tekst die met CSS verborgen is telt hier nog steeds mee, omdat de checker markup leest en uw stylesheet niet toepast.
Veelgestelde vragen
Is het fout om kopniveaus over te slaan?
De W3C-tutorial over koppen zegt dat het overslaan van niveaus verwarrend kan zijn en waar mogelijk vermeden moet worden, bijvoorbeeld een h2 die direct gevolgd wordt door een h4. Een sectie afsluiten en terug omhoog springen, zoals van h4 naar h2, is normaal.
Mag een pagina meer dan één h1 hebben?
HTML staat het toe, maar MDN raadt één h1 aan die de inhoud van de pagina beschrijft. Het oude idee dat elke sectie opnieuw bij h1 kon beginnen leunde op een document-outline-algoritme dat browsers niet gebruiken, dus deze tool waarschuwt bij een tweede h1.
Waarom kan ik niet gewoon een URL invoeren?
Dit is een statische pagina die in uw browser draait, en browsers verhinderen dat de ene site de HTML van een andere site leest. Door de code te plakken blijft de tool eerlijk en privé: er wordt nergens iets naartoe gestuurd.
Begrijpt hij role="heading"?
Ja. Een element met role="heading" wordt gelezen op zijn aria-level. Als aria-level ontbreekt, vallen browsers terug op niveau 2, dus de checker behandelt het als een h2 en markeert het ontbrekende attribuut.
Hebben koppen invloed op SEO?
Koppen beschrijven de structuur van uw inhoud voor elke lezer, ook voor zoekmachines. We beloven niets over posities; een duidelijke structuur is in de eerste plaats de moeite waard voor mensen.
De structuur lezen
Elke rij is één kop, ingesprongen volgens zijn niveau. Een gezonde structuur leest als een inhoudsopgave: één titel, een handvol h2-secties en waar nodig h3-subsecties daaronder.
Waarschuwingen wijzen naar de kop waar de sprong gebeurde, niet naar de kop ervoor. Herstel ze van boven naar beneden, want één verkeerd niveau vroeg op de pagina kan alles daaronder vreemd laten lijken.
Veelvoorkomende oorzaken
De meeste overgeslagen niveaus ontstaan doordat een kop gekozen wordt om zijn standaardgrootte. Templates en paginabouwers doen dit vaak in footers en kaarten. Andere komen van componenten die hergebruikt worden op pagina's met een andere structuur, daarom loont het om het kopniveau van een component instelbaar te maken.
Lege koppen bevatten meestal een icoon of een afbeelding zonder alt-tekst. Geef de afbeelding alt-tekst, voeg zichtbare tekst toe of gebruik er geen kop meer voor.
Kopniveaus in één oogopslag
Hoe de zes niveaus meestal op een webpagina worden gebruikt
Niveau
Typisch gebruik
De paginatitel, één keer
Hoofdsecties van de pagina
Subsecties binnen een h2
Details binnen een h3, zoals items in een lijst met functies
Zeldzaam; diepe documentatie en juridische tekst
Een kapotte structuur herstellen
Voor: niveaus gekozen om hun grootte
De kaarttitels springen van h2 naar h4 omdat h4 de juiste grootte leek te hebben.
Na: het juiste niveau, opnieuw gestyled met CSS
De kaarten gebruiken h3, het volgende niveau omlaag, en een class houdt ze klein.
Controleer uw koppen
Plak hieronder HTML. Die wordt in uw browser gelezen en nooit geüpload.
HTML om te controleren
Voorbeeld laden
Wissen
Structuur
{n} koppen, {w} waarschuwingen
Geen koppen gevonden. Plak de HTML van een pagina om de structuur te zien.
Geen problemen gevonden.
(leeg)
role=heading
Structuur kopiëren
Springt van h{from} naar h{to}
Nog een h1 op de pagina
Lege kop
Eerste kop is geen h1
De pagina heeft geen h1
role=heading zonder aria-level (gelezen als niveau 2)