Naslovi i struktura stranice

Modul 3: Tehnička osnova stranice · Vrijeme čitanja: 11 min

Cilj učenja: Nakon ove lekcije znat ćete složiti stranicu s jasnim glavnim naslovom i logičnim podnaslovima, objasniti što Google i čitači zaslona rade s naslovima te napisati dobar alt tekst i dobre nazive datoteka za slike.

Ključni pojmovi: naslov (<h1> do <h6>), glavni naslov, podnaslov, preskakanje razine, semantički HTML, čitač zaslona, oblikovani tekst koji nije naslov, alt tekst, prazan alt="" za ukrase, naziv datoteke, tekst u slikama

Naslovi su sadržaj Vaše stranice

Dugačak tekst bez podnaslova nitko ne čita rado. Na internetu to vrijedi još više: posjetitelji stranicu najprije letimično pregledaju, a čitaju tek kada vide da se u njoj nalazi odgovor. Naslovi im u tome pomažu. No naslovi su više od velikih, podebljanih slova. U HTML-u su to zasebni elementi s određenom razinom:

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

(Primjer je sa stranice cvjećarnice: "Bruidsboeketten op maat" znači "Vjenčani buketi po mjeri", a podnaslovi su "Ovako radimo", "Upoznavanje", "Probni buket", "Primjeri" i "Česta pitanja".) Naslov <h1> je glavni naslov: o čemu je ova stranica? Naslovi <h2> su poglavlja, naslovi <h3> odlomci unutar njih, i tako dalje sve do <h6>. Uvlačenje gore služi samo kao prikaz; u stvarnom HTML-u nije važno.

Tu strukturu zaista čitaju dvije skupine:

1. Ljudi koji koriste čitač zaslona. Slijepi ili slabovidni posjetitelj često najprije zatraži od čitača zaslona da nabroji sve naslove, a zatim skoči na dio koji traži. Bez pravih naslova stranica je jedan dugačak blok teksta.
2. Tražilice. Google koristi naslove kako bi razumio o čemu govore pojedini dijelovi stranice.

Što Google kaže o naslovima

O naslovima kruže brojni mitovi. Evo što kaže sam Google:

• U Googleovu SEO vodiču za početnike piše da redoslijed naslova za Google Search nije važan i da ne postoji čarobni broj naslova koje stranica mora imati. Naslovi u logičnom redoslijedu ipak su vrlo korisni za čitače zaslona.
• John Mueller iz Googlea rekao je u jednom videu (2019.) da Googleovi sustavi nemaju problema s više naslova <h1> na jednoj stranici. Google nastoji raditi s HTML-om kakav jest: s jednim <h1>, s više njih ili samo s oblikovanim tekstom bez pravih naslova.
• U dokumentaciji o naslovnim poveznicama (lekcija 3.1) Google ipak navodi situaciju koja može poći po zlu: nema jasnog glavnog naslova. Ako se na vrhu nalazi više velikih, upadljivih naslova i nije jasno koji je glavni, Google može teško odabrati dobru naslovnu poveznicu. Google preporučuje da se glavni naslov jasno istakne, primjerice kao prvi vidljivi <h1>.

Zaključak ovog tečaja: jedan jasan <h1> po stranici dobra je navika, ne zato što bi Vas Google inače kaznio, nego zato što tada stranica svima jasno kaže o čemu govori. Čitatelji, čitači zaslona i Google to onda ne mogu previdjeti. Provjera u zadatku A3.2 zato daje zeleno za točno jedan neprazan <h1>, narančasto za više od jednog i crveno ako ga nema.

Što često pođe po zlu

Stranica koja daje odgovor

Dobar redoslijed za gotovo svaku stranicu:

1. Glavni naslov (<h1>) koji kaže što posjetitelj ovdje pronalazi. Često je sličan naslovu iz lekcije 3.1, ali ne mora biti jednak. Naslov se prikazuje u rezultatima pretraživanja, a glavni naslov na samoj stranici.
2. Kratak uvod s najvažnijim odgovorom odmah na početku.
3. Podnaslovi (<h2>) za svaku podtemu, napisani kao nešto što čitatelj traži: "Koliko košta vjenčani buket?" govori više od "Cijene".
4. Po potrebi <h3> ispod naslova <h2>, a ne samostalno.

