Moni ajattelee, että otsikkotaso on ennen kaikkea visuaalinen valinta. H1 on isoin, H2 hieman pienempi ja H3 vielä pienempi. Käytännössä otsikko valitaan sen mukaan, miltä se näyttää sivulla. Tämä ajattelutapa on ymmärrettävä, mutta se johtaa helposti rakenteellisiin ongelmiin.
WordPressissä otsikkotasot eivät ole ensisijaisesti ulkoasua varten, vaan ne muodostavat sivun rakenteen. Otsikkotagit kertovat hakukoneille, ruudunlukijoille ja muille teknisille järjestelmille, miten sisältö jäsentyy ja mikä tieto on keskeistä. Kun otsikkotasoja käytetään loogisesti, sivu on helpompi lukea, ymmärtää ja löytää.
H1 ei siis ole vain isoin fontti. Se on sivun tärkein otsikko.
Mitä otsikkotasot oikeasti tarkoittavat
Otsikkotasot (H1–H6) muodostavat hierarkian, joka toimii ikään kuin sivun sisällysluettelona. Ne eivät kerro vain sitä, miltä teksti näyttää, vaan miten sisältö liittyy toisiinsa. H1 kertoo sivun pääaiheen, H2 jakaa sisällön pääosiin ja H3 tarkentaa näitä osioita edelleen.
Otsikkotasot hierarkiana
Hyvin jäsennellyllä sivulla rakenne etenee loogisesti. Ensin on yksi pääotsikko, jonka alla on muutama selkeä pääosio. Näiden pääosioiden sisällä voi olla tarkentavia alaotsikoita. Kun rakenne on johdonmukainen, lukija pystyy silmäilemään sivua nopeasti ja hahmottamaan kokonaisuuden ilman, että jokaista lausetta tarvitsee lukea alusta loppuun.
Jos tasot hyppivät sattumanvaraisesti tai niitä käytetään pelkän visuaalisen ilmeen vuoksi, rakenne hajoaa. Teksti saattaa näyttää hyvältä, mutta se ei enää kerro selkeästi, mikä on pääasia ja mikä sen tarkennus.
Kuinka monta H1-otsikkoa sivulla tulisi olla?
Useimmissa tapauksissa yksi H1-otsikko riittää – ja on suositeltava. H1 kertoo, mistä koko sivulla on kyse. Jos samalla sivulla on useita H1-otsikoita ilman selkeää syytä, pääviesti hämärtyy.
WordPressissä sivun tai artikkelin otsikko on yleensä automaattisesti H1. Tämän vuoksi sisältöä kirjoittaessa seuraava looginen taso on lähes aina H2. Silti näkee usein tilanteita, joissa sisältöön lisätään toinen H1 vain siksi, että sen ulkoasu tuntuu sopivalta.
Miksi useampi H1 voi olla ongelma
Hakukoneelle H1 on vahva signaali siitä, mikä on sivun keskeinen aihe. Jos samalla sivulla on useita H1-otsikoita, signaali heikkenee. Myös ruudunlukijaa käyttävä henkilö hahmottaa sivun ensisijaisesti H1-otsikon kautta. Kun niitä on useita ilman selkeää hierarkiaa, kokonaisuus muuttuu sekavaksi.
Tämä ei tarkoita, että useampi H1 olisi teknisesti aina virhe, mutta useimmilla yrityssivuilla yksi pääotsikko on selkein ja toimivin ratkaisu.
Rakenne ja ulkoasu eivät ole sama asia
Yksi yleisimmistä virheistä liittyy siihen, että otsikkotaso valitaan sen perusteella, miltä se näyttää. Jos H2 tuntuu liian pieneltä ja H3 näyttää sopivalta, saatetaan valita H3, vaikka sisällöllisesti kyseessä olisi H2-tason osio. Tällöin rakenne vääristyy ulkoasun vuoksi.
Suunnittele otsikkotasot osana visuaalista ilmettä
Tämä ongelma on helppo ehkäistä jo suunnitteluvaiheessa. Kun verkkosivuston typografia määritellään, kannattaa samalla määritellä myös otsikkotasot niin, että ne ovat sekä rakenteellisesti loogisia että visuaalisesti toimivia. H1:n tulee erottua selkeästi pääotsikkona, H2:n olla riittävän vahva väliotsikko ja H3:n toimia luontevana tarkennuksena.
Kun tasot näyttävät hyvältä valmiiksi, ei synny houkutusta käyttää niitä epäloogisesti pelkän ulkoasun vuoksi. Ulkoasua voi aina hienosäätää, mutta rakenteen tulisi pysyä johdonmukaisena.
Otsikkotasot WordPressissä ja sivunrakentajissa
WordPressin lohkoeditorissa otsikkotaso valitaan otsikkolohkon asetuksista. Siellä voi määrittää, onko kyseessä H2, H3 tai jokin muu taso. Visuaalinen koko ei automaattisesti määritä tasoa – se on erillinen valinta.
Sivunrakennustyökaluissa, kuten Elementorissa, otsikkotaso valitaan yleensä otsikkowidgetin asetuksista. Samalla voidaan säätää fonttikokoa, väriä, riviväliä ja muita typografisia ominaisuuksia. Tämä on etu, sillä se mahdollistaa ulkoasun muokkaamisen ilman, että rakenteesta tarvitsee tinkiä.
Rakenteellinen taso vs. visuaalinen tyyli
On tärkeää ymmärtää, että rakenteellinen otsikkotaso ja visuaalinen tyyli ovat kaksi eri asiaa. Rakenteellinen taso kertoo sisällön hierarkiasta. Visuaalinen tyyli määrittelee, miltä se näyttää. Kun nämä pidetään erillään, sivusto toimii paremmin sekä teknisesti että käyttäjän näkökulmasta.
Otsikkotasot, hakukoneoptimointi ja saavutettavuus
Selkeä otsikkohierarkia tukee hakukoneoptimointia, koska se auttaa hakukonetta ymmärtämään sivun rakenteen ja aiheen. Otsikkotasot eivät yksin ratkaise sijoituksia, mutta ne ovat osa loogisesti rakennettua sisältöä.
Saavutettavuuden näkökulmasta otsikkotasot ovat vieläkin keskeisempiä. Ruudunlukijaa käyttävä henkilö voi siirtyä otsikosta toiseen ja muodostaa käsityksen sivun rakenteesta nopeasti. Jos otsikkotasot hyppivät epäloogisesti tai niitä ei ole käytetty lainkaan, sivun hahmottaminen vaikeutuu merkittävästi.
Hyvin jäsennelty rakenne palvelee siis sekä hakukoneita että ihmisiä – eikä näitä kahta näkökulmaa tarvitse asettaa vastakkain.
Miten tarkistat oman sivusi otsikkorakenteen?
Yksinkertaisin tapa on katsoa sivua rakenteen näkökulmasta. Onko sivulla yksi selkeä pääotsikko? Jakautuuko sisältö loogisiin pääosiin? Onko alaotsikoita käytetty tarkentamaan, ei korvaamaan rakennetta?
Voit myös tarkistaa otsikkotasot editorissa tai erilaisilla SEO- ja saavutettavuustyökaluilla. Usein jo pelkkä tietoisuus asiasta riittää siihen, että otsikkorakenne alkaa hahmottua selkeämmin.
Rakenne ennen ulkoasua
Verkkosivun ulkoasu on tärkeä, mutta rakenne luo perustan. Kun otsikkotasot ovat loogiset ja visuaalisesti järkevästi suunnitellut, sisältö on helpompi lukea, ymmärtää ja löytää.
H1 ei ole vain isoin fontti. Se on sivun keskeisin rakenteellinen elementti – ja osa kokonaisuutta, joka tekee verkkosivusta toimivan.
