Nadpisy a štruktúra stránky

Modul 3: Technický základ stránky · Čas čítania: 11 minút

Cieľ lekcie: Po tejto lekcii dokážete vytvoriť stránku s jasným hlavným nadpisom a logickými podnadpismi, vysvetliť, čo s nadpismi robí Google a čítačky obrazovky, a napísať dobré alt texty a názvy súborov pre obrázky.

Kľúčové pojmy: nadpis (<h1> až <h6>), hlavný nadpis, podnadpis, preskočenie úrovne, sémantické HTML, čítačka obrazovky, formátovaný text, ktorý nie je nadpisom, alt text, prázdne alt="" pre dekoráciu, názov súboru, text v obrázkoch

Nadpisy sú obsahom vašej stránky

Dlhý text bez podnadpisov nikto nečíta rád. Na internete to platí ešte viac: návštevníci stránku najprv prebehnú očami a čítajú až vtedy, keď vidia, že v nej nájdu odpoveď. Nadpisy im v tom pomáhajú. Nadpisy sú však viac než veľké tučné písmená. V HTML sú to samostatné prvky s úrovňou:

<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 hlavný nadpis: o čom je táto stránka? Nadpisy <h2> sú kapitoly, nadpisy <h3> odseky v nich, a tak ďalej až po <h6>. Odsadenie vyššie slúži len na znázornenie; v skutočnom HTML na ňom nezáleží.

Túto štruktúru naozaj čítajú dve skupiny:

1. Ľudia s čítačkou obrazovky. Nevidiaci alebo slabozraký návštevník si často nechá čítačkou najprv vymenovať všetky nadpisy a potom preskočí na časť, ktorú hľadá. Bez skutočných nadpisov je stránka jeden dlhý kus textu.
2. Vyhľadávače. Google používa nadpisy na to, aby pochopil, o čom sú jednotlivé časti stránky.

Čo o nadpisoch hovorí Google

O nadpisoch koluje veľa mýtov. Toto hovorí samotný Google:

• V príručke SEO pre začiatočníkov od Google sa uvádza, že poradie nadpisov pre Vyhľadávanie Google nehrá rolu a že neexistuje žiadny magický počet nadpisov, ktorý by stránka mala mať. Nadpisy v logickom poradí sú však veľmi užitočné pre čítačky obrazovky.
• John Mueller z Google v jednom videu (2019) povedal, že systémy Google nemajú problém s viacerými nadpismi <h1> na stránke. Google sa snaží pracovať s HTML tak, ako je: jeden <h1>, viacero, alebo len formátovaný text bez skutočných nadpisov.
• V dokumentácii o odkazoch s názvom (lekcia 3.1) Google predsa len uvádza situáciu, ktorá môže dopadnúť zle: chýba jasný hlavný názov. Ak je hore viacero veľkých, výrazných nadpisov a nie je jasné, ktorý je hlavný, Google môže mať problém vybrať dobrý odkaz s názvom. Google odporúča hlavný nadpis zreteľne odlíšiť, napríklad ako prvý viditeľný <h1>.

Záver tohto kurzu: jeden jasný <h1> na stránku je dobrý zvyk, nie preto, že by vás Google inak trestal, ale preto, že stránka potom každému jasne hovorí, o čom je. Čitatelia, čítačky obrazovky aj Google to potom nemôžu prehliadnuť. Kontrola v úlohe A3.2 preto ukáže zelenú pri presne jednom neprázdnom <h1>, oranžovú pri viac ako jednom a červenú, ak žiadny nie je.

Čo sa často pokazí

Ako vytvoriť stránku, ktorá dáva odpoveď

Dobré poradie takmer pre každú stránku:

1. Hlavný nadpis (<h1>), ktorý hovorí, čo tu návštevník nájde. Často sa podobá na titulok z lekcie 3.1, ale nemusí byť rovnaký. Titulok sa zobrazuje vo výsledkoch vyhľadávania, hlavný nadpis na samotnej stránke.
2. Krátky úvod, v ktorom je hneď najdôležitejšia odpoveď.
3. Podnadpisy (<h2>) pre každú čiastkovú tému, napísané ako niečo, čo čitateľ hľadá: "Koľko stojí svadobná kytica?" povie viac ako "Ceny".
4. Kde treba, <h3> pod <h2>, nie samostatne.

