Otsikot ja sivun rakenne

Moduuli 3: Sivun tekninen perusta · Lukuaika: 11 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat rakentaa sivun, jolla on selkeä pääotsikko ja loogiset väliotsikot. Osaat selittää, mitä Google ja ruudunlukijat tekevät otsikoilla, ja kirjoittaa kuville hyvät alt-tekstit ja tiedostonimet.

Keskeiset käsitteet: otsikko (<h1>, <h6>), pääotsikko, väliotsikko, tason ohittaminen, semanttinen HTML, ruudunlukija, muotoiltu teksti, joka ei ole otsikko, alt-teksti, tyhjä alt="" koristekuville, tiedostonimi, teksti kuvissa

Otsikot ovat sivusi sisällysluettelo

Pitkää tekstiä ilman väliotsikoita ei lue kukaan mielellään. Verkossa tämä korostuu: kävijät silmäilevät sivun ensin ja lukevat vasta, kun näkevät vastauksen olevan siellä. Otsikot auttavat tässä. Otsikot ovat kuitenkin muutakin kuin isoja, lihavoituja kirjaimia. HTML:ssä ne ovat omia elementtejään, joilla on taso:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

(Esimerkki on hollanninkielinen: ”Mittatilaustyönä tehdyt hääkimput”, jonka alla ”Näin toimimme” ja sen alaotsikot ”Tutustuminen” ja ”Koekimppu”, sitten ”Esimerkkejä” ja ”Usein kysyttyä”.) <h1> on pääotsikko: mistä tämä sivu kertoo? <h2>-otsikot ovat lukuja, <h3>-otsikot niiden sisällä olevia kappaleita, ja niin edelleen aina <h6>-tasoon asti. Yllä oleva sisennys on vain havainnollistamista varten. Oikeassa HTML:ssä sillä ei ole merkitystä.

Kaksi ryhmää todella lukee tätä rakennetta:

1. Ruudunlukijaa käyttävät ihmiset. Sokea tai heikkonäköinen kävijä pyytää ruudunlukijaa usein ensin luettelemaan kaikki otsikot ja hyppää sitten etsimäänsä kohtaan. Ilman oikeita otsikoita sivu on yhtä pitkää tekstimassaa.
2. Hakukoneet. Google käyttää otsikoita ymmärtääkseen, mistä sivun eri osat kertovat.

Mitä Google sanoo otsikoista

Otsikoista liikkuu paljon tarinoita. Tässä on se, mitä Google itse sanoo:

• Googlen hakukoneoptimoinnin aloitusoppaassa todetaan, että otsikoiden järjestyksellä ei ole Google-haulle merkitystä eikä ole olemassa maagista määrää otsikoita, joka sivulla pitäisi olla. Loogisessa järjestyksessä olevat otsikot ovat kuitenkin erittäin hyödyllisiä ruudunlukijoille.
• Googlen John Mueller sanoi videolla (2019), että Googlen järjestelmillä ei ole ongelmaa useiden <h1>-otsikoiden kanssa samalla sivulla. Google pyrkii toimimaan HTML:n kanssa sellaisena kuin se on: yksi <h1>, useampi tai pelkkä muotoiltu teksti ilman oikeita otsikoita.
• Otsikkolinkkejä koskevassa dokumentaatiossa (oppitunti 3.1) Google mainitsee kuitenkin tilanteen, joka voi mennä pieleen: selkeä pääotsikko puuttuu. Jos sivun yläosassa on useita isoja, näkyviä otsikoita eikä ole selvää, mikä niistä on pääotsikko, Googlen voi olla vaikea valita hyvää otsikkolinkkiä. Google suosittelee, että pääotsikko erottuu selvästi, esimerkiksi sivun ensimmäisenä näkyvänä <h1>-otsikkona.

Tämän kurssin johtopäätös: yksi selkeä <h1> sivua kohti on hyvä tapa. Syy ei ole se, että Google muuten rankaisisi, vaan se, että sivu kertoo silloin kaikille selvästi, mistä se kertoo. Lukijat, ruudunlukijat ja Google eivät voi ohittaa sitä. Siksi tehtävän A3.2 tarkistus näyttää vihreää, kun sivulla on täsmälleen yksi ei-tyhjä <h1>, oranssia, kun niitä on useampi, ja punaista, kun sellaista ei ole.

Mikä menee usein pieleen

Sivu, joka vastaa kysymykseen

Hyvä järjestys lähes mille tahansa sivulle:

1. Pääotsikko (<h1>), joka kertoo, mitä kävijä täältä löytää. Se muistuttaa usein oppitunnin 3.1 otsikkoa (title), mutta sen ei tarvitse olla sama. Title näkyy hakutuloksissa, pääotsikko itse sivulla.
2. Lyhyt johdanto, jossa on heti tärkein vastaus.
3. Väliotsikot (<h2>) jokaiselle osa-aiheelle, kirjoitettuina niin kuin lukija asiaa etsii: ”Paljonko hääkimppu maksaa?” kertoo enemmän kuin ”Hinnat”.
4. Tarvittaessa <h3> jonkin <h2>-otsikon alla, ei irrallaan.

Oppitunti 7.3 käsittelee tarkemmin itse kirjoittamista. Tässä keskitytään runkoon.

Kuvat: alt-teksti ja tiedostonimi

Hakukone ei ”näe” valokuvaa samalla tavalla kuin sinä. Google käyttää konenäköä, mutta saa paljon tietoa kuvan ympärillä olevasta tekstistä. Tärkeimmän lähteen Google mainitsee itse: alt-tekstin.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Alt-tekstillä (vaihtoehtoinen teksti) on kaksi tehtävää:

• Saavutettavuus: ruudunlukija lukee sen ääneen niille, jotka eivät näe kuvaa. Jos kuva ei lataudu, selain näyttää alt-tekstin kuvan sijaan.
• Ymmärtäminen: Google käyttää alt-tekstiä yhdessä konenäön kanssa ymmärtääkseen, mitä kuvassa on. Tämä auttaa erityisesti Google Imagesissa.

Näin kirjoitat hyvän alt-tekstin:

• Kuvaa yhdellä lyhyellä lauseella, mitä kuvassa näkyy ja miksi se on tällä sivulla.
• Käytä hakusanoja vain, jos ne sopivat luontevasti. Google varoittaa, että hakusanoilla täytetyt alt-tekstit antavat huonon käyttökokemuksen ja voidaan tulkita roskapostiksi.
• Pelkkä koristekuva (viiva, taustakuvio) saa tyhjän alt-tekstin: alt="". Silloin ruudunlukija ohittaa sen. Puuttuva alt-attribuutti on eri asia: silloin ruudunlukija lukee joskus tiedostonimen ääneen.
• Jos kuvassa on tärkeää tekstiä (aukioloaika, hinta, esite), kirjoita teksti myös tavallisena tekstinä sivulle. Kuvan sisällä olevaa tekstiä ruudunlukijan ja hakukoneen on vaikea lukea.

Myös tiedostonimi auttaa hieman. Google suosittelee lyhyitä, kuvaavia nimiä ja mainitsee image1.jpg ja pic.gif esimerkkeinä nimistä, joita kannattaa välttää. bruidsboeket-pioenrozen-wit.jpg (hääkimppu, valkoiset pionit) kertoo enemmän kuin IMG_4032.jpg.

Kuvien nopeutta ja kokoa käsitellään oppitunnilla 4.3.

Käytännössä: otsikot sivustotyökaluissa

• WebOkén AI Builderissa sivun ensimmäisestä otsikosta tulee automaattisesti <h1> ja kaikista seuraavista otsikoista <h2>. Näin jokaisella sivulla on täsmälleen yksi pääotsikko. Jokaiselle kuvalle voit kirjoittaa kuvauksen, josta tulee alt-teksti. SEO-tarkistus varoittaa kuvista, joilta kuvaus puuttuu.
• WordPressissä valitset lohkoeditorissa Otsikko-lohkon tason (H1, H6). Teema tekee yleensä jo sivun otsikosta <h1>-otsikon, joten käytä tekstissä H2-tasoa ja sitä alempia. Alt-tekstin kirjoitat kuvan kohdalle mediakirjastossa tai lohkossa.

Muut sivustotyökalut toimivat samaan tapaan. Jos olet epävarma, katso lähdekoodia (Ctrl+U) tai hae Ctrl+F:llä <h1.

Yhteenveto

• Otsikot (<h1>, <h6>) ovat sivusi sisällysluettelo lukijoille, ruudunlukijoille ja hakukoneille.
• Googlella ei ole ongelmaa useiden <h1>-otsikoiden tai eri järjestyksen kanssa, mutta se suosittelee selkeää pääotsikkoa. Yksi selkeä <h1> on hyvä tapa.
• Valitse taso rakenteen, älä kirjasinkoon perusteella. Älä mieluiten ohita tasoja.
• Hyvä alt-teksti kuvaa lyhyesti, mitä kuvassa näkyy. Koristekuva saa alt="". Älä kasaa hakusanoja.
• Tärkeä teksti kuuluu sivulle, ei pelkästään kuvaan.

Tietovisa

Tehtävä

Tehtävä A3.2: Yksi pääotsikko ja looginen rakenne. Kirjoita oman sivustosi jonkin sivun osoite. Ohjelma hakee sivun, laskee <h1>-otsikot ja näyttää otsikkorakenteen sisällysluettelona. Näet, onko sivulla täsmälleen yksi ei-tyhjä pääotsikko, ohitetaanko tasoja ja kuinka monelta kuvalta puuttuu alt-attribuutti. Kirjoita etukäteen, kuinka monta <h1>-otsikkoa arvelet sivulla olevan. Eikö sinulla ole omaa sivustoa? Käytä osoitetta www.rijksoverheid.nl.

Lisälukemista

• Google Search Central, hakukoneoptimoinnin aloitusopas (otsikot, alt-teksti): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, kuvien parhaat käytännöt: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (saavutettavat otsikot): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt-tekstit: https://www.w3.org/WAI/tutorials/images/