Overskriftskoder (H1-H6) og hierarki

Hvad er overskriftskoder?

Overskriftskoder fra H1 til H6 er HTML-koder, der definerer indholdshierarkiet og afsnitsstrukturen på en side. H1 repræsenterer den øverste overskrift, H2 de primære afsnit, H3 underafsnittene, og så videre. Selvom disse tags vises visuelt som større/fed skrift i browseren, er deres egentlige formål ikke visuelt, men strukturelt: Ligesom indholdsfortegnelsen i en bog udgør de sidens logiske skelet.

Dette hierarki er ikke blot en struktur, der læses af det menneskelige øje, men også en træstruktur, som browsere og hjælpeteknologier (såsom skærmlæsere) »forstår« programmatisk. En bruger af en skærmlæser navigerer typisk ved at springe fra overskrift til overskrift på siden; derfor forstyrres navigationen, hvis hierarkiet brydes.

Overskriftsniveauerne gør samtidig en sides lange indhold let at overskue: I stedet for at læse siden linje for linje finder brugeren det afsnit, vedkommende søger, ved at skimme overskrifterne. Dette kan have en positiv indvirkning på både brugeroplevelsen og den tid, der bruges på siden.

Hvorfor er det vigtigt?

Den rigtige overskriftshierarki gør det lettere for søgemaskiner at forstå sidens emnemæssige sammenhæng og underemner, samtidig med at den sikrer, at brugere, der anvender skærmlæsere, kan navigere på siden. Google udleder af overskriftsstrukturen, hvilket afsnit der dækker hvilket underemne på en lang side; dette kan især hjælpe med at udvælge det rigtige afsnit i udvidede søgeresultater som f.eks. »featured snippets«.

En uregelmæssig eller mangelfuld hierarki fører til uklarhed i indholdsstrukturen og tilgængelighedsproblemer. For eksempel kan det at springe direkte fra H2 til H4 forvirre en bruger af en skærmlæser, der måske tænker: »Mangler der et mellemniveau her, eller er afsnittet slut?«

I ekstreme tilfælde kan forskellige komponenter i single-page-applikationer eller skabelonsystemer med mange komponenter uafhængigt af hinanden gengive deres egne H1-overskrifter, hvilket ubevidst kan føre til, at der opstår flere H1-overskrifter på siden. I denne type tekniske arkitekturer er det vigtigt at styre overskriftsniveauerne fra et centralt sted.

Hvordan løses det?

• Der bør kun være én H1 på siden; dette er typisk sidens hovedoverskrift, og den skal klart sammenfatte sidens emne.
• Brug overskrifterne i rækkefølge: H1 → H2 → H3, uden at springe niveauer over.
• Brug overskrifterne til at definere indholdsstrukturen, ikke til visuel størrelse; brug CSS, hvis du ønsker stor/fed tekst, og undgå at vælge det forkerte overskriftsniveau.
• Hver H2/H3 skal være en egentlig afsnitsoveroverskrift og må ikke være dekorativ tekst eller et slogan.
• Brug nøgleord naturligt i overskrifterne; fyld ikke hver overskrift med nøgleord på en kunstig måde.
• På lange sider skal overskrifterne skrives på en sammenhængende og forudsigelig måde, så de danner en indholdsfortegnelse; dette hjælper både brugeren og søgemaskinen.
• Hvis du bruger et tema eller et komponentbibliotek, skal du i en central stilguide dokumentere, hvilket overskriftsniveau de forskellige komponenter (header, hero, kort, footer) bruger.
• Når du ændrer sidens layout, skal du med jævne mellemrum kontrollere med browserens udviklerværktøjer (DOM-træet), om overskriftshierarkiet er blevet forstyrret.
• På blog- eller nyhedssider skal du oprette en arbejdsgang for indholdsstyring, hvor artiklens overskrift (H1) holdes adskilt fra SEO-titlen i et separat felt; de to skal ikke være låst sammen.
• På websteder med flere forfattere kan forskellige redaktører have forskellige vaner; derfor øger det konsistensen at nedfælde reglerne for overskriftshierarkiet i en stilguide.

Eksempel

<h1>SEO-guide</h1>
<h2>Teknisk SEO</h2>
<h3>Sidehastighed</h3>
<h2>Indholds-SEO</h2>
<h3>Søgeordsanalyse</h3>

Dårligt eksempel: <h1>Velkommen</h1> derefter direkte <h4>Vores produkter</h4> — H2- og H3-niveauerne er sprunget over, og hierarkiet er brudt.

Hyppige fejl

• At bruge mere end én H1 på siden (f.eks. både i logoområdet og i indholdet).
• Slet ikke at bruge H1.
• At bruge overskriftskoder udelukkende for at opnå en stor/fed skrift og dermed ignorere hierarkiet.
• At springe et niveau over ved at gå direkte fra H2 til H4.
• Når der vises en advarsel om "flere H1-overskrifter" eller "manglende H1-overskrifter" i rapporten fra Seoraporu.co, skal dette rettes på skabelon-/temaplan, da det som regel er et problem, der går igen på alle sider.