Pealkirjad ja lehe ülesehitus

Moodul 3: Lehe tehniline alus · Lugemisaeg: 11 minutit

Õpieesmärk: Pärast seda õppetundi oskad üles ehitada lehe, millel on selge põhipealkiri ja loogilised vahepealkirjad. Oskad selgitada, mida Google ja ekraanilugejad pealkirjadega teevad, ning kirjutada piltidele häid alt-tekste ja failinimesid.

Põhimõisted: pealkiri (<h1> kuni <h6>), põhipealkiri, vahepealkiri, taseme vahelejätmine, semantiline HTML, ekraanilugeja, vormindatud tekst, mis ei ole pealkiri, alt-tekst, tühi alt="" kaunistuse jaoks, failinimi, tekst piltides

Pealkirjad on sinu lehe sisukord

Pikka teksti ilma vahepealkirjadeta ei taha keegi lugeda. Veebis kehtib see veelgi enam: külastajad silmitsevad lehte kõigepealt pealiskaudselt ja hakkavad lugema alles siis, kui näevad, et vastus on seal olemas. Pealkirjad aitavad selles. Aga pealkirjad on midagi enamat kui suured paksud tähed. HTML-is on need eraldi elemendid, millel on tase:

<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>

<h1> on põhipealkiri: millest see leht räägib? <h2>-pealkirjad on peatükid, <h3>-pealkirjad nende sees olevad lõigud ja nii edasi kuni <h6>-ni. Ülaltoodud taane on ainult näitlikustamiseks; päris HTML-is pole sellel tähtsust.

Seda ülesehitust loevad päriselt kaks rühma:

1. Ekraanilugeja kasutajad. Pime või vaegnägija külastaja laseb ekraanilugejal sageli kõigepealt kõik pealkirjad ette lugeda ja hüppab siis otsitava osani. Ilma päris pealkirjadeta on leht üks pikk tekstimassiiv.
2. Otsingumootorid. Google kasutab pealkirju, et mõista, millest lehe eri osad räägivad.

Mida Google pealkirjade kohta ütleb

Pealkirjade kohta liigub palju müüte. Google ise ütleb nii:

• Google'i SEO algajate juhendis on kirjas, et pealkirjade järjekord ei ole Google Searchi jaoks oluline ja et maagilist arvu pealkirju, mis lehel peaks olema, ei ole. Loogilises järjekorras pealkirjad on aga ekraanilugejatele väga kasulikud.
• Google'i John Mueller ütles ühes videos (2019), et Google'i süsteemidel pole probleemi mitme <h1>-pealkirjaga ühel lehel. Google püüab töötada HTML-iga sellisena, nagu see on: üks <h1>, mitu või ainult vormindatud tekst ilma päris pealkirjadeta.
• Pealkirjalinke käsitlevas dokumentatsioonis (õppetund 3.1) nimetab Google siiski olukorda, mis võib valesti minna: selge põhipealkiri puudub. Kui lehe ülaosas on mitu suurt ja silmatorkavat pealkirja ning pole selge, milline neist on põhipealkiri, võib Google'il olla raske head pealkirjalinki valida. Google soovitab põhipealkirja selgelt esile tõsta, näiteks esimese nähtava <h1>-na.

Selle kursuse järeldus: üks selge <h1> lehe kohta on hea harjumus. Mitte sellepärast, et Google sind muidu karistaks, vaid sellepärast, et siis ütleb leht kõigile selgelt, millest ta räägib. Lugejad, ekraanilugejad ja Google ei saa sellest mööda vaadata. Seepärast annab ülesande A3.2 kontroll rohelise tule täpselt ühe mittetühja <h1> korral, oranži rohkem kui ühe korral ja punase, kui seda pole üldse.

Mis sageli valesti läheb

Lehe ülesehitamine nii, et see annab vastuse

Hea järjekord peaaegu iga lehe jaoks:

1. Põhipealkiri (<h1>), mis ütleb, mida külastaja siit leiab. Sageli sarnaneb see õppetunni 3.1 lehe pealkirjaga, kuid ei pea sellega ühesugune olema. Lehe pealkiri on otsingutulemustes, põhipealkiri lehel endal.
2. Lühike sissejuhatus, kus on kohe kõige tähtsam vastus.
3. Vahepealkirjad (<h2>) iga alateema jaoks, kirjutatud nii, nagu lugeja otsib: "Mis maksab pruudikimp?" ütleb rohkem kui "Hinnad".
4. Vajaduse korral <h3> <h2> all, mitte eraldi.