Lekcija 7.3 bavi se samim pisanjem. Ovdje je riječ o kosturu stranice.

Slike: alt tekst i naziv datoteke

Tražilica ne "vidi" fotografiju onako kako je vidite Vi. Google koristi računalni vid, ali mnogo informacija izvlači iz teksta oko slike. Najvažniji izvor Google sam navodi: alt tekst.

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

(Alt tekst u primjeru znači "Vjenčani buket s bijelim božurima i eukaliptusom".) Alt tekst (alternativni tekst) ima dvije zadaće:

• Pristupačnost: čitač zaslona čita ga naglas onima koji ne mogu vidjeti sliku. Ako se slika ne može učitati, preglednik umjesto fotografije prikazuje taj tekst.
• Razumijevanje: Google koristi alt tekst, zajedno s računalnim vidom, kako bi razumio što je na slici. To posebno pomaže u Google Images.

Ovako ćete napisati dobar alt tekst:

• Jednom kratkom rečenicom opišite što se vidi i zašto se slika nalazi na ovoj stranici.
• Ključne riječi koristite samo ako se prirodno uklapaju. Google upozorava da alt tekstovi pretrpani ključnim riječima stvaraju loše iskustvo i mogu se smatrati spamom.
• Slika koja služi samo kao ukras (crtica, pozadinski uzorak) dobiva prazan alt: alt="". Tada je čitač zaslona preskače. Atribut alt koji nedostaje nešto je drugo: tada čitač zaslona ponekad naglas pročita naziv datoteke.
• Ako se na slici nalazi važan tekst (radno vrijeme, cijena, letak), stavite taj tekst i kao običan tekst na stranicu. Tekst u slici teško čitaju i čitači zaslona i tražilice.

I naziv datoteke malo pomaže. Google preporučuje kratke, opisne nazive i kao primjer onoga što je bolje izbjegavati navodi image1.jpg ili pic.gif. bruidsboeket-pioenrozen-wit.jpg govori više od IMG_4032.jpg.

Brzinom i dimenzijama slika bavimo se u lekciji 4.3.

U praksi: naslovi u alatima za izradu web-stranica

• U WebOké AI Builderu prvi naslov stranice automatski postaje <h1>, a svi sljedeći naslovi postaju <h2>. Tako svaka stranica ima točno jedan glavni naslov. Uz svaku fotografiju možete upisati opis; on postaje alt tekst. SEO provjera upozorava na fotografije bez opisa.
• U WordPressu u uređivaču blokova kod bloka Naslov birate razinu (H1 do H6). Tema obično već sam naslov stranice pretvara u <h1>; u tekstu tada koristite H2 i niže razine. Alt tekst upisujete uz sliku u medijskoj biblioteci ili u bloku.

Drugi alati za izradu web-stranica rade slično. Ako niste sigurni, pogledajte izvorni kod (Ctrl+U) ili pomoću Ctrl+F potražite <h1.

Sažetak

• Naslovi (<h1> do <h6>) su sadržaj Vaše stranice za čitatelje, čitače zaslona i tražilice.
• Google nema problema s više naslova <h1> ni s drukčijim redoslijedom, ali preporučuje jasan glavni naslov. Jedan jasan <h1> dobra je navika.
• Razinu birajte prema strukturi, a ne prema veličini slova; po mogućnosti ne preskačite razine.
• Dobar alt tekst kratko opisuje što se vidi; ukrasi dobivaju alt=""; bez gomilanja ključnih riječi.
• Važan tekst pripada stranici, a ne samo slici.

Kviz

Zadatak

Zadatak A3.2: Jedan glavni naslov i logična struktura. Upišite adresu jedne stranice Vašeg web-mjesta. Program dohvaća stranicu, broji naslove <h1> i prikazuje strukturu naslova kao sadržaj. Vidjet ćete postoji li točno jedan neprazan glavni naslov, preskaču li se razine i koliko slika nema atribut alt. Prije toga upišite koliko naslova <h1> mislite da ima. Nemate vlastito web-mjesto? Upotrijebite www.rijksoverheid.nl.

Dodatno štivo

• Google Search Central, SEO vodič za početnike (naslovi, alt tekst): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, najbolje prakse za slike: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (pristupačni naslovi): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt tekstovi: https://www.w3.org/WAI/tutorials/images/