Virsraksti un lapas struktūra

3. modulis: Lapas tehniskie pamati · Lasīšanas laiks: 11 minūtes

Mērķis: Pēc šīs nodarbības Jūs varēsiet izveidot lapu ar skaidru galveno virsrakstu un loģiskiem apakšvirsrakstiem, izskaidrot, ko Google un ekrāna lasītāji dara ar virsrakstiem, un rakstīt labus alt tekstus un failu nosaukumus attēliem.

Pamatjēdzieni: virsraksts (<h1> līdz <h6>), galvenais virsraksts, apakšvirsraksts, līmeņa izlaišana, semantiskais HTML, ekrāna lasītājs, noformēts teksts, kas nav virsraksts, alt teksts, tukšs alt="" dekoratīviem attēliem, faila nosaukums, teksts attēlos

Virsraksti ir Jūsu lapas satura rādītājs

Garu tekstu bez apakšvirsrakstiem neviens labprāt nelasa. Internetā tas ir vēl izteiktāk: apmeklētāji vispirms pārskata lapu un sāk lasīt tikai tad, kad redz, ka atbilde tajā ir. Virsraksti tam palīdz. Taču virsraksti ir kas vairāk nekā lieli, treknraksta burti. HTML tie ir atsevišķi elementi ar līmeni:

<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> ir galvenais virsraksts: par ko ir šī lapa? <h2> ir nodaļas, <h3> ir sadaļas to iekšienē, un tā tālāk līdz <h6>. Atkāpes iepriekš redzamajā piemērā ir tikai uzskatāmībai; īstā HTML tām nav nozīmes.

Šo struktūru patiešām lasa divas grupas:

1. Cilvēki, kuri izmanto ekrāna lasītāju. Neredzīgs vai vājredzīgs apmeklētājs bieži vispirms liek ekrāna lasītājam nosaukt visus virsrakstus un tad pāriet uz meklēto daļu. Bez īstiem virsrakstiem lapa ir viens garš teksta gabals.
2. Meklētājprogrammas. Google izmanto virsrakstus, lai saprastu, par ko ir dažādās lapas daļas.

Ko Google saka par virsrakstiem

Par virsrakstiem klīst daudz mītu. Lūk, ko saka pats Google:

• Google SEO sākuma ceļvedī teikts, ka virsrakstu secībai Google meklēšanā nav nozīmes un ka nav maģiska skaita, cik virsrakstu lapai jābūt. Taču virsraksti loģiskā secībā ir ļoti noderīgi ekrāna lasītājiem.
• Google darbinieks John Mueller video (2019) teica, ka Google sistēmām nav problēmu ar vairākiem <h1> virsrakstiem vienā lapā. Google cenšas strādāt ar HTML tādu, kāds tas ir: viens <h1>, vairāki vai tikai noformēts teksts bez īstiem virsrakstiem.
• Dokumentācijā par virsraksta saitēm (nodarbība 3.1) Google tomēr min situāciju, kurā var rasties problēmas: nav skaidra galvenā virsraksta. Ja lapas augšdaļā ir vairāki lieli, uzkrītoši virsraksti un nav skaidrs, kurš ir galvenais, Google var būt grūti izvēlēties labu virsraksta saiti. Google iesaka galveno virsrakstu skaidri izcelt, piemēram, kā pirmo redzamo <h1>.

Šī kursa secinājums: viens skaidrs <h1> katrā lapā ir labs ieradums, nevis tāpēc, ka citādi Google Jūs sodītu, bet gan tāpēc, ka tad lapa ikvienam skaidri pasaka, par ko tā ir. Lasītāji, ekrāna lasītāji un Google to nevar nepamanīt. Tāpēc pārbaude uzdevumā A3.2 rāda zaļu krāsu, ja ir tieši viens netukšs <h1>, oranžu, ja to ir vairāk nekā viens, un sarkanu, ja tā nav vispār.

Biežākās kļūdas

Kā izveidot lapu, kas sniedz atbildi

Laba secība gandrīz jebkurai lapai:

1. Galvenais virsraksts (<h1>), kas pasaka, ko apmeklētājs šeit atradīs. Bieži tas ir līdzīgs virsrakstam no nodarbības 3.1, bet tam nav jābūt vienādam. Virsraksts (title) ir redzams meklēšanas rezultātos, galvenais virsraksts pašā lapā.
2. Īss ievads ar svarīgāko atbildi uzreiz.
3. Apakšvirsraksti (<h2>) katrai apakštēmai, uzrakstīti kā tas, ko lasītājs meklē: "Cik maksā līgavas pušķis?" pasaka vairāk nekā "Cenas".
4. Ja nepieciešams, <h3> zem <h2>, nevis atsevišķi.

