Načo nadpisy sú
Nadpisy tvoria osnovu dokumentu. Stroj z nich číta, o čom stránka je a ako je členená — bez toho, aby musel spracovať celý text. Pre čitateľa s odčítavačom obrazovky sú navigáciou: dá sa nimi po stránke skákať.
To je ich úloha. Nie sú to miesta na kľúčové slová a nie sú to štýlové značky.
Čo platí
Poradie úrovní
Po <h2> nasleduje <h3>, nie <h4>. Preskočená úroveň mätie osnovu a je to chyba prístupnosti. Toto je z celého zoznamu tá najdôležitejšia vec a zároveň tá, ktorá sa porušuje najčastejšie — zvyčajne preto, že sa úroveň vyberá podľa veľkosti písma.
Riešenie je banálne: úroveň vyberte podľa štruktúry a veľkosť nastavte v CSS. Nadpis smie byť malý a stále byť <h2>.
Nadpis má opisovať obsah
Nadpis „Riešenia“ nehovorí nič. „Ako prebieha inštalácia“ hovorí, čo pod ním je. Pomáha to stroju aj človeku, ktorý stránku prebehne očami — a väčšina ľudí ju prebehne očami.
Nadpisy nemajú byť prázdne ani obrázkové
Nadpis, ktorý obsahuje len obrázok bez alternatívneho textu, je pre stroj prázdny. To isté platí o nadpise, do ktorého sa dopĺňa text až skriptom.
Čo neplatí
„Na stránke smie byť len jeden H1“
V HTML5 to takto striktne neplatí a viac <h1> stránku nerozbije. Jeden hlavný nadpis je však stále lepší nápad — nie kvôli pravidlu, ale preto, že stránka, ktorá potrebuje dva rovnocenné hlavné nadpisy, väčšinou rieši dve veci naraz a mala by byť rozdelená.
„H1 musí obsahovať kľúčové slovo“
Nemusí. Pomáha to, ale nie je to podmienka a nie je to dôvod pokaziť dobrý nadpis. Ak je vaším H1 slogan značky a kľúčové slovo nesú <h2>, drobčeky a titulok, stránka má kontext.
Kde to začne vadiť: ak kľúčové slovo nie je ani v nadpisoch, ani v titulku, ani v prvom odseku. Vtedy stránka naozaj nepovie, o čom je.
„Kľúčové slovo má byť čo najbližšie k začiatku“
Mikrooptimalizácia, ktorá dnes nemá merateľný efekt a často pokazí zrozumiteľnosť.
„Nadpisov má byť čo najviac“
Nemá. Nadpis, pod ktorým je jedna veta, členenie nevytvára, len tříští text.
Overte si osnovu za minútu
V prehliadači otvorte vývojárske nástroje a v konzole spustite:
$$('h1,h2,h3,h4').map(e=>e.tagName+' '+e.innerText.slice(0,60))
Dostanete osnovu stránky. Prečítajte ju ako obsah knihy — dáva zmysel sama o sebe? Preskakuje úroveň? Je tam nadpis, ktorý nič nehovorí? Je tam prázdny reťazec?
Ak osnova dáva zmysel bez zvyšku textu, štruktúra je v poriadku. Ak nie, problém nie je v značkách, ale v členení stránky.
Čo s tým na domovskej stránke
Domovské stránky mávajú ako <h1> slogan. Nie je to chyba, ak zvyšok stránky povie, o čo ide — sekcie s <h2>, ktoré menujú služby, a titulok, ktorý obsahuje odbor a mesto.
Ak je slogan jediné, čo na stránke je, problém nie je v nadpise. Problém je v tom, že stránka nikde nehovorí, čo firma robí.
Kompromis, ktorý funguje: nechať slogan ako <h1> a hneď pod ním mať vetu, ktorá odbor a mesto pomenuje bežnými slovami. Nie je to nadpis, ale je to prvý odsek — a ten sa váži hneď za nadpismi.