Modul 3 · 3.2
Naslovi in zgradba strani
Modul 3: Tehnična osnova strani · Čas branja: 11 min
Učni cilj: Po tej lekciji boste znali zgraditi stran z jasnim glavnim naslovom in logičnimi podnaslovi, razložiti, kaj Google in bralniki zaslona počnejo z naslovi, ter napisati dobra besedila alt in imena datotek za slike.
Ključni pojmi: naslov (<h1> do <h6>), glavni naslov, podnaslov, preskakovanje ravni, semantični HTML, bralnik zaslona, oblikovano besedilo, ki ni naslov, besedilo alt, prazen alt="" za okras, ime datoteke, besedilo v slikah
Naslovi so kazalo Vaše strani
Dolgega besedila brez podnaslovov nihče ne bere rad. Na spletu to velja še bolj: obiskovalci stran najprej preletijo in jo začnejo brati šele, ko vidijo, da je v njej odgovor. Pri tem pomagajo naslovi. A naslovi so več kot velike, krepke črke. V HTML so to posebni elementi z ravnjo:
<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> je glavni naslov: o čem govori ta stran? Elementi <h2> so poglavja, elementi <h3> razdelki znotraj njih in tako naprej do <h6>. (Primer je iz nizozemske cvetličarne: »šopki za neveste po meri«, »tako delamo«, »spoznavni pogovor«, »poskusni šopek«, »primeri«, »pogosta vprašanja«.) Zamik zgoraj je samo za ponazoritev; v pravem HTML ni pomemben.
Dve skupini to zgradbo res bereta:
- Ljudje z bralnikom zaslona. Slep ali slaboviden obiskovalec pogosto najprej pusti bralniku zaslona, da našteje vse naslove, nato pa skoči na del, ki ga išče. Brez pravih naslovov je stran ena sama dolga gmota besedila.
- Iskalniki. Google uporablja naslove, da razume, o čem govorijo različni deli strani.
Kaj o naslovih pravi Google
O naslovih kroži veliko mitov. Tole pravi Google sam:
- V Googlovem vodniku za začetnike SEO piše, da vrstni red naslovov za Google Iskanje ni pomemben in da ni čarobnega števila naslovov, ki bi jih morala imeti stran. Naslovi v logičnem vrstnem redu pa so zelo koristni za bralnike zaslona.
- John Mueller iz Googla je v videoposnetku (2019) dejal, da Googlovi sistemi nimajo težav z več naslovi
<h1>na strani. Google skuša delati s HTML takšnim, kakršen je: en<h1>, več njih ali samo oblikovano besedilo brez pravih naslovov. - V dokumentaciji o povezavah z naslovom (title links, lekcija 3.1) Google omenja situacijo, ki se lahko zalomi: ni jasnega glavnega naslova. Če je na vrhu več velikih, opaznih naslovov in ni jasno, kateri je glavni, Google morda težko izbere dobro povezavo z naslovom. Google svetuje, da glavni naslov jasno izstopa, na primer kot prvi vidni
<h1>.
Zaključek tega tečaja: en jasen <h1> na stran je dobra navada, ne zato, ker bi Vas Google sicer kaznoval, ampak ker stran tako vsem jasno pove, o čem govori. Bralci, bralniki zaslona in Google je ne morejo zgrešiti. Preverjanje v nalogi A3.2 zato pokaže zeleno pri natanko enem nepraznem <h1>, oranžno pri več kot enem in rdeče, če ga ni.
Kaj gre pogosto narobe
| Napaka | Zakaj je to težava |
|---|---|
Logotip ali ime podjetja je na vsaki strani <h1> | Vsaka stran ima tako enak glavni naslov; pravi naslov strani je <h2> ali navadno besedilo |
| Naslovi, izbrani zaradi velikosti pisave | <h4>, ker je »lepo majhen«, ali <h2> za slogan. Videz sodi v oblikovanje (CSS), raven v HTML |
| Besedilo, ki je videti kot naslov, a to ni | Krepek, velik kos besedila v <div> ali <p>: bralnik zaslona ne vidi naslova |
| Preskakovanje ravni | Takoj za <h2> pride <h4>. Za Google to ni pomembno, a smernice W3C za dostopnost to odsvetujejo, ker je zmedeno |
| Prazni naslovi | <h1></h1>, v katerem je samo slika brez besedila alt. Za bralnik zaslona in za Google je ta naslov prazen |
Zgradite stran, ki daje odgovor
Dober vrstni red za skoraj vsako stran:
- Glavni naslov (
<h1>), ki pove, kaj obiskovalec najde tukaj. Pogosto je podoben naslovu iz lekcije 3.1, ni pa nujno enak. Naslov (title) je v rezultatih iskanja, glavni naslov na sami strani. - Kratek uvod, ki takoj poda najpomembnejši odgovor.
- Podnaslovi (
<h2>) za vsako podtemo, napisani kot nekaj, kar bralec išče: »Koliko stane šopek za nevesto?« pove več kot »Cene«. - Po potrebi
<h3>pod<h2>, ne samostojno.
Lekcija 7.3 se podrobneje posveča samemu pisanju. Tukaj gre za ogrodje.
Slike: besedilo alt in ime datoteke
Iskalnik fotografije ne »vidi« tako kot Vi. Google uporablja računalniški vid, a veliko razbere iz besedila okoli nje. Najpomembnejši vir Google navaja sam: besedilo alt.
<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
alt="Bruidsboeket met witte pioenrozen en eucalyptus">Besedilo alt (nadomestno besedilo, tu »šopek za nevesto z belimi potonikami in evkaliptusom«) ima dve nalogi:
- Dostopnost: bralnik zaslona ga prebere tistim, ki slike ne vidijo. Če se slika ne naloži, ga brskalnik prikaže namesto fotografije.
- Razumevanje: Google uporablja besedilo alt skupaj z računalniškim vidom, da razume, kaj je na sliki. To pomaga predvsem v Google Slikah.
Tako napišete dobro besedilo alt:
- V enem kratkem stavku opišite, kaj je videti in zakaj je to na tej strani.
- Ključne besede uporabite le, če se naravno prilegajo. Google opozarja, da besedila alt, natrpana s ključnimi besedami, dajejo slabo izkušnjo in jih lahko obravnava kot neželeno vsebino.
- Slika, ki je le okras (črtica, vzorec ozadja), dobi prazen alt:
alt="". Bralnik zaslona jo tako preskoči. Manjkajoč atributaltje nekaj drugega: takrat bralnik zaslona včasih prebere ime datoteke. - Če je na sliki pomembno besedilo (delovni čas, cena, letak), to besedilo dodajte tudi kot navadno besedilo na stran. Besedilo v sliki je za bralnik zaslona in za iskalnik težko berljivo.
Nekoliko pomaga tudi ime datoteke. Google priporoča kratka, opisna imena in kot primer, česa raje ne delajte, navaja image1.jpg ali pic.gif. bruidsboeket-pioenrozen-wit.jpg pove več kot IMG_4032.jpg.
Hitrost in velikost slik obravnava lekcija 4.3.
V praksi: naslovi v orodjih za izdelavo spletnih strani
- V AI Builder od WebOké prvi naslov strani samodejno postane
<h1>, vsi naslednji naslovi pa<h2>. Tako ima vsaka stran natanko en glavni naslov. Pri vsaki fotografiji lahko vpišete opis; ta postane besedilo alt. Preverjanje SEO opozori na fotografije brez opisa. - V WordPressu v urejevalniku blokov pri bloku Naslov (Heading) izberete raven (H1 do H6). Tema običajno že sam naslov strani spremeni v
<h1>; v besedilu zato uporabljajte H2 in nižje. Besedilo alt vpišete pri sliki v knjižnici predstavnosti ali v bloku.
Druga orodja za izdelavo spletnih strani delujejo podobno. Če ste v dvomih, poglejte izvorno kodo (Ctrl+U) ali s Ctrl+F poiščite <h1.
Povzetek
- Naslovi (
<h1>do<h6>) so kazalo Vaše strani za bralce, bralnike zaslona in iskalnike. - Google nima težav z več
<h1>ali drugačnim vrstnim redom, svetuje pa jasen glavni naslov. En jasen<h1>je dobra navada. - Raven izberite glede na zgradbo, ne glede na velikost pisave; ravni po možnosti ne preskakujte.
- Dobro besedilo alt na kratko opiše, kaj je videti; okras dobi
alt=""; brez kopičenja ključnih besed. - Pomembno besedilo sodi na stran, ne le v sliko.
Kviz
Naloga
Naloga A3.2: En glavni naslov in logična zgradba. Vpišite naslov ene strani svojega spletnega mesta. Program stran prenese, prešteje naslove <h1> in prikaže strukturo naslovov kot kazalo. Videli boste, ali je natanko en neprazen glavni naslov, ali so ravni preskočene in koliko slik nima atributa alt. Vnaprej vpišite, koliko <h1> mislite, da jih je. Nimate svojega spletnega mesta? Uporabite www.rijksoverheid.nl.
Za nadaljnje branje
- Google Search Central, vodnik za začetnike SEO (naslovi, besedilo alt): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
- Google Search Central, najboljše prakse za slike: https://developers.google.com/search/docs/appearance/google-images
- W3C WAI, Headings (dostopni naslovi): https://www.w3.org/WAI/tutorials/page-structure/headings/
- W3C WAI, besedila alt: https://www.w3.org/WAI/tutorials/images/