Nodarbībā 7.3 sīkāk aplūkota pati rakstīšana. Šeit runa ir par karkasu.

Attēli: alt teksts un faila nosaukums

Meklētājprogramma "neredz" fotoattēlu tā, kā to redzat Jūs. Google izmanto datorredzi, taču daudz informācijas iegūst no apkārtējā teksta. Svarīgāko avotu min pats Google: alt tekstu.

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

Alt tekstam (alternatīvajam tekstam) ir divi uzdevumi:

• Piekļūstamība: ekrāna lasītājs to nolasa tiem, kuri attēlu neredz. Ja attēlu nevar ielādēt, pārlūkprogramma fotoattēla vietā parāda šo tekstu.
• Izpratne: Google izmanto alt tekstu kopā ar datorredzi, lai saprastu, kas attēlā redzams. Tas īpaši palīdz Google Images.

Kā uzrakstīt labu alt tekstu:

• Vienā īsā teikumā aprakstiet, kas redzams un kāpēc tas ir šajā lapā.
• Izmantojiet atslēgvārdus tikai tad, ja tie iederas dabiski. Google brīdina, ka ar atslēgvārdiem pārblīvēti alt teksti rada sliktu pieredzi un var tikt uzskatīti par surogātpastu.
• Attēls, kas ir tikai rotājums (līnija, fona raksts), saņem tukšu alt: alt="". Tad ekrāna lasītājs to izlaiž. Ja alt atribūta nav vispār, tas ir kas cits: tad ekrāna lasītājs dažkārt nolasa faila nosaukumu.
• Ja attēlā ir svarīgs teksts (darba laiks, cena, buklets), ievietojiet šo tekstu arī lapā kā parastu tekstu. Tekstu attēlā ekrāna lasītājam un meklētājprogrammai ir grūti izlasīt.

Nedaudz palīdz arī faila nosaukums. Google iesaka īsus, aprakstošus nosaukumus un kā piemēru tam, ko labāk nedarīt, min image1.jpg vai pic.gif. bruidsboeket-pioenrozen-wit.jpg pasaka vairāk nekā IMG_4032.jpg.

Attēlu ātrums un izmēri tiek aplūkoti nodarbībā 4.3.

Praksē: virsraksti vietņu veidotājos

• WebOké AI Builder pirmais lapas virsraksts automātiski kļūst par <h1>, bet visi nākamie virsraksti par <h2>. Tādējādi katrai lapai ir tieši viens galvenais virsraksts. Katram fotoattēlam varat ievadīt aprakstu; tas kļūst par alt tekstu. SEO pārbaude brīdina par fotoattēliem bez apraksta.
• WordPress bloku redaktorā blokam Virsraksts izvēlaties līmeni (H1 līdz H6). Tēma parasti jau pašu lapas nosaukumu padara par <h1>; tādā gadījumā tekstā izmantojiet H2 un zemākus līmeņus. Alt tekstu ievadāt pie attēla Mediju bibliotēkā vai blokā.

Citi vietņu veidotāji darbojas līdzīgi. Ja šaubāties, apskatiet pirmkodu (Ctrl+U) vai ar Ctrl+F meklējiet <h1.

Kopsavilkums

• Virsraksti (<h1> līdz <h6>) ir Jūsu lapas satura rādītājs lasītājiem, ekrāna lasītājiem un meklētājprogrammām.
• Google nav problēmu ar vairākiem <h1> vai citu secību, taču tas iesaka skaidru galveno virsrakstu. Viens skaidrs <h1> ir labs ieradums.
• Izvēlieties līmeni pēc struktūras, nevis pēc burtu lieluma; vēlams neizlaist līmeņus.
• Labs alt teksts īsi apraksta, kas redzams; rotājumi saņem alt=""; nepārblīvējiet ar atslēgvārdiem.
• Svarīgs teksts pieder lapā, nevis tikai attēlā.

Tests (quiz)

Uzdevums

Uzdevums A3.2: Viens galvenais virsraksts un loģiska struktūra. Ievadiet savas vietnes kādas lapas adresi. Programma ielādē lapu, saskaita <h1> virsrakstus un parāda virsrakstu struktūru kā satura rādītāju. Jūs redzēsiet, vai ir tieši viens netukšs galvenais virsraksts, vai tiek izlaisti līmeņi un cik attēliem nav alt atribūta. Iepriekš ierakstiet, cik <h1> virsrakstu, Jūsuprāt, tur ir. Jums nav savas vietnes? Izmantojiet www.rijksoverheid.nl.

Vairāk lasīt

• Google Search Central, SEO sākuma ceļvedis (virsraksti, alt teksts): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, labākā prakse attēliem: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (piekļūstami virsraksti): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt teksti: https://www.w3.org/WAI/tutorials/images/