Lekcia 7.3 sa podrobnejšie venuje samotnému písaniu. Tu ide o kostru.

Obrázky: alt text a názov súboru

Vyhľadávač "nevidí" fotografiu tak ako vy. Google používa počítačové videnie, ale veľa informácií čerpá z textu okolo. Najdôležitejší zdroj uvádza samotný Google: alt text.

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

Alt text (alternatívny text) má dve úlohy:

• Prístupnosť: čítačka obrazovky ho prečíta tomu, kto obrázok nevidí. Ak sa obrázok nenačíta, prehliadač zobrazí namiesto fotografie tento text.
• Porozumenie: Google používa alt text spolu s počítačovým videním na pochopenie toho, čo je na obrázku. Pomáha to najmä v službe Google Obrázky.

Takto napíšete dobrý alt text:

• Opíšte jednou krátkou vetou, čo je vidieť a prečo je to na tejto stránke.
• Kľúčové slová použite, len ak sa tam prirodzene hodia. Google upozorňuje, že alt texty napchané kľúčovými slovami zhoršujú používateľský zážitok a môžu byť považované za spam.
• Obrázok, ktorý slúži len ako ozdoba (čiarka, vzor pozadia), dostane prázdny alt: alt="". Čítačka obrazovky ho potom preskočí. Chýbajúci atribút alt je niečo iné: vtedy čítačka niekedy prečíta názov súboru.
• Ak je v obrázku dôležitý text (otváracie hodiny, cena, leták), uveďte tento text aj normálne na stránke. Text v obrázku sa pre čítačku obrazovky aj pre vyhľadávač číta ťažko.

Trochu pomáha aj názov súboru. Google odporúča krátke, popisné názvy a ako príklad toho, čomu sa radšej vyhnúť, uvádza image1.jpg alebo pic.gif. bruidsboeket-pioenrozen-wit.jpg (svadobná kytica, biele pivonky) povie viac ako IMG_4032.jpg.

Rýchlosti a rozmerom obrázkov sa venuje lekcia 4.3.

V praxi: nadpisy v nástrojoch na tvorbu webu

• V AI Builder od WebOké sa prvý nadpis stránky automaticky stane nadpisom <h1> a všetky ďalšie nadpisy sú <h2>. Každá stránka tak má presne jeden hlavný nadpis. Ku každej fotografii môžete vyplniť popis; ten sa stane alt textom. Kontrola SEO upozorní na fotografie bez popisu.
• Vo WordPress si v editore blokov pri bloku Nadpis zvolíte úroveň (H1 až H6). Téma zvyčajne už sama urobí z názvu stránky <h1>; v texte potom používajte H2 a nižšie. Alt text vyplníte pri obrázku v knižnici médií alebo v bloku.

Iné nástroje na tvorbu webu fungujú podobne. Ak si nie ste istí, pozrite sa do zdrojového kódu (Ctrl+U) alebo cez Ctrl+F vyhľadajte <h1.

Zhrnutie

• Nadpisy (<h1> až <h6>) sú obsahom vašej stránky pre čitateľov, čítačky obrazovky aj vyhľadávače.
• Google nemá problém s viacerými <h1> ani s iným poradím, ale odporúča jasný hlavný názov. Jeden jasný <h1> je dobrý zvyk.
• Úroveň voľte podľa štruktúry, nie podľa veľkosti písma; úrovne pokiaľ možno nepreskakujte.
• Dobrý alt text stručne opisuje, čo je vidieť; ozdoba dostane alt=""; žiadne hromadenie kľúčových slov.
• Dôležitý text patrí na stránku, nielen do obrázka.

Kvíz

Úloha

Úloha A3.2: Jeden hlavný nadpis a logická štruktúra. Zadajte adresu stránky z vášho vlastného webu. Program stránku načíta, spočíta nadpisy <h1> a zobrazí štruktúru nadpisov ako obsah. Uvidíte, či je tam presne jeden neprázdny hlavný nadpis, či sa preskakujú úrovne a koľko obrázkov nemá atribút alt. Vopred zadajte, koľko <h1> podľa vás stránka obsahuje. Nemáte vlastný web? Použite www.rijksoverheid.nl.

Čítajte ďalej

• Google Search Central, príručka SEO pre začiatočníkov (nadpisy, alt text): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, osvedčené postupy pre obrázky: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (prístupné nadpisy): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt texty: https://www.w3.org/WAI/tutorials/images/