Nadpisy nejsou jen vizuální ozdoba textu. Tvoří kostru, podle které stránku čte návštěvník i vyhledávač. Kdo se pustí do kontroly nadpisů H1-H6, obvykle zjistí, že struktura na první pohled vypadá v pořádku, jenže uvnitř kódu chybí logika, tedy přeskočené úrovně, více H1 na jedné stránce nebo nadpisy použité jen kvůli velikosti písma. Rychlou orientaci v tom, jak na tom vlastní web je, nabízí i automatizovaný test, dostupný zdarma na tomto odkazu. Tento text vysvětluje, jak má hierarchie nadpisů vypadat, proč na ní záleží nejen pro SEO, nýbrž i pro přístupnost, a jaké chyby se v praxi objevují nejčastěji.

Co znamená hierarchie nadpisů H1 až H6

HTML nabízí šest úrovní nadpisů, H1 jako nejvyšší a nejdůležitější, H6 jako nejnižší. V praxi se běžně využívají první tři až čtyři úrovně, zbytek zůstává spíš teoretickou možností. Podrobný rozbor nabízí tento přehled o tom, jak psát poutavé nadpisy.

Základní pravidlo je jednoduché: úrovně by měly jít postupně za sebou. Po H1 následuje H2, po H2 případně H3, bez přeskakování. Nadpis by se navíc nikdy neměl volit podle toho, jak velké písmo potřebujete, ale podle toho, jakou pozici text zaujímá ve struktuře obsahu. Když H3 vizuálně sedí lépe než H2, řeší se to úpravou stylu, nikoli záměnou úrovně.

Kolik H1 stránka potřebuje

Většina doporučení se shoduje na tom, že by na stránce měl být přesně jeden H1, který shrnuje hlavní téma. HTML technicky povoluje i více H1 nadpisů, Google opakovaně potvrdil, že to samo o sobě není chyba, přesto se v praxi jeden jasně definovaný H1 dlouhodobě osvědčuje jako nejčistší a nejsrozumitelnější řešení.

Čím se H1 liší od meta title

H1 a meta title mají v hlavičce dokumentu podobnou roli, přesto to nejsou zaměnitelné položky. Meta title se zobrazuje ve výsledcích vyhledávání a na kartě prohlížeče, H1 naopak vidí jen ten, kdo stránku skutečně otevře. Oba texty se proto nemusí shodovat do písmene, měly by ale popisovat totéž téma. Výrazný rozpor mezi tím, co slibuje titulek, a tím, co oznamuje H1 na stránce, působí matoucím dojmem jak na čtenáře, tak na vyhledávač.

Proč na hierarchii záleží i mimo SEO

Nadpisy neslouží pouze algoritmům. Lidé používající čtečky obrazovky se mezi jednotlivými sekcemi stránky přesouvají právě pomocí nadpisů, přeskakují rovnou k té části obsahu, která je zajímá, aniž by museli poslouchat celou stránku od začátku.

Přeskočená úroveň nadpisu nepůsobí problém jen strojům. Čtenář, který se v textu orientuje pomocí nadpisů, ztrácí pocit logické návaznosti, i když si to na první pohled ani neuvědomí.

Podobně čistou strukturu dnes vyžadují i nástroje umělé inteligence, které při generování odpovědí čerpají z obsahu webových stránek. Přehledná hierarchie nadpisů jim usnadňuje rozpoznat, která část textu odpovídá na jakou otázku, a zvyšuje šanci, že vybraný úryvek bude odpovídat kontextu, ze kterého pochází.

Proč nadpisy pomáhají i běžnému čtenáři

Naprostá většina návštěvníků web nečte slovo od slova, ale prolétne stránku pohledem a teprve podle toho, co v nadpisech zaujme, se rozhodne, kde se zastavit. Klasický výzkum chování uživatelů na webu ukázal, že jasné podnadpisy a odrážky dokázaly zlepšit měřenou použitelnost stránky o 47 procent oproti verzi bez nich. Nadpisy tak fungují jako mapa, podle které se čtenář v obsahu rychle zorientuje.

Nejčastější chyby, na které kontrola narazí

V praxi se opakuje několik stejných problémů:

  1. Chybějící H1, často u stránek generovaných šablonou, kde vývojář použil místo něj obyčejný odstavec.
  2. Více H1 vzniklých neúmyslně, třeba když dynamický blok doporučených produktů nebo článků přidá vlastní H1 ke každé položce.
  3. Přeskočené úrovně, kdy po H1 rovnou následuje H3 nebo H4.
  4. Nadpisy zneužité jen jako stylistický prvek pro zvětšení písma, bez ohledu na skutečnou strukturu obsahu.
  5. Duplicitní H1 opakovaně použitý na desítkách podobných stránek.

Kdy je kontrola obzvlášť náročná

Ruční procházení nadpisové struktury zvládne člověk bez potíží u menšího webu s pár desítkami stránek. Jakmile ale nadpisy generuje šablona automaticky, například na e-shopu s tisíci produkty, chyba v jedné šabloně se znásobí na každou stránku, která ji používá. Tomu, jak přesně takové systematické chyby vznikají a kde je hledat, se podrobně věnuje tento rozbor kontroly nadpisů H1-H6 na příkladu e-shopu, který situaci popisuje na konkrétních případech z praxe.

Jak nadpisovou strukturu prakticky zkontrolovat

Nejjednodušší cesta vede přes zobrazení zdrojového kódu stránky v prohlížeči a vyhledání všech značek h1 až h6 v pořadí, v jakém se v dokumentu objevují. U kratší stránky tento postup zabere pár minut a rovnou ukáže, jestli hierarchie odpovídá logice obsahu.

Řada moderních prohlížečů navíc nabízí ve vývojářských nástrojích přímo panel pro přístupnost, který strukturu nadpisů zobrazí přehledně jako stromovou mapu, bez nutnosti procházet celý zdrojový kód ručně. To se hodí zejména ve chvíli, kdy chcete rychle posoudit, jestli hierarchie nadpisů odpovídá tomu, jak je stránka vizuálně rozdělená do sekcí.

Co si z této kontroly odnést

Nadpisy H1 až H6 vytvářejí kostru, podle které se stránkou orientuje čtenář, čtečka obrazovky i vyhledávač. Jediný H1, postupná hierarchie bez přeskočených úrovní a nadpisy volené podle obsahu, ne podle vzhledu, patří mezi opravy, které nezaberou mnoho času, ale ovlivňují srozumitelnost stránky pro všechny, kdo na ni narazí.

Prošli jste strukturu nadpisů na svém webu už někdy záměrně, nebo se spoléháte na to, že šablona nadpisy nastavila správně sama?

Michaela Smrčková
Views: (7)