Antraštės ir puslapio struktūra

3 modulis: Puslapio techninis pagrindas · Skaitymo laikas: 11 min.

Mokymosi tikslas: Po šios pamokos galėsite sukurti puslapį su aiškia pagrindine antrašte ir logiškomis tarpinėmis antraštėmis, paaiškinti, ką su antraštėmis daro Google ir ekrano skaitytuvai, ir rašyti gerus paveikslėlių alt tekstus bei failų pavadinimus.

Pagrindinės sąvokos: antraštė (nuo <h1> iki <h6>), pagrindinė antraštė, tarpinė antraštė, lygio praleidimas, semantinis HTML, ekrano skaitytuvas, suformatuotas tekstas, kuris nėra antraštė, alt tekstas, tuščias alt="" dekoracijai, failo pavadinimas, tekstas paveikslėliuose

Antraštės yra Jūsų puslapio turinys

Ilgo teksto be tarpinių antraščių niekas nemėgsta skaityti. Internete tai dar ryškiau: lankytojai pirmiausia peržvelgia puslapį ir pradeda skaityti tik tada, kai pamato, kad atsakymas jame yra. Antraštės čia padeda. Tačiau antraštės yra daugiau nei didelės, paryškintos raidės. HTML kalboje tai atskiri elementai, turintys lygį:

<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> yra pagrindinė antraštė: apie ką šis puslapis? <h2> antraštės yra skyriai, <h3> antraštės yra jų poskyriai, ir taip toliau iki <h6>. Įtraukos aukščiau skirtos tik iliustracijai; tikrame HTML jos neturi reikšmės.

Šią struktūrą iš tikrųjų skaito dvi grupės:

1. Žmonės, naudojantys ekrano skaitytuvą. Aklas ar silpnaregis lankytojas dažnai pirmiausia leidžia ekrano skaitytuvui išvardyti visas antraštes, o tada peršoka prie jam reikalingos dalies. Be tikrų antraščių puslapis yra vienas ilgas teksto gabalas.
2. Paieškos sistemos. Google naudoja antraštes, kad suprastų, apie ką yra skirtingos puslapio dalys.

Ką Google sako apie antraštes

Apie antraštes sklando daug mitų. Štai ką sako pati Google:

• Google SEO pradžios vadove rašoma, kad Google paieškai antraščių tvarka nesvarbi ir kad nėra magiško skaičiaus antraščių, kurį turėtų turėti puslapis. Tačiau logiška antraščių tvarka labai naudinga ekrano skaitytuvams.
• John Mueller iš Google vaizdo įraše (2019 m.) pasakė, kad Google sistemos neturi problemų su keliomis <h1> antraštėmis puslapyje. Google stengiasi dirbti su HTML tokiu, koks jis yra: su viena <h1>, su keliomis arba tik su suformatuotu tekstu be tikrų antraščių.
• Dokumentacijoje apie pavadinimo nuorodas (title links, pamoka 3.1) Google vis dėlto mini situaciją, kuri gali sukelti problemų: nėra aiškaus pagrindinio pavadinimo. Jei viršuje yra kelios didelės, krintančios į akis antraštės ir neaišku, kuri iš jų yra pagrindinis pavadinimas, Google gali būti sunku parinkti gerą pavadinimo nuorodą. Google rekomenduoja aiškiai išskirti pagrindinę antraštę, pavyzdžiui, kaip pirmąją matomą <h1>.

Šio kurso išvada: viena aiški <h1> puslapyje yra geras įprotis, ne todėl, kad kitaip Google Jus nubaustų, o todėl, kad tada puslapis visiems aiškiai pasako, apie ką jis yra. Skaitytojai, ekrano skaitytuvai ir Google to nepraleis. Todėl užduoties A3.2 patikra rodo žalią spalvą, kai yra lygiai viena netuščia <h1>, oranžinę, kai jų daugiau nei viena, ir raudoną, kai jos nėra.

Dažniausios klaidos

Kaip sukurti puslapį, kuris atsako į klausimą

Gera tvarka beveik kiekvienam puslapiui:

1. Pagrindinė antraštė (<h1>), kuri pasako, ką lankytojas čia ras. Dažnai ji panaši į pavadinimą iš pamokos 3.1, bet neprivalo būti tokia pati. Pavadinimas rodomas paieškos rezultatuose, o pagrindinė antraštė pačiame puslapyje.
2. Trumpas įvadas, kuriame iškart pateikiamas svarbiausias atsakymas.
3. Tarpinės antraštės (<h2>) kiekvienai potemei, parašytos kaip tai, ko ieško skaitytojas: "Kiek kainuoja vestuvių puokštė?" pasako daugiau nei "Kainos".
4. Prireikus <h3> po <h2>, o ne atskirai.

Pamokoje 7.3 plačiau kalbama apie patį rašymą. Čia svarbiausia yra karkasas.