Õppetund 7.3 räägib lähemalt kirjutamisest endast. Siin on jutt karkassist.

Pildid: alt-tekst ja failinimi

Otsingumootor ei "näe" fotot nii nagu sina. Google kasutab masinnägemist, kuid saab palju teavet pildi ümber olevast tekstist. Kõige olulisema allika nimetab Google ise: alt-tekst.

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

Alt-tekstil (alternatiivtekstil) on kaks ülesannet:

• Ligipääsetavus: ekraanilugeja loeb selle ette sellele, kes pilti ei näe. Kui pilt ei laadi, näitab brauser fotot asendades alt-teksti.
• Mõistmine: Google kasutab alt-teksti koos masinnägemisega, et mõista, mis pildil on. See aitab eelkõige Google Imagesis.

Nii kirjutad hea alt-teksti:

• Kirjelda ühe lühikese lausega, mis pildil näha on ja miks see sellel lehel on.
• Kasuta märksõnu ainult siis, kui need sobivad loomulikult. Google hoiatab, et märksõnadega üle kuhjatud alt-tekstid annavad halva kasutuskogemuse ja neid võidakse pidada rämpsuks.
• Pilt, mis on ainult kaunistus (joon, taustamuster), saab tühja alt-i: alt="". Siis jätab ekraanilugeja selle vahele. Puuduv alt-atribuut on midagi muud: siis loeb ekraanilugeja mõnikord ette failinime.
• Kui pildil on oluline tekst (lahtiolekuaeg, hind, voldik), pane see tekst ka tavalise tekstina lehele. Pildis olevat teksti on ekraanilugejal ja otsingumootoril raske lugeda.

Natuke aitab ka failinimi. Google soovitab lühikesi ja kirjeldavaid nimesid ning toob näiteks image1.jpg või pic.gif kui selle, mida pigem vältida. bruidsboeket-pioenrozen-wit.jpg ütleb rohkem kui IMG_4032.jpg.

Piltide kiirusest ja mõõtmetest räägib õppetund 4.3.

Praktikas: pealkirjad veebilehe koostajates

• WebOké AI Builderis muutub lehe esimene pealkiri automaatselt <h1>-ks ja kõik järgmised pealkirjad <h2>-ks. Nii on igal lehel täpselt üks põhipealkiri. Iga foto juurde saad kirjutada kirjelduse; sellest saab alt-tekst. SEO-kontroll hoiatab kirjelduseta fotode puhul.
• WordPressis valid plokiredaktoris ploki Pealkiri juures taseme (H1 kuni H6). Teema teeb tavaliselt lehe pealkirjast endast juba <h1>; kasuta siis tekstis H2 ja madalamaid tasemeid. Alt-teksti sisestad pildi juures meediateegis või plokis.

Teised veebilehe koostajad töötavad sarnaselt. Kahtluse korral vaata lähtekoodi (Ctrl+U) või otsi Ctrl+F abil <h1.

Kokkuvõte

• Pealkirjad (<h1> kuni <h6>) on sinu lehe sisukord lugejatele, ekraanilugejatele ja otsingumootoritele.
• Google'il pole probleemi mitme <h1>-ga ega teistsuguse järjekorraga, kuid ta soovitab selget põhipealkirja. Üks selge <h1> on hea harjumus.
• Vali tase ülesehituse, mitte kirjasuuruse järgi; ära eelistatavalt jäta tasemeid vahele.
• Hea alt-tekst kirjeldab lühidalt, mis on näha; kaunistus saab alt=""; ära kuhja märksõnu.
• Oluline tekst kuulub lehele, mitte ainult pildile.

Test

Ülesanne

Ülesanne A3.2: Üks pealkiri ja loogiline ülesehitus. Sisesta oma saidi ühe lehe aadress. Programm laadib lehe, loendab <h1>-pealkirjad ja näitab pealkirjade struktuuri sisukorrana. Näed, kas lehel on täpselt üks mittetühi põhipealkiri, kas mõni tase on vahele jäetud ja mitmel pildil puudub alt-atribuut. Sisesta enne, mitu <h1>-pealkirja arvad lehel olevat. Oma saiti pole? Kasuta aadressi www.rijksoverheid.nl.

Loe edasi

• Google Search Central, SEO algajate juhend (pealkirjad, alt-tekst): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, piltide parimad tavad: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (ligipääsetavad pealkirjad): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt-tekstid: https://www.w3.org/WAI/tutorials/images/