Lekce 6 - SEO - Optimalizace HTML struktury

V minulé lekci, SEO - Optimalizace struktury webu, jsme si ukázali, jak optimalizovat strukturu webu pro uživatele i vyhledávače.

V tomto SEO tutoriálu se zaměříme na HTML strukturu a on-page optimalizaci. Ukážeme si, jak pomocí správných HTML značek vyznačit titulek, popis, nadpisy, odkazy, obrázky a hlavní části stránky.

On-page SEO

On-page SEO označuje úpravy přímo na konkrétní stránce. Patří sem prvky v hlavičce dokumentu i samotný obsah stránky. Společně pomáhají uživatelům, vyhledávačům a asistivním technologiím pochopit, co stránka nabízí.

HTML tvoří významovou kostru stránky. CSS řeší vzhled, ale HTML říká, co jednotlivé části znamenají. Pokud nadpis pouze zvětšíme pomocí CSS, člověk ho možná pozná podle vzhledu. Vyhledávač ani čtečka obrazovky z něj ale nemusí správně pochopit, že jde o nadpis.

HTML hlavička stránky

V hlavičce HTML dokumentu nastavujeme informace, které popisují stránku mimo její viditelný obsah. Pro on-page SEO jsou důležité hlavně titulek stránky a meta description.

Titulek stránky

Tag <title> určuje titulek HTML dokumentu. Zobrazuje se například na kartě prohlížeče a Google ho často používá jako název výsledku ve vyhledávání.

Vyhledávač si ale může vytvořit i vlastní titulek, pokud pro daný dotaz uzná jiný text za vhodnější.

Titulek má být na každé důležité podstránce unikátní. Má stručně vystihnout obsah stránky a přirozeně obsahovat hlavní téma.

Příklad titulku hlavní stránky e-shopu:

<title>Zelená domácnost - Pokojové rostliny a květináče</title>

Příklad titulku kategorie:

<title>Pokojové rostliny - Zelená domácnost</title>

Titulek nepřeplňujeme klíčovými slovy. Varianta typu Rostliny, pokojové rostliny, levné rostliny, rostliny Praha nepůsobí důvěryhodně a uživateli příliš nepomůže.

Meta description

Meta description je krátký popis obsahu stránky. Zapisuje se do HTML hlavičky jako meta tag description a může se zobrazit ve výsledcích vyhledávání jako úryvek pod titulkem.

Description není přímý nástroj pro zlepšení pozice. Jeho praktická hodnota je hlavně v tom, že může ovlivnit, zda uživatel na výsledek klikne. Popis by proto měl být konkrétní, pravdivý a napsaný pro člověka.

Příklad dobře napsaného popisu:

<meta name="description" content="Vyberte si pokojovou rostlinu podle stanoviště, náročnosti péče a velikosti. Poradíme, které druhy se hodí do vašeho bytu.">

Příklad příliš obecného popisu:

<meta name="description" content="Stránka s rostlinami">

Každá důležitá stránka má obsahovat vlastní unikátní popis. Pokud popis neodpovídá obsahu stránky, vyhledávač jej pravděpodobně nahradí jiným úryvkem.

V minulosti se používal také meta tag s hodnotou keywords, do kterého autoři webů vkládali klíčová slova. Protože se často zneužíval k vkládání výrazů nesouvisejících s obsahem stránky, Google ho pro řazení výsledků nepoužívá.

Obsah stránky

Po hlavičce dokumentu se přesuneme k prvkům, které uživatel vidí přímo na stránce. Nadpisy, odstavce, zvýraznění, odkazy a obrázky netvoří jen vzhled obsahu. Každý z těchto prvků má vlastní význam a měl by být zapsaný odpovídající HTML značkou.

Nadpisy stránky

Nadpisy <h1> až <h6> rozdělují stránku na hlavní téma, části a podčásti. Uživatel díky nim rychle pochopí strukturu textu a vyhledávač lépe pozná, která témata stránka řeší.

Každá důležitá podstránka by měla mít jasné téma. Pokud se jedna stránka snaží řešit příliš mnoho různých věcí, bude méně srozumitelná. Naopak stránka s jasným účelem se lépe píše, lépe čte a lépe optimalizuje.

Na stránce obvykle používáme jeden hlavní nadpis <h1>. Ten vystihuje hlavní téma stránky. Pod ním používáme nižší úrovně nadpisů, například <h2> pro hlavní části a <h3> pro podrobnější podsekce.

Příklad jednoduché struktury stránky produktu:

<h1>Monstera Deliciosa</h1>

<p>Monstera Deliciosa je oblíbená pokojová rostlina s výraznými vykrajovanými listy.</p>

<h2>Péče o rostlinu</h2>
<p>V této části najdeme informace o světle, zálivce, vlhkosti a vhodném umístění.</p>

<h2>Uživatelské recenze</h2>
<p>Zde najdeme zkušenosti zákazníků, kteří rostlinu pěstují doma.</p>

Nadpisy mají odpovídat skutečné struktuře obsahu. Nepoužíváme je jen kvůli většímu písmu a bez důvodu nepřeskakujeme úrovně, například z <h1> rovnou na <h3>.

Odstavce a zvýraznění

Text stránky členíme do odstavců pomocí značky <p>. Krátké a přehledné odstavce jsou čitelnější než dlouhé bloky textu. Dobrá čitelnost pomáhá uživateli, a tím nepřímo pomáhá i SEO.

Pro významové zdůraznění používáme značku <strong>. Ta obvykle vykreslí text tučně a zároveň nese význam důrazu. Pro čistě vizuální tučné písmo bez významu použijeme CSS nebo značku <b> podle kontextu.

Příklad významového zvýraznění:

<p>Rostlina potřebuje <strong>dostatek rozptýleného světla</strong>, aby dobře rostla a vytvářela nové listy.</p>

Zvýrazňování nepřeháníme. Pokud je tučně téměř vše, uživatel nepozná, co je skutečně důležité.

Odkazy

Roboti vyhledávačů se po webu pohybují pomocí odkazů. Odkaz zároveň pomáhá pochopit vztah mezi stránkami. Proto je důležitý nejen samotný odkaz, ale také jeho text.

Příklad neurčitého odkazu:

<p>O péči o pokojové rostliny jsme již psali <a href="pece-o-pokojove-rostliny.html">tady</a>.</p>

Příklad popisného odkazu:

<p>Již jsme psali o <a href="pece-o-pokojove-rostliny.html">péči o pokojové rostliny</a>.</p>

Text odkazu by měl přirozeně říkat, kam odkaz vede. Nepoužíváme stále stejný přesný anchor text jen kvůli SEO. Odkaz má v první řadě pomoci čtenáři pokračovat k souvisejícímu obsahu.

Odkaz má být skutečný HTML odkaz se značkou <a> a atributem href. Pokud kliknutí řeší pouze JavaScript bez běžné URL adresy, vyhledávač nemusí odkaz spolehlivě najít.

Obrázky

Obrázky mohou zlepšit srozumitelnost stránky, ale musí být správně vložené. Každý významový obrázek by měl mít atribut alt, tedy alternativní text. Ten pomáhá uživatelům s hlasovou čtečkou, zobrazí se při problému s načtením obrázku a pomáhá vyhledávačům pochopit obsah obrázku.

Nevhodný příklad obrázku:

<img src="obrazky/15615652891.jpg">

Lepší varianta obrázku:

<img src="obrazky/rostliny/monstera-deliciosa.jpg" alt="Monstera Deliciosa v květináči">

Alternativní text popisuje obsah a účel obrázku v kontextu stránky. Neslouží k hromadění klíčových slov. Pokud je obrázek pouze dekorativní a nepředává žádnou informaci, použijeme prázdný atribut alt="", aby ho čtečka přeskočila.

U obrázků řešíme také velikost souboru. Příliš velké obrázky zpomalují načítání stránky. Používáme rozumné rozměry, kompresi a moderní formáty, například WebP nebo AVIF, pokud jsou vhodné pro daný web.

Sémantické HTML

Moderní HTML obsahuje značky, které pomáhají popsat význam jednotlivých částí stránky. Patří sem například <header>, <nav>, <main>, <article>, <section>, <aside> a <footer>.

Tyto značky samy o sobě nezajistí lepší pozice ve vyhledávání. Pomáhají ale vytvořit přehledný dokument, ve kterém je jasné, kde je navigace, hlavní obsah, samostatný článek nebo patička:

Na schématu vidíme běžné rozložení stránky. Značka <header> označuje hlavičku, <nav> navigaci, <section> větší obsahovou část, <article> samostatný článek, <aside> postranní obsah a <footer> patičku. Stejnou strukturu můžeme zapsat přímo v HTML.

Typické použití sémantických značek:

<header>
    <h1>Zelená domácnost</h1>
</header>

<nav>
    <ul>
        <li><a href="pokojove-rostliny.html">Pokojové rostliny</a></li>
        <li><a href="kvetinace.html">Květináče</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

<main>
    <article>
        <h2>Jak pečovat o monsteru</h2>
        <p>V článku si vysvětlíme, kam monsteru umístit, jak ji zalévat a kdy ji přesadit.</p>
    </article>
</main>

<footer>
    <p>&copy; Zelená domácnost</p>
</footer>

Základní navigace, hlavní obsah a důležité odkazy mají být dostupné přímo v HTML. JavaScript může doplnit interaktivitu, ale neměl by být jediným způsobem, jak se k obsahu dostat.

Správnost HTML můžeme ověřit pomocí validátoru W3C. Ten zkontroluje, zda stránka neobsahuje chybně zapsané značky, špatně vnořené prvky nebo chybějící povinné atributy. Validní HTML samo o sobě nezaručí lepší pozice ve vyhledávání, ale pomáhá odstranit technické chyby, které mohou zhoršit přístupnost, čitelnost kódu nebo zpracování stránky.

Pokročilejší popis obsahu řeší strukturovaná data. Používají se například u produktů, recenzí nebo událostí, kde vyhledávači předáváme přesnější informace o obsahu stránky.

Závěr

HTML struktura dává stránce jasný význam. Titulek a meta description pomáhají stránku představit v prohlížeči a ve výsledcích vyhledávání. Nadpisy, odkazy, obrázky a sémantické značky zase zpřehledňují samotný obsah. Dobré on-page SEO proto spojuje technicky správný HTML zápis s obsahem, který odpovídá konkrétní potřebě uživatele.

V následujícím kvízu, Kvíz - SEO struktura webu a HTML, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.