Hopp til innholdet

cjohansen.no

Hvor er din h1?

Det har lenge stått klart for meg at enhver webside bør ha én og kun én <h1>. Under denne bør det brukes <h2>-<h6> på et hierarkisk vis. Videre har det stått like klart for meg at <h1> bør brukes på sidens hovedtema, og gjerne samsvare med både URL og innhold i <title> for maks gevinst på søkemotorer. Det viser seg at ikke hele verden er helt enig med meg. Tenke seg til.

Hvor mange <h1>?

Min praksis med kun én <h1> per side er selvfølgelig ikke den eneste. Men denne oppfatningen har relativt bredt fotfeste. Spesifikasjonen sier ikke noe spesifikt om antall headinger i det hele tatt, så hele problemstillingen er på et flytende plan, og det eneste fasitsvaret man egentlig kan finne er at "etter alt å dømme er det helt greit med flere <h1> på en side". Alikevel gir det for meg mening å bruke kun én <h1> på samme måte som vi bruker kun ett rot-element (<html>).

<h1> i HTML-spesifikasjonen

Når vi skal vurdere hva som er den beste måten å bruke et HTML-element på er det greit å begynne i "bibelen", nemlig i HTML 4-spesifikasjonen. Om bruk av overskriftselementene <h1>-<h6> sier spesifikasjonen: " A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."

Spesifikasjonen legger altså opp til at hver heading innleder en (under)seksjon, og headingen er en passende tittel til innholdet i denne. I så måte finner vi støtte for at headingene bør brukes hierarkisk for å ha maksimal effekt. Men det står ingenting om antall <h1>, ei heller hva som er godt <h1>-innhold. Så lenge innholdet beskriver seksjonen headingen innleder er det bra.

Hvilken tekst putter du en <h1> rundt?

Hvor vil jeg egentlig med dette? Vel, hvis vi antar at de fleste er enige om at det er god praksis med én og kun én <h1> per side så står vi igjen med diskusjonen om hvilket innhold som skal puttes i <h1>. Og det er her jeg finner avvikende praksis fra min egen hos mange mennesker jeg har stor faglig respekt for. De to praksisene jeg finner i bruk er stort sett <h1> rundt logo/nettstedstittel og <h1> rundt sidetittel.

<h1> og søkemotorer

<h1> sammen med <title> har tradisjonelt blitt sett på som sterke verktøy for å øke synligheten i søkemotorene. Et slikt argument taler til fordel for å bruke <h1> rundt sidetittelen. Hvis vi tar denne artikkelen som eksempel mener jeg altså tittelen på selve artikkelen ("Hvor er din h1?").

På grunn av misbruk er det nå få søkemotorer som gir noen særlig effekt for god bruk av meta keywords. Meta description brukes fortsatt til søkemotorresultatsider i enkelte tilfeller, men det er en bred oppfatning at de ikke gir særlig gevinst i selve indekseringen og rangeringen. Det kan se ut til at tidligere viktige <h1> også nå prioriteres lavt grunnet mye nøkkelordstapping.

Hvis <h1> ikke er en viktig faktor i indeksering og rangering i søkemotorer står man friere til å velge hvor man vil bruke den. Man trenger ikke å gå bort ifra sin foretrukne bruk i frykt for å tape plassering. (Merk at å gjøre slike avpasninger ikke er "søkemotorjuks", men å forholde seg til realitetene. Det er her også snakk om semantikk/tolkning på et høyst detaljert nivå, logo mot artikkeltittel i <h1> er begge helt ålreit semantisk HTML).

SEOMOZ ser ut til å mene at <h1> idag har langt mindre betydning enn den tidligere hadde. Det betyr ikke nødvendigvis at den er verdiløs i søkemotorhenseende. Det foreslås at <h1> kan gi en ellers godt optimalisert side et ekstra boost som kan plassere den over en knivende konkurrent.

Semantikk

Så denne semantikken da. Å bruke <h1> semantisk gir oss ikke mange nye hint, det forteller oss bare at vi må bruke <h1> til en overskrift som på en skikkelig måte beskriver seksjonen den innleder. Bruker vi kun én <h1> på en side betyr dette at headingen må inneholde en tittel som omfavner hele resten av dokumentet.

I så måte kan vi diskutere hva som er dokumentet. Er menyene en del av dokumentet? Er siden og dokumentet det samme? Eller er siden hele websiden med header, menyer og resten av rammeverket, i tillegg til artikkelen eller lignende som vi kan se på som dokumentet? Hvis man har slått seg på å bruke kun én <h1> per side er det hvordan man definerer side og dokument som legger føringer på hvordan man bruker <h1>.

Hvem gjør hva?

Det som startet tankene som endte opp i dette innlegget var en liten rundtur for å se på kildekode. Jeg gikk innom noen nettsteder fra mennesker jeg respekterer faglig for å se hva de gjorde. Jeg fant overraskende mange sider som bruker <h1> rundt logoen eller selve tittelen på nettstedet.

A List Apart

A List Apart bruker <h1> rundt nettstedsnavnet på alle sider. I tillegg bruker de <h1> rundt artikkeltitler når du er inne på fullvisning av artikkelen. Dette gir i min mening en litt merkelig effekt siden man i effekt sidestiller "A List Apart for people who make websites" med artikkeltittelen. 

<h1 id="masthead">
    <a href="/"><img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a>
</h1>

Jeffrey Zeldman

Jeffry Zeldman, som forøvrig også er tett tilknyttet nevnte A List Apart, bruker <h1> kun rundt nettstedstittelen, og har dermed samme <h1> på alle sider. 

<h1>
 <a href="/" title="Jeffrey Zeldman Presents: Web design news &amp; info since 1995">
  Zeldman: Web design news
 </a>
</h1>

Eric Meyer

Eric Meyer gjør som sin venn Jeffrey Zeldman og bruker <h1> rundt nettstedstittelen. 

<h1><a href="/"><span>meyerweb</span>.com</a></h1>

Yahoo!

Yahoo har gått for en rimelig spesiell løsning. De har pakket logoen sin inn i <h1>, men i tillegg har de et relativt langt Javascript inne i elementet(!) Selvom Yahoo! sannsynligvis ikke trenger å rangere godt i egen søkemotor burde en søkemotor i min mening gå foran med et godt eksempel.

W3C

W3C bruker <h1> rundt nettstedstittelen på forsiden, men deretter bruker de <h1> rundt sidetittelen på flere av sidene, eksempelvis forsiden til HTML 4.0-spesifikasjonen, eller liste-siden i nevnte spek. 

<h1 id="logo">
    <img alt="The World Wide Web Consortium (W3C)" height="48" width="315" src="/Icons/w3c_main" />
</h1>
<h1 id="title" class="title">XHTML2 Working Group Home Page</h1>
<h1 align="center"><a name="h-10">10</a> Lists</h1>

Wikipedia

Wikipedia bruker <h1> rundt tittelen på artikkelen. 

<h1 class="firstHeading">Mastodon</h1>

Norske nettsteder/blogger

Uten at dette er en stor undersøkelse kikket jeg fort rundt på noen blogger "i nærheten", dvs i min bevissthet. Bekkelund.net bruker <h1> rundt sidetittelen på diverse undersider, med unntak av bloggen der han ikke bruker <h1> i det hele tatt. Kjernedryss.no bruker <h1> rundt artikkeltitler på artikkelsider, men ikke på forsiden. Mange andre blogger basert på standardmaler fra Wordpress eller Blogger.com bruker ofte <h1> rundt nettstedstittelen.

Avgjørelser, avgjørelser

Så, hvilken variant skal man bruke? Det har vel strengt tatt ikke veldig mye å si. Dette blir jo en avveining på detaljnivå. Som jeg har nevnt tidligere er det i hovedsak to faktorer å ta hensyn til - hva man mener er riktig og hvordan dette blir lest av andre. Det er helt mulig å bruke begge disse variantene (og andre) og fortsatt ha fin semantisk HTML, som jo er det viktigste.

Hvis man faller på å kun bruke én <h1> per side virker det for meg ufornuftig å "kaste bort" denne på logoen eller nettstedstittelen og dermed i effekt kun ha én eneste <h1> på tvers av hele nettstedet.

Her på cjohansen.no har jeg valgt å bruke <h1> rundt artikkel-titlene (sidetitlene). I tillegg bruker jeg <h1> rundt nettstedstittelen på forsiden. Forsiden er den eneste siden hvor "Christian Johansen om webutvikling, musikk og film" virkelig er temaet for siden. De andre sidene dekker kun deler av dette overordnede temaet, og har derfor sine egne sider.

Hvor bruker du din <h1>? Og hvorfor?

Publisert 10. november 2007 under html.

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens