Otsikkotunnisteet (H1–H6) ja hierarkia

Mitä otsikkotunnisteet ovat?

Otsikkotunnisteet H1:stä H6:een ovat HTML-tunnisteita, jotka määrittelevät sivun sisällön hierarkian ja osioiden rakenteen. H1 edustaa ylimmän tason otsikkoa, H2 pääosioita, H3 alaosioita ja niin edelleen. Vaikka nämä tunnisteet näkyvät selaimessa visuaalisesti suurina tai lihavoituina, niiden pääasiallinen tarkoitus ei ole visuaalinen vaan rakenteellinen: ne muodostavat sivun loogisen luurangon, aivan kuten kirjan sisällysluettelo.

Tämä hierarkia ei ole pelkästään ihmisen silmälle luettavissa oleva järjestys, vaan myös puurakenne, jonka selaimet ja aputeknologiat (kuten näytönlukijat) ”ymmärtävät” ohjelmoidusti. Näytönlukijan käyttäjä selaa sivua yleensä siirtymällä otsakosta toiseen; siksi jos hierarkia hajoaa, myös selaaminen häiriintyy.

Otsikkotasot tekevät sivun pitkästä sisällöstä myös skannattavan: käyttäjä löytää etsimänsä osion silmäilemällä otsikoita sen sijaan, että lukisi sivua rivi riviltä. Tämä voi vaikuttaa myönteisesti sekä käyttökokemukseen että sivulla vietettyyn aikaan.

Miksi se on tärkeää?

Oikea otsikkohierarkia helpottaa hakukoneiden ymmärtämistä sivun aiheiden yhtenäisyydestä ja ala-aiheista sekä mahdollistaa näytönlukijaa käyttävien käyttäjien navigoinnin sivulla. Google päättelee otsikkorakenteesta, mikä osa pitkää sivua käsittelee mitäkin ala-aihetta; tämä voi auttaa erityisesti ”esillä olevien katkelmien” (featured snippet) kaltaisissa rikastetuissa tuloksissa oikean katkelman valinnassa.

Epäjärjestyksellinen tai puutteellinen hierarkia johtaa sisällön rakenteen epäselvyyteen ja esteettömyysongelmiin. Esimerkiksi siirtyminen suoraan H2-otsikosta H4-otsikkoon voi aiheuttaa näytönlukijaa käyttävälle käyttäjälle hämmennystä: ”Puuttuuko tässä välitaso vai onko osio päättynyt?”

Äärimmäisenä tapauksena yksisivuisissa sovelluksissa (single page application) tai monikomponenttisissa mallijärjestelmissä eri komponentit voivat renderöidä omat H1-otsikkonsa itsenäisesti, mikä voi johtaa siihen, että sivulle syntyy tahattomasti useampi kuin yksi H1-otsikko. Tällaisissa teknisissä arkkitehtuureissa on tärkeää hallita otsikkotasoja keskitetysti.

Miten tämä korjataan?

• Sivulla tulisi olla vain yksi H1-otsikko; se on yleensä sivun pääotsikko ja sen tulisi tiivistää sivun aihe selkeästi.
• Käytä otsikoita järjestyksessä: H1 → H2 → H3, tasoja ohittamatta.
• Käytä otsikoita sisällön rakenteen määrittämiseen, ei visuaalisen koon vuoksi; jos haluat suurta tai lihavoitua tekstiä, käytä CSS:ää, älä valitse väärää otsikkotasoa.
• Jokaisen H2/H3-otsikon tulisi olla todellinen osion otsikko, ei koristeellista tekstiä tai iskulausetta.
• Käytä avainsanoja otsikoissa luonnollisella tavalla; älä täytä jokaista otsikkoa väkisin avainsanoilla.
• Kirjoita pitkien sivujen otsikot johdonmukaisesti ja ennakoitavasti siten, että ne muodostavat sisällysluettelon; tämä auttaa sekä käyttäjää että hakukonetta.
• Jos käytät teemaa tai komponenttikirjastoa, dokumentoi keskitettyyn tyylioppaaseen, mitä otsikkotasoa eri komponentit (otsikko, hero, kortti, alatunniste) käyttävät.
• Kun muutat sivun asettelua (layout), tarkista säännöllisesti selaimen kehittäjätyökaluilla (DOM-puu), onko otsikkohierarkia häiriintynyt.
• Luo blogi- tai uutissivustoille sisällönhallinnan työnkulku, jossa artikkelin otsikko (H1) pidetään erillään SEO-otsikosta; älä linkitä niitä toisiinsa.
• Monikirjoittajisivustoilla eri toimittajilla voi olla erilaisia tapoja; siksi otsikkohierarkian sääntöjen kirjaaminen tyylioppaaseen lisää johdonmukaisuutta.

Esimerkki

<h1>SEO-opas</h1>
<h2>Tekninen SEO</h2>
<h3>Sivuston nopeus</h3>
<h2>Sisältö-SEO</h2>
<h3>Avainsanatutkimus</h3>

Huono esimerkki: <h1>Tervetuloa</h1> jälkeen suoraan <h4>Tuotteemme</h4> — H2- ja H3-tasot on ohitettu, hierarkia on rikkoutunut.

Yleisiä virheitä

• Useamman kuin yhden H1-otsikon käyttö samalla sivulla (esim. sekä logokentässä että sisällössä).
• H1-otsikon käyttämättä jättäminen kokonaan.
• Otsikkotunnisteiden käyttäminen vain ison/lihavoidun fontin saamiseksi, hierarkian sivuuttaminen.
• Tason ohittaminen siirtymällä suoraan H2:sta H4:ään.
• Kun Seoraporu.co-raportissa ilmestyy varoitus ”useampi kuin yksi H1” tai ”puuttuva H1”, tämä on korjattava mallin tai teeman tasolla, koska kyseessä on yleensä kaikilla sivuilla toistuva ongelma.