Du har skrevet en nettside med masse tekst, men besøkende scroller forbi uten å stoppe. Teksten ser ut som en uendelig vegg. Det som mangler er HTML-overskrifter. Med h1 til h6 deler du innholdet i tydelige seksjoner som leseren kan skanne på sekunder, og som søkemotorer bruker til å forstå hva siden handler om.
Seks nivåer fra h1 til h6
HTML gir deg seks overskriftsnivåer. h1 er det viktigste og vises størst. h2 er neste nivå, h3 er under det igjen, og slik fortsetter det ned til h6. Tenk på det som et innholdsfortegnelse i en bok: h1 er boktittelen, h2 er kapitlene, h3 er underkapitlene.
I praksis bruker de fleste nettsider bare h1, h2 og h3. Noen bruker h4 for ekstra underpunkter. h5 og h6 dukker sjelden opp, og hvis du trenger dem, er det ofte et tegn på at innholdet bør deles opp i separate sider i stedet.
Syntaksen er enkel. Du skriver teksten mellom en åpningstagg og en lukketagg:
<h1>Hovedoverskrift</h1>
<h2>Underoverskrift</h2>
<h3>Tredje nivå</h3>
Nettleseren gir hver overskrift en standardstørrelse og gjør teksten fet. Med CSS kan du endre utseendet helt, men den semantiske betydningen forblir den samme. Det betyr at en h3 alltid forteller nettleseren at teksten er et tredje nivå i hierarkiet, uansett hvordan den ser ut visuelt.
Bare én h1 per side
Hver side bør ha nøyaktig én h1. Den beskriver hva hele siden handler om. Tenk på den som sidens tittel. Har du to h1-er, sender du et forvirrende signal til søkemotorer: hva er egentlig hovedtemaet? Bruk h2 for de andre hovedseksjonene.
En vanlig feil er å bruke h1 på logoen i headeren. Da får hver eneste side på nettstedet en h1 som sier firmanavnet, og den faktiske sidetittelen ender opp som h2. Bruk heller et vanlig lenkeelement for logoen, og la h1 være reservert for innholdet på den spesifikke siden.
Hold rekkefølgen riktig
Overskriftene skal følge en logisk rekkefølge. Etter h1 kommer h2. Etter h2 kan du bruke h3. Du hopper aldri rett fra h1 til h3 uten en h2 imellom. Tanken er at hierarkiet skal gi mening selv uten resten av teksten.
Feil rekkefølge er et av de vanligste problemene når folk velger overskriftsnivå basert på utseende. Du vil ha mindre tekst, så du bruker h4 i stedet for h2. Nettleseren bryr seg ikke, men skjermlesere og søkemotorer leser overskriftshierarkiet bokstavelig. Et hopp fra h2 til h4 skaper et hull i strukturen. Bruk CSS til å endre størrelse, ikke overskriftsnivåer.
HTML-overskrifter og tilgjengelighet
Skjermlesere, som brukes av blinde og svaksynte, navigerer nettsider gjennom overskriftene. Brukeren kan hoppe direkte fra h2 til h2 for å finne relevant innhold, på samme måte som seende brukere skanner visuelt. Har du ikke overskrifter, eller har du dem i feil rekkefølge, blir navigeringen meningsløs.
Ifølge WebAIMs undersøkelse av skjermleserbrukere er overskriftsnavigering den vanligste metoden for å finne innhold på en side. Det betyr at riktige HTML-overskrifter med h1 og h2 ikke bare handler om visuell struktur. De er en forutsetning for at alle brukere kan navigere innholdet ditt.
Overskrifter gjør at besøkende blir
Studier viser at de fleste besøkende bestemmer seg innen fem sekunder for om de vil bli eller forlate en side. De leser ikke teksten. De skanner overskriftene. Hvis overskriftene dine tydelig viser hva innholdet dekker, finner besøkende raskt det de leter etter. Uten overskrifter ser de bare en vegg av tekst og klikker seg videre.
Skriv overskrifter som oppsummerer innholdet under dem. "Fordeler" er vagt. "Tre fordeler med serverside-rendering" er konkret. Jo mer spesifikke overskriftene er, jo lettere er det for leseren å avgjøre om de vil lese videre.
Søkemotorer leser overskriftene dine
Google bruker overskrifter som signaler for å forstå hva en side handler om. Ordene i h1 og h2 veier tyngre enn vanlig brødtekst. Det betyr at du bør bruke relevante søkeord i overskriftene, men på en naturlig måte. En h2 som lyder "Slik bruker du HTML-overskrifter riktig" fungerer godt. En h2 som sier "HTML overskrifter h1 h2 h3 h4 h5 h6 beste overskrift" er søkeordspamming og gir dårligere rangering.
Sammenhengen mellom overskrifter og on-page SEO er direkte. Søkemotorer kartlegger hierarkiet for å forstå hvilke temaer siden dekker, og de forventer at overskriftene stemmer overens med resten av innholdet. Har du en h2 som lover "Installasjon", men teksten under handler om prising, mister du troverdighet i Googles øyne.
Vanlige feil å unngå
Bruke overskrifter bare for å gjøre tekst stor. Overskriftstagger er ikke formateringsverktøy. Trenger du stor tekst uten semantisk betydning, bruk CSS. Hvis du bruker h3 fordi du liker størrelsen, ødelegger du hierarkiet for skjermlesere og søkemotorer.
For mange overskriftsnivåer. Trenger du h5 og h6, bør du vurdere om innholdet er for komplekst for én side. Del det heller opp i flere sider med enklere struktur. De fleste sider klarer seg fint med h1, h2 og h3.
Overskrifter uten innhold under. En overskrift skal alltid følges av tekst. En h2 etterfulgt direkte av en ny h2 gir inntrykk av at noe mangler, og forvirrer både lesere og søkemotorer.
Neste steg
Overskrifter gir teksten struktur, men du trenger mer enn overskrifter for å organisere innholdet godt. HTML-lister lar deg presentere punkter og trinnvise instruksjoner på en ryddig måte. Når du vil koble sider sammen, lærer du å bruke a-taggen for lenker. Og for en bredere forståelse av hvordan overskrifter påvirker synligheten din i Google, kan du lese om SEO-titler.
Denne artikkelen er basert på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du også avsnitt, tekstformatering og dokumentstruktur i praksis.