Paveikslėliai: alt tekstas ir failo pavadinimas

Paieškos sistema nuotraukos "nemato" taip, kaip Jūs. Google naudoja kompiuterinę regą, bet daug informacijos gauna iš aplinkinio teksto. Svarbiausią šaltinį nurodo pati Google: alt tekstą.

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

Alt tekstas (alternatyvusis tekstas) atlieka dvi užduotis:

• Prieinamumas: ekrano skaitytuvas jį perskaito tiems, kurie paveikslėlio nemato. Jei paveikslėlis neįkeliamas, naršyklė vietoj nuotraukos parodo šį tekstą.
• Supratimas: Google naudoja alt tekstą kartu su kompiuterine rega, kad suprastų, kas pavaizduota paveikslėlyje. Tai ypač padeda Google vaizdų paieškoje (Google Images).

Kaip parašyti gerą alt tekstą:

• Vienu trumpu sakiniu aprašykite, kas matyti ir kodėl tai yra šiame puslapyje.
• Raktinius žodžius naudokite tik tada, kai jie natūraliai tinka. Google įspėja, kad raktiniais žodžiais prikimšti alt tekstai sukuria blogą patirtį ir gali būti laikomi šlamštu.
• Paveikslėlis, kuris yra tik puošmena (linija, fono raštas), gauna tuščią alt: alt="". Tada ekrano skaitytuvas jį praleidžia. Visiškai nesantis alt atributas yra kas kita: tada ekrano skaitytuvas kartais perskaito failo pavadinimą.
• Jei paveikslėlyje yra svarbus tekstas (darbo laikas, kaina, lankstinukas), pateikite tą tekstą ir puslapyje kaip paprastą tekstą. Tekstą paveikslėlyje ekrano skaitytuvui ir paieškos sistemai sunku perskaityti.

Šiek tiek padeda ir failo pavadinimas. Google rekomenduoja trumpus, aprašomuosius pavadinimus ir kaip blogą pavyzdį nurodo image1.jpg arba pic.gif. bruidsboeket-pioenrozen-wit.jpg pasako daugiau nei IMG_4032.jpg.

Paveikslėlių greitis ir matmenys aptariami pamokoje 4.3.

Praktiškai: antraštės svetainių kūrimo įrankiuose

• WebOké AI Builder įrankyje pirmoji puslapio antraštė automatiškai tampa <h1>, o visos kitos antraštės tampa <h2>. Taip kiekvienas puslapis turi lygiai vieną pagrindinę antraštę. Prie kiekvienos nuotraukos galite įrašyti aprašymą; jis tampa alt tekstu. SEO patikra įspėja apie nuotraukas be aprašymo.
• WordPress blokų redaktoriuje bloke Antraštė pasirenkate lygį (nuo H1 iki H6). Tema dažniausiai pačiam puslapio pavadinimui jau suteikia <h1>; tada tekste naudokite H2 ir žemesnius lygius. Alt tekstą įrašote prie paveikslėlio medijos bibliotekoje arba bloke.

Kiti svetainių kūrimo įrankiai veikia panašiai. Jei abejojate, peržiūrėkite išeitinį kodą (Ctrl+U) arba su Ctrl+F ieškokite <h1.

Santrauka

• Antraštės (nuo <h1> iki <h6>) yra Jūsų puslapio turinys skaitytojams, ekrano skaitytuvams ir paieškos sistemoms.
• Google neturi problemų su keliomis <h1> antraštėmis ar kitokia tvarka, bet rekomenduoja aiškų pagrindinį pavadinimą. Viena aiški <h1> yra geras įprotis.
• Lygį rinkitės pagal struktūrą, o ne pagal šrifto dydį; geriau nepraleiskite lygių.
• Geras alt tekstas trumpai aprašo, kas matyti; puošmenos gauna alt=""; jokio raktinių žodžių kaupimo.
• Svarbus tekstas turi būti puslapyje, o ne tik paveikslėlyje.

Testas (quiz)

Užduotis

Užduotis A3.2: Viena pagrindinė antraštė ir logiška struktūra. Įrašykite savo svetainės puslapio adresą. Programa atsisiunčia puslapį, suskaičiuoja <h1> antraštes ir parodo antraščių struktūrą kaip turinį. Pamatysite, ar yra lygiai viena netuščia pagrindinė antraštė, ar praleidžiami lygiai ir kiek paveikslėlių neturi alt atributo. Iš anksto įrašykite, kiek, Jūsų manymu, yra <h1> antraščių. Neturite savo svetainės? Naudokite www.rijksoverheid.nl.

Skaitykite daugiau

• Google Search Central, SEO pradžios vadovas (antraštės, alt tekstas): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Gerosios paveikslėlių praktikos: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (prieinamos antraštės): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Alt tekstai: https://www.w3.org/WAI/tutorials/images/