Miksi hakukoneoptimoinnissa pitää käyttää otsikkoja

Edelleen yksi keskeisin hakukoneoptimoinnin kulmakivi on käyttää sivulla otsikoita oikein. Jokaisella sivulla kuuluu olla yksi pääotsikko (h1, heading 1), kourallinen väli- ja alaotsikoita, tai alaotsioiden väliotsikoita.

Näillä h1, h2, h3, h4, h5 ja h6 otsikoilla on kaksi tarkoitusta hakukoneoptimoinnin kannalta.

  1. otsikot ovat painavampaa aluetta avainsanoille eli hakusanoille
  2. otsikot muodostavat yleiskuvauksen sivun muodosta ja sisällöstä

Näiden lisäksi sopiva väliotsikointi parantaa sivun luettavuutta ja käytettävyyttä. Ja Google on maininnut käytettävyyden olevan yksi tekijä hakukonesijoitusta arvioitaessa.

Avainsanoilla on hakukoneoptimoinnille isompi painoarvo otsikoissa

H1-h6-otsikon painoarvo on perua ajalta, kun hakukoneiden serverien laskentateho ja tallennuskapasiteetti oli niin pieni, että sivuista tallennettiin indeksiin pelkkiä avainsanoja.

Hakusanojen luettelu avainsanoissa (meta keyword)

Avainsanat löydettiin sivujen metatiedoista, mihin sivun tekijä kirjaimellisesti listasi erilaisia hakusanoja, joiden perusteella katsoi käyttäjän löytävän sisällön. Siis ihan samoin, miten yhä edelleen akateemisissa julkaisuissa tehdään.

<head>
<meta name="description" content="Otsikot painottavat avainsanoja ja luovat artikkelista rakenteellisen yleiskatsauksen.">
<meta name="keywords" content="hakukoneoptimointi, otsikot, otsakkeet, h1, h2, h3, h4">
<meta name="author" content="Jarno Oksanen">
</head>

Metatietojen lisäksi hakukoneet indeksoivat otsikkojen sisällön. Mitä isommasta otsikosta on kysymys, sitä painavamman sijan avainsana otsikossa saa.

Avainsanojen mainitseminen eri kokoisissa otsikoissa

Tämä ei välttämättä ole ihan totta, mutta riittävän lähellä, jotta voimme teoretisoida pienen ajatusleikin.

Jos otsikkotaso (h6) saa yhden pisteen, h5 kaksi ja niin edelleen, on h1-pääotsikko kuuden pisteen arvoinen.

Artikkeli, joka mainitsee sanan hakukoneoptimointi yhden kerran pääotsikossa (1×6=6 pistettä), nousee hakutuloksissa korkeammalle kuin sivu, jossa se on mainittu viisi kertaa h6-otsikossa (5×1=5 pistettä).

Aikojen saatossa webmasterit tunkivat meta keywordsit täyteen erilaisia sanoja riippumatta siitä liittyivätkö ne sisältöön vai ei.

Lisäksi sanat toistettiin varmuuden vuoksi ykköstason otsikossa, joka oli sijoitettu sivun alareunaan ja taustan kanssa samalla värillä. Siis ihmiselle näkymättömiin, mutta hakukoneelle varsin selvästi esillä.

Tämä ns keyword stuffing on synnyttänyt vastareaktiona sen, että suuri osa hakukoneista ei huomioi meta keywordseja lainkaan. Otsikkoja ei kuitenkaan voi jättää kokonaan huomioimatta, mutta niiden väärinkäytöstä kyllä rankaistaan.

Nykyään hakukoneiden suorituskyky on niin paljon korkeampi, että ne pystyvät indeksoimaan myös sivun leipätekstin sisällön, sekä ymmärtämään myös sanojen taivutusmuotoja ja synonyymeja.

Tämä on vähentänyt jopa yksittäisten hakusanojen merkitystä.

Otsikoiden merkitystä se ei kuitenkaan muuta. Päin vastoin, kun sisältökin indeksoidaan, juuri otsikoista löytyy ne keskeisimmät hakuja vastaavat avainsanat.

Otsikot määrittelevät sivun rakenteellisen yleiskatsauksen

Englannin kielinen kirjallisuus puhuu otsikoiden luomasta semantiikasta, mutta mielestäni sana on vähän väärä valinta. Itse puhuisin nimenomaisesti rakenteesta. Rakenne kuitenkin luo myös jonkinlaisen merkityksen viitekehyksen.

Asiaa on helpompi ajatella esimerkin kautta.

Tarkista sivun otsikkojen luoma rakenne Chris Pederickin Web Developerilla

Suurin osa hakukoneoptimoinnin työkaluista yksinkertaisesti listaa sivun otsikot. Esimerkiksi

  • H1: Miksi hakukoneoptimoinnissa pitää käyttää otsikkoja
  • H2: Avainsanoilla on hakukoneoptimoinnille isompi painoarvo otsikoissa
  • H2: Otsikot määrittelevät sivun rakenteellisen yleiskatsauksen
  • H3: Hakusanojen luettelu avainsanoissa (meta keyword)
  • H3: Avainsanojen mainitseminen eri kokoisissa otsikoissa
  • H3: Tarkista sivun otsikkojen luoma rakenne Chris Pederickin Web Developerilla
  • H3: Arkisto
  • H3: Kategoriat
  • H5: Yhteystiedot

Tämä ei kuitenkaan auta hahmottamaan rakennetta, vaan ainoastaan otsikkojen olemassaolon.

Chris Pederickin Web Developer -lisäosalla voi kuitenkin myös nähdä helposti sivun otsikoiden luoman hierarkian. Lisäosa on saatavilla Firefoxiin, Chromeen ja Safariin.

Web Developerissa on rutosti toiminnallisuuksia, mutta se mitä nyt etsitään löytyy kohdasta Information > View Document Outline

Nyt ylläoleva listaus näyttäisikin tältä:

  • H1: Miksi hakukoneoptimoinnissa pitää käyttää otsikkoja
    • H2: Avainsanoilla on hakukoneoptimoinnille isompi painoarvo otsikoissa
      • H3: Hakusanojen luettelu avainsanoissa (meta keyword)
      • H3: Avainsanojen mainitseminen eri kokoisissa otsikoissa
    • H2: Otsikot määrittelevät sivun rakenteellisen yleiskatsauksen
      • H3: Tarkista sivun otsikkojen luoma rakenne Chris Pederickin Web Developerilla
      • H3: Arkisto
      • H3: Kategoriat
        • H4: <ei mitään>
          • H5: Yhteystiedot

Nyt huomaamme ongelman.

Arkisto ja Kategoriat ovat merkitysyhteydeltään (eli semanttisesti) ylempitasoisen otsikon (”Otsikot määrittevät sivun rakenteellisen yleiskatsauksen”) alaisuudessa. Vaikka näillä ei sisällön puitteista ole mitään yhteistä.

Lisäksi Yhteystiedot liittyy jotenkin Kategorioihin. Ilmeisesti kategorioita on useammassa paikassa ja jokaiselle pitää kertoa puhelinnumero.

Lisäksi Kategoriat ja Yhteystiedot todennäköisesti löytyy joka ikiseltä sivulta uudestaan. Jolloin todennäköisesti koko sivusto puhuu paljon kategorisoimisesta ja tarjoaa yhteystietoja.

Kaiken lisäksi sivulta puuttuu kokonaan nelostason otsikko.

<Section> kaipaa omat otsikkonsa, jopa sen h1:n

HTML5-standardissa yhden sivun voi jakaa eri osioihin (section-tagilla) ja teoriassa jokaisella osiolla voi olla omat otsikkorakenteensa.

Tällöin sivupalkki voisi olla oma osionsa. Sen ykköstason otsikko ”Sivupalkki” voisi olla piilotettuna kokonaan, ja Arkisto ja Kategoriat voisivat olla kakkostason otsikkoja. Ja sama footerissa.

Vaikka standardilla on jo ikää muutamia vuosia, en ole kuitenkaan tavannut yhtään luotettavaa tutkimusta, jossa osioiden käyttö olisi parantanut hakukonesijoitusta.

Koska sivupalkki ja footer ovat enemmänkin navigaatioelementtejä, eikä liity varsinaiseen sisältöön, pitäisin ne ihan tavallisena tekstinä, joka CSS-muotoilun avulla vain näyttää otsikolta.

Ja vastaavasti pitäisin huolen, että väliotsikko oikeasti on otsikko, eikä vain ”näytä otsikolta”.