Nadpisy a struktura stránky

Modul 3: Technický základ stránky · Doba čtení: 11 minut

Cíl lekce: Po této lekci dokážete postavit stránku s jasným hlavním nadpisem a logickými mezititulky, vysvětlit, co s nadpisy dělá Google a čtečky obrazovky, a napsat dobré alternativní texty a názvy souborů pro obrázky.

Klíčové pojmy: nadpis (<h1> až <h6>), hlavní nadpis, mezititulek, přeskočení úrovně, sémantické HTML, čtečka obrazovky, formátovaný text, který není nadpisem, alternativní text (alt), prázdné alt="" pro dekoraci, název souboru, text v obrázcích

Nadpisy jsou obsahem Vaší stránky

Dlouhý text bez mezititulků nikdo nečte rád. Na internetu to platí ještě víc: návštěvníci stránku nejdřív rychle projdou očima a čtou teprve tehdy, když vidí, že v ní najdou odpověď. Nadpisy jim v tom pomáhají. Nadpisy jsou ale víc než velká tučná písmena. V HTML jsou to samostatné prvky s úrovní:

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

(Příklad pochází z nizozemského květinářství: „Svatební kytice na míru“, „Jak pracujeme“, „Seznámení“, „Zkušební kytice“, „Ukázky“, „Časté dotazy“.) <h1> je hlavní nadpis: o čem tato stránka je? Nadpisy <h2> jsou kapitoly, <h3> oddíly v nich a tak dále až po <h6>. Odsazení výše slouží jen pro názornost; ve skutečném HTML nehraje roli.

Tuto strukturu skutečně čtou dvě skupiny:

1. Lidé se čtečkou obrazovky. Nevidomý nebo slabozraký návštěvník si často nechá čtečkou nejdřív vyjmenovat všechny nadpisy a pak skočí na část, kterou hledá. Bez skutečných nadpisů je stránka jeden dlouhý souvislý text.
2. Vyhledávače. Google používá nadpisy k tomu, aby pochopil, o čem jednotlivé části stránky jsou.

Co o nadpisech říká Google

O nadpisech koluje spousta mýtů. Tohle říká sám Google:

• V úvodní příručce SEO od Googlu stojí, že na pořadí nadpisů nezáleží pro Vyhledávání Google a že neexistuje žádný magický počet nadpisů, který by stránka měla mít. Nadpisy v logickém pořadí jsou ale velmi přínosné pro čtečky obrazovky.
• John Mueller z Googlu ve videu (2019) řekl, že systémy Googlu nemají problém s více nadpisy <h1> na jedné stránce. Google se snaží pracovat s HTML tak, jak je: s jedním <h1>, s několika, nebo jen s formátovaným textem bez skutečných nadpisů.
• V dokumentaci o odkazech s titulkem (lekce 3.1) ale Google uvádí situaci, která se může pokazit: chybí jasný hlavní titulek. Pokud je nahoře několik velkých, výrazných nadpisů a není jasné, který z nich je hlavní, může mít Google potíže vybrat dobrý odkaz s titulkem. Google doporučuje hlavní nadpis jasně odlišit, například jako první viditelný <h1>.

Závěr tohoto kurzu: jeden jasný <h1> na stránku je dobrý zvyk, ne proto, že by Vás jinak Google trestal, ale proto, že stránka pak všem jasně říká, o čem je. Čtenáři, čtečky obrazovky ani Google to pak nemohou přehlédnout. Kontrola v úkolu A3.2 proto ukáže zelenou při právě jednom neprázdném <h1>, oranžovou při více než jednom a červenou, pokud žádný není.

Co se často pokazí

Stavba stránky, která dává odpověď

Dobré pořadí pro téměř každou stránku:

1. Hlavní nadpis (<h1>), který říká, co zde návštěvník najde. Často se podobá titulku z lekce 3.1, ale nemusí být stejný. Titulek se zobrazuje ve výsledcích vyhledávání, hlavní nadpis na samotné stránce.
2. Krátký úvod s nejdůležitější odpovědí hned na začátku.
3. Mezititulky (<h2>) pro každé dílčí téma, formulované jako něco, co čtenář hledá: „Kolik stojí svatební kytice?“ řekne víc než „Ceny“.
4. Podle potřeby <h3> pod <h2>, ne samostatně.

Samotnému psaní se podrobněji věnuje lekce 7.3. Zde jde o kostru.

Obrázky: alternativní text a název souboru

Vyhledávač „nevidí“ fotografii tak jako Vy. Google sice používá počítačové vidění, ale hodně informací čerpá z okolního textu. Nejdůležitější zdroj jmenuje sám Google: alternativní text (alt).

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

(Alternativní text v příkladu znamená „Svatební kytice s bílými pivoňkami a eukalyptem“.) Alternativní text má dva úkoly:

• Přístupnost: čtečka obrazovky jej přečte těm, kdo obrázek nevidí. Pokud se obrázek nenačte, prohlížeč zobrazí místo fotografie tento text.
• Porozumění: Google používá alternativní text spolu s počítačovým viděním k pochopení, co je na obrázku. To pomáhá hlavně v Obrázcích Google.

Jak napsat dobrý alternativní text:

• Popište jednou krátkou větou, co je vidět a proč je to na této stránce.
• Klíčová slova používejte jen tehdy, když tam přirozeně patří. Google varuje, že alternativní texty nacpané klíčovými slovy zhoršují uživatelský dojem a mohou být považovány za spam.
• Obrázek, který slouží jen jako ozdoba (linka, vzor pozadí), dostane prázdný alt: alt="". Čtečka obrazovky jej pak přeskočí. Chybějící atribut alt je něco jiného: čtečka obrazovky pak někdy přečte název souboru.
• Pokud je v obrázku důležitý text (otevírací doba, cena, leták), uveďte tento text také normálně na stránce. Text v obrázku čtečka obrazovky i vyhledávač čtou obtížně.

Trochu pomáhá i název souboru. Google doporučuje krátké, popisné názvy a jako příklad toho, čemu se raději vyhnout, uvádí image1.jpg nebo pic.gif. bruidsboeket-pioenrozen-wit.jpg řekne víc než IMG_4032.jpg.

Rychlosti a rozměrům obrázků se věnuje lekce 4.3.

V praxi: nadpisy v nástrojích pro tvorbu webu

• V AI Builderu od WebOké se první nadpis stránky automaticky stane <h1> a všechny další nadpisy jsou <h2>. Každá stránka tak má právě jeden hlavní nadpis. U každé fotografie můžete vyplnit popis; ten se stane alternativním textem. Kontrola SEO upozorní na fotografie bez popisu.
• Ve WordPressu zvolíte v editoru bloků u bloku Nadpis úroveň (H1 až H6). Šablona obvykle sama udělá z titulku stránky <h1>; v textu pak používejte H2 a nižší. Alternativní text vyplníte u obrázku v Knihovně médií nebo přímo v bloku.

Ostatní nástroje pro tvorbu webu fungují podobně. V případě pochybností se podívejte do zdrojového kódu (Ctrl+U) nebo pomocí Ctrl+F vyhledejte <h1.

Shrnutí

• Nadpisy (<h1> až <h6>) jsou obsahem Vaší stránky pro čtenáře, čtečky obrazovky i vyhledávače.
• Google nemá problém s více <h1> ani s jiným pořadím, ale doporučuje jasný hlavní titulek. Jeden jasný <h1> je dobrý zvyk.
• Úroveň volte podle struktury, ne podle velikosti písma; pokud možno nepřeskakujte úrovně.
• Dobrý alternativní text stručně popisuje, co je vidět; ozdoby dostanou alt=""; žádné hromadění klíčových slov.
• Důležitý text patří na stránku, ne jen do obrázku.

Kvíz

Úkol

Úkol A3.2: Jeden hlavní nadpis a logická struktura. Zadejte adresu některé stránky svého webu. Program stránku načte, spočítá nadpisy <h1> a zobrazí strukturu nadpisů jako obsah. Uvidíte, zda je na stránce právě jeden neprázdný hlavní nadpis, zda se přeskakují úrovně a kolik obrázků nemá atribut alt. Předem vyplňte, kolik <h1> podle Vás stránka má. Nemáte vlastní web? Použijte www.rijksoverheid.nl.

Další čtení

• Google Search Central, úvodní příručka SEO (nadpisy, alternativní text): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, osvědčené postupy pro obrázky: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (přístupné nadpisy): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alternativní texty: https://www.w3.org/WAI/tutorials/images/