5. diel - SEO - Optimalizácia HTML štruktúry

V minulom dieli nášho seriálu o SEO sme začali s odporúčaniami ohľadom štruktúry správne optimalizovaného webu z hľadiska SEO. Dostali sme sa až k štruktúre HTML kódu, v ktorej budeme dnes pokračovať.

<description>

Description je jeden z meta tagov, ktoré sú tiež veľmi dôležité a majú podobný význam ako titulok. Obsahuje zhrnutie toho, o čom je daná podstránka. Samozrejme by tu malo byť čo najviac kľúčových slov a to tých, ktoré sa v článku naozaj vyskytujú. Text musí byť zároveň súvislý a zmysluplný pre užívateľov. Dĺžka popisku by mala byť asi okolo 150 znakov, dlhší text je zvyčajne ignorovaný. Rovnako ako u titulku platí, že description musí byť pre každú stránku unikátne.

Google pri vyhľadávaní hľadá ako vo vnútri článku, tak v jeho popise. Článok je pre neho samozrejme relevantnejšie vo chvíli, keď dané kľúčové slová nájde na oboch miestach. Popisky sa niekedy zobrazujú užívateľom na SERP. Niekedy môže Google vziať popisok z Open Directory Project (dmoz.org), v našich končinách je to však nepravdepodobné.

<meta name="description" content="Široký výběr notebooků a ultrabooků skladem z našeho eshopu. Nabízíme také příslušenství jako brašny na notebooky."></meta>

Všimnite si slov notebook, ultrabook, eshop, skladom, príslušenstvo, tašky na notebooky. Niektorí užívatelia majú tendenciu písať popisky ako:

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

Takto naozaj nie

<keywords>

V minulosti vyhľadávače používali meta tag keywords, ktorý umožňuje vymenovať kľúčové slová, ktoré sa dokumentu týkajú. Webmasteri ho však zneužívali a pomocou praktiky "keywords stuffing" vkladali slová, o ktorých dokument vôbec nebol. Google aj Zoznam oficiálne potvrdili, že keywords už vôbec nevyužívajú. Tieto tagy sú teda v dnešnej dobe ignorované a nemusíme ich vypĺňať.

-

Obsah stránky by sme mali štruktúrovať do nadpisov a to už len preto, že kľúčovým slovám, nájdeným v nadpisoch, prisudzujú vyhľadávače rádovo vyššia význam, ako keď sú nájdené len v texte. Opäť je tu aj výhoda pre užívateľov - text je logicky členený, oveľa lepšie čitateľný a dobre sa v ňom orientuje. Na stránke je zvyčajne jeden nadpis H1 (pokiaľ nie je stránka rozdelená pomocou HTML 5 tagov na viac article, header a podobne) a potom niekoľko nadpisov nižších úrovní.

<h1>Notebook Lenovo ABC-123</h1>
<p>Extrémně <strong>tenký notebook</strong> v sobě skrývá více, než jen obyčejnou výbavu. Rychlý a moderní procesor s architekturou <strong>Haswell</strong> doplňuje dedikovaná grafická karta <strong>NVIDIA</strong> a výsledkem je nekompromisní výkon v kompaktním těle. Elegantní šasi je tenké pouhých 2,5 cm a nízká hmotnost lehce přes 2 kg vás při přenášení nijak nezatíží. Spousta chytrých a zabezpečovacích funkcí společně s kvalitním zvukem, inteligentním touchpadem a <strong>podsvícenou klávesnicí</strong> jsou jen dalším důkazem všestranné využitelnosti.</p>

<h2>Parametry</h2>
<table>
...
</table>

<h2>Uživatelské recenze</h2>
...

Všimnite si, že je text tiež štruktúrovaný do odstavcov pomocou elementov

a že sú tu dôležité pasáže zdôraznené pomocou tagu . Ten spôsobí, že sa text vykreslí ako tučný, ale hlavne že ho vyhľadávač chápe ako dôležitejšie a preberá z neho kľúčové slová. Nikdy nezvýrazňujte pomocou tagu alebo dokonca tak, že len upravíte štýl písma na tučný.

<a>

Už vieme, že sa roboti po webe pohybujú pomocou odkazov. Pretože sú chytrí, využívajú na rozpoznanie obsahu danej stránky aj text odkazu, ktorý na ňu odkazuje. Najhoršie, čo môžete urobiť, je písať odkazy typu:

O našich slevách jsme již psali <a href="slevy-na-pc-hardware.html">tady</a>.

Vyhľadávač toho z "tu" moc nepozná. Ukážme si ešte, ako to urobiť správne:

Již jsme psali o <a href="slevy-na-pc-hardware.html">našich slevách</a>.

<img>

Každý obrázok by mal mať vyplnený atribút alt (a to už len preto, že je povinný). Jedná sa o alternatívny text, ktorý sa zobrazí v prípade, keď sa obrázok nepodarí načítať. Využívajú ho aj hlasové čítačky, ale pre nás je významný hlavne kvôli ďalším kľúčovým slovám, ktoré do neho môžeme vložiť. Tie sa využijú minimálne keď bude niekto napr. Hľadať pomocou Vyhľadávanie obrázkov od Google. Ďalšie kľúčové slová môžeme vložiť do obrázka a jeho cesty. Len si porovnajte nasledujúce 2 príklady:

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

a správny variant:

<img src="obrazky/notebooky/lenovo_abc_123.jpg" alt="Notebook Lenovo ABC 123" />

HTML 5 tagy

Uľahčiť oddelenie rozloženie stránky od jej obsahu môžeme vyhľadávačom pomocou použitia HTML 5 tagov. Sú to najmä

,

,

V nasledujúcej lekcii, SEO - Analýza kľúčových slov - Úvod , si uvedieme úvod do analýzy kľúčových slov, prečo je dobré ju urobiť, na čo slúži a uvedieme si krátky príklad.