6. diel - SEO - Optimalizácia HTML štruktúry Nové

V minulej lekcii, SEO - Optimalizácia štruktúry webu , sme si ukázali, ako optimalizovať štruktúru webu pre užívateľov aj vyhľadávače.

V tomto SEO tutoriáli sa zameriame na HTML štruktúru a on-page optimalizáciu. Ukážeme si, ako pomocou správnych HTML značiek vyznačiť titulok, popis, nadpisy, odkazy, obrázky a hlavné časti stránky.

On-page SEO

On-page SEO označuje úpravy priamo na konkrétnej stránke. Patria sem prvky v hlavičke dokumentu aj samotný obsah stránky. Spoločne pomáhajú používateľom, vyhľadávačom a asistívnym technológiám pochopiť, čo stránka ponúka.

HTML tvorí významovú kostru stránky. CSS rieši vzhľad, ale HTML hovorí, čo jednotlivé časti znamenajú. Ak nadpis iba zväčšíme pomocou CSS, človek ho možno rozpozná podľa vzhľadu. Vyhľadávač ani čítačka obrazovky z neho však nemusia správne pochopiť, že ide o nadpis.

HTML hlavička stránky

V hlavičke HTML dokumentu nastavujeme informácie, ktoré opisujú stránku mimo jej viditeľného obsahu. Pre on-page SEO sú dôležité hlavne titulok stránky a meta popis (anglicky meta description).

Titulok stránky

Značka (anglicky tag) <title> určuje titulok HTML dokumentu. Zobrazuje sa napríklad na karte prehliadača a Google ho často používa ako názov výsledku vo vyhľadávaní.

Vyhľadávač si však môže vytvoriť aj vlastný titulok, ak pre daný dopyt uzná iný text za vhodnejší.

Titulok má byť na každej dôležitej podstránke unikátny. Má stručne vystihnúť obsah stránky a prirodzene obsahovať hlavnú tému.

Príklad titulku hlavnej stránky e-shopu:

<title>Zelená domácnosť - Izbové rastliny a kvetináče</title>

Príklad titulku kategórie:

<title>Izbové rastliny - Zelená domácnosť</title>

Titulok neprepĺňame kľúčovými slovami. Variant typu Rastliny, izbové rastliny, lacné rastliny, rastliny Bratislava nepôsobí dôveryhodne a používateľovi príliš nepomôže.

Meta description

Meta description je krátky opis obsahu stránky. Zapisuje sa do HTML hlavičky ako meta tag description a môže sa zobraziť vo výsledkoch vyhľadávania ako úryvok pod titulkom.

Description nie je priamy nástroj na zlepšenie pozície vo výsledkoch vyhľadávania. Jeho praktická hodnota je hlavne v tom, že môže ovplyvniť, či používateľ na výsledok klikne. Opis by preto mal byť konkrétny, pravdivý a napísaný pre človeka.

Príklad dobre napísaného popisu:

<meta name="description" content="Vyberte si izbovú rastlinu podľa stanovišťa, náročnosti starostlivosti a veľkosti. Poradíme, ktoré druhy sa hodia do vášho bytu.">

Príklad príliš všeobecného popisu:

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

Každá dôležitá stránka má obsahovať vlastný unikátny popis. Ak popis nezodpovedá obsahu stránky, vyhľadávač ho pravdepodobne nahradí iným úryvkom.

V minulosti sa používal aj meta tag s hodnotou keywords, do ktorého autori webov vkladali kľúčové slová. Keďže sa často zneužíval na vkladanie výrazov nesúvisiacich s obsahom stránky, Google ho na radenie výsledkov nepoužíva.

Obsah stránky

Po hlavičke dokumentu sa presunieme k prvkom, ktoré používateľ vidí priamo na stránke. Nadpisy, odseky, zvýraznenie, odkazy a obrázky netvoria len vzhľad obsahu. Každý z týchto prvkov má vlastný význam a mal by byť zapísaný zodpovedajúcou HTML značkou.

Nadpisy stránky

Nadpisy <h1> až <h6> rozdeľujú stránku na hlavnú tému, časti a podčasti. Používateľ vďaka nim rýchlo pochopí štruktúru textu a vyhľadávač lepšie rozpozná, ktoré témy stránka rieši.

Každá dôležitá podstránka by mala mať jasnú tému. Ak sa jedna stránka snaží riešiť príliš veľa rôznych vecí, bude menej zrozumiteľná. Naopak stránka s jasným účelom sa lepšie píše, lepšie číta a lepšie optimalizuje.

Na stránke zvyčajne používame jeden hlavný nadpis <h1>. Ten vystihuje hlavnú tému stránky. Pod ním používame nižšie úrovne nadpisov, napríklad <h2> pre hlavné časti a <h3> pre podrobnejšie podsekcie.

Príklad jednoduchej štruktúry stránky produktu:

<h1>Monstera Deliciosa</h1>
<p>Monstera Deliciosa je obľúbená izbová rastlina s výraznými vykrajovanými listami.</p>

<h2>Starostlivosť o rastlinu</h2>
<p>V tejto časti nájdeme informácie o svetle, zálievke, vlhkosti a vhodnom umiestnení.</p>

<h2>Užívateľské recenzie</h2>
<p>Tu nájdeme skúsenosti zákazníkov, ktorí rastlinu pestujú doma.</p>

Nadpisy majú zodpovedať skutočnej štruktúre obsahu. Nepoužívame ich len kvôli väčšiemu písmu a bez dôvodu nepreskakujeme úrovne, napríklad z <h1> rovno na <h3>.

Odseky a zvýraznenie

Text stránky členíme do odsekov pomocou značky <p>. Krátke a prehľadné odseky sú čitateľnejšie než dlhé bloky textu. Dobrá čitateľnosť pomáha používateľovi, a tým nepriamo pomáha aj SEO.

Na významové zdôraznenie používame značku <strong>. Tá zvyčajne vykreslí text tučným písmom a zároveň nesie význam dôrazu. Pre čisto vizuálne tučné písmo bez významu použijeme CSS alebo značku <b> podľa kontextu.

Príklad významového zvýraznenia:

<p>Rastlina potrebuje <strong>dostatok rozptýleného svetla</strong>, aby dobre rástla a vytvárala nové listy.</p>

Zvýrazňovanie nepreháňame. Ak je tučným písmom takmer všetko, používateľ nerozpozná, čo je skutočne dôležité.

Odkazy

Roboti vyhľadávačov sa po webe pohybujú pomocou odkazov. Odkaz zároveň pomáha pochopiť vzťah medzi stránkami. Preto je dôležitý nielen samotný odkaz, ale aj jeho text.

Príklad neurčitého odkazu:

<p>O starostlivosti o izbové rastliny sme už písali <a href="starostlivost-o-izbove-rastliny.html">tu</a>.</p>

Príklad popisného odkazu:

<p>Už sme písali o <a href="starostlivost-o-izbove-rastliny.html">starostlivosť o izbové rastliny</a>.</p>

Text odkazu by mal prirodzene hovoriť, kam odkaz vedie. Nepoužívame stále rovnaký presný anchor text len kvôli SEO. Odkaz má v prvom rade pomôcť čitateľovi pokračovať k súvisiacemu obsahu.

Odkaz má byť skutočný HTML odkaz so značkou <a> a atribútom href. Ak kliknutie rieši iba JavaScript bez bežnej URL adresy, vyhľadávač nemusí odkaz spoľahlivo nájsť.

Obrázky

Obrázky môžu zlepšiť zrozumiteľnosť stránky, ale musia byť správne vložené. Každý významový obrázok by mal mať atribút alt, teda alternatívny text. Ten pomáha používateľom s hlasovou čítačkou, zobrazí sa pri probléme s načítaním obrázka a pomáha vyhľadávačom pochopiť obsah obrázka.

Nevhodný príklad obrázka:

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

Lepší variant obrázka:

<img src="obrazky/rastliny/monstera-deliciosa.jpg" alt="Monstera Deliciosa v kvetináči">

Alternatívny text opisuje obsah a účel obrázka v kontexte stránky. Neslúži na hromadenie kľúčových slov. Ak je obrázok iba dekoratívny a neodovzdáva žiadnu informáciu, použijeme prázdny atribút alt="", aby ho čítačka preskočila.

Pri obrázkoch riešime aj veľkosť súboru. Príliš veľké obrázky spomaľujú načítanie stránky. Používame rozumné rozmery, kompresiu a moderné formáty, napríklad WebP alebo AVIF, ak sú vhodné pre daný web.

Sémantické HTML

Moderné HTML obsahuje značky, ktoré pomáhajú opísať význam jednotlivých častí stránky. Patria sem napríklad <header>, <nav>, <main>, <article>, <section>, <aside> a <footer>.

Tieto značky samy osebe nezabezpečia lepšie pozície vo vyhľadávaní. Pomáhajú však vytvoriť prehľadný dokument, v ktorom je jasné, kde je navigácia, hlavný obsah, samostatný článok alebo pätička:

Na schéme vidíme bežné rozloženie stránky. Značka <header> označuje hlavičku, <nav> navigáciu, <section> väčšiu obsahovú časť, <article> samostatný článok, <aside> bočný obsah a <footer> pätičku. Rovnakú štruktúru môžeme zapísať priamo v HTML.

Typické použitie sémantických značiek:

<header>
    <h1>Zelená domácnosť</h1>
</header>

<nav>
    <ul>
        <li><a href="izbove-rastliny.html">Izbové rastliny</a></li>
        <li><a href="kvetinace.html">Kvetináče</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

<main>
    <article>
        <h2>Ako sa starať o monsteru</h2>
        <p>V článku si vysvetlíme, kam monsteru umiestniť, ako ju zalievať a kedy ju presadiť.</p>
    </article>
</main>

<footer>
    <p>&copy; Zelená domácnosť</p>
</footer>

Základná navigácia, hlavný obsah a dôležité odkazy majú byť dostupné priamo v HTML. JavaScript môže doplniť interaktivitu, ale nemal by byť jediným spôsobom, ako sa k obsahu dostať.

Správnosť HTML môžeme overiť pomocou validátora W3C. Ten skontroluje, či stránka neobsahuje chybne zapísané značky, nesprávne vnorené prvky alebo chýbajúce povinné atribúty. Validné HTML samo osebe nezaručí lepšie pozície vo vyhľadávaní, ale pomáha odstrániť technické chyby, ktoré môžu zhoršiť prístupnosť, čitateľnosť kódu alebo spracovanie stránky.

Pokročilejší opis obsahu riešia štruktúrované dáta. Používajú sa napríklad pri produktoch, recenziách alebo udalostiach, kde vyhľadávaču odovzdávame presnejšie informácie o obsahu stránky.

Záver

HTML štruktúra dáva stránke jasný význam. Titulok a meta description pomáhajú stránku predstaviť v prehliadači a vo výsledkoch vyhľadávania. Nadpisy, odkazy, obrázky a sémantické značky zase sprehľadňujú samotný obsah. Dobré on-page SEO preto spája technicky správny HTML zápis s obsahom, ktorý zodpovedá konkrétnej potrebe používateľa.

V nasledujúcom kvíze, Kvíz - SEO štruktúra webu a HTML, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.