NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Lekce 5 - SEO - Optimalizace HTML struktury

V minulé lekci, SEO - Optimalizace struktury webu, jsme začali s doporučeními ohledně struktury správně optimalizovaného webu z hlediska SEO. Dostali jsme se až ke struktuře HTML kódu.

V dnešní lekci se správně naučíme používat meta tag description, nadpisy, odkazy, obrázky, HTML 5 tagy a ukážeme si tvorbu navigace.

<description>

Description je jeden z meta tagů, které jsou rovněž velmi důležité a mají podobný význam jako titulek. Obsahuje shrnutí toho, o čem je daná podstránka. Samozřejmě by zde mělo být co nejvíce klíčových slov a to těch, které se v článku opravdu vyskytují. Text musí být zároveň souvislý a smysluplný pro uživatele. Délka popisku by měla být asi okolo 150 znaků, delší text je obvykle ignorován. Stejně jako u titulku platí, že description musí být pro každou stránku unikátní.

Google při vyhledávání hledá jak uvnitř článku, tak v jeho popisu. Článek je pro něj samozřejmě relevantnější ve chvíli, kdy daná klíčová slova nalezne na obou místech. Popisky se někdy zobrazují uživatelům na SERP. Někdy může Google vzít popisek z Open Directory Project (dmoz.org), v našich končinách je to však nepravděpodobné:

<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šimněte si slov notebook, ultrabook, eshop, skladem, příslušenství, brašny na notebooky. Někteří uživatelé mají tendenci psát popisky jako:

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

Takto opravdu ne :)

<keywords>

V minulosti vyhledávače používali meta tag keywords, který umožňuje vyjmenovat klíčová slova, která se dokumentu týkají. Webmasteři ho však zneužívali a pomocí praktiky "keywords stuffing" vkládali slova, o kterých dokument vůbec nebyl. Google i Seznam oficiálně potvrdily, že keywords již vůbec nevyužívají. Tyto tagy jsou tedy v dnešní době ignorovány a nemusíme je vyplňovat.

<h1> - <h6>

Obsah stránky bychom měli strukturovat do nadpisů a to již jen proto, že klíčovým slovům, nalezeným v nadpisech, přisuzují vyhledávače řádově vyšší význam, než když jsou nalezeny jen v textu. Opět je zde i výhoda pro uživatele - text je logicky členěný, mnohem lépe čitelný a dobře se v něm orientuje. Na stránce je obvykle jeden nadpis H1 (pokud není stránka rozdělena pomocí HTML 5 tagů na více article, header a podobně) a poté několik nadpisů 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šimněte si, že je text také strukturovaný do odstavců pomocí elementů <p> a že jsou zde důležité pasáže zdůrazněné pomocí tagu <strong>. Ten způsobí, že se text vykreslí jako tučný, ale hlavně že ho vyhledávač chápe jako důležitější a přebírá z něj klíčová slova. Nikdy nezvýrazňujte pomocí tagu <b> nebo dokonce tak, že jen upravíte styl písma na tučný.

<a>

Již víme, že se roboti po webu pohybují pomocí odkazů. Protože jsou chytří, využívají k rozpoznání obsahu dané stránky i text odkazu, který na ni odkazuje. Nejhorší, co můžete udělat, je psát odkazy typu:

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

Vyhledávač toho z "tady" moc nepozná. Ukažme si ještě, jak to udělat správně:

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

<img>

Každý obrázek by měl mít vyplněný atribut alt (a to již jen proto, že je povinný). Jedná se o alternativní text, který se zobrazí v případě, když se obrázek nepodaří načíst. Využívají ho i hlasové čtečky, ale pro nás je významný hlavně kvůli dalším klíčovým slovům, které do něj můžeme vložit. Ty se využijí minimálně když bude někdo např. hledat pomocí Vyhledávání obrázků od Google. Další klíčová slova můžeme vložit do obrázku a jeho cesty. Jen si porovnejte následující 2 příklady:

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

a správnou variantu:

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

HTML 5 tagy

Usnadnit oddělení rozložení stránky od jejího obsahu můžeme vyhledávačům pomocí použití HTML 5 tagů. Jsou to zejména <article>, <header>, <nav>, <section>, <footer> a <aside>. Vyhledávače se tak mohou soustředit na indexování obsahu a nemate je např. navigační menu nebo postranní panel. Využití tagů je vidět v ilustraci níže:

HTML 5 layout - SEO - Optimalizace webů pro vyhledávače

Navigace

Pokud se na naší stránce nevyzná člověk, je velmi pravděpodobné, že s tím bude mít potíže i robot. Základní navigace na webu by měla být na jednom místě a měla by být dobře promyšlena. Vyhledávače z navigace také poznají které podstránky považuje webmaster za důležité.

Navigaci vkládáme do seznamu (HTML tag ul) a poté ostylujeme pomocí CSS. Ideálně využijeme HTML 5 tag <nav>.

<nav>
    <ul>
        <li><a href="notebooky-a-ultrabooky.html">Notebooky a ultrabooky</a>
        <li><a href="tablety.html">Tablety</a>
        <li><a href="pc-sestavy.html">PC sestavy</a>
        <li><a href="mobilni-telefony-a-smartphony.html">Mobilní telefony</a>
        <li><a href="kontakty-a-oteviraci-doba.html">Kontakty a otevírací doba</a>
    </ul>
</nav>

Pokud chcete mít navigaci nějak animovanou, rozbalovací a podobně, není to v zásadě problém. Podmínkou je, že na stránce musí být HTML kód podobný tomu výše a teprve ten se např. pomocí JavaScriptu transformuje do interaktivní podoby. Google JavaScript při indexování nepoužívá, a proto se mu zobrazí původní verze.

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


 

Předchozí článek
SEO - Optimalizace struktury webu
Všechny články v sekci
SEO - Optimalizace webů pro vyhledávače
Přeskočit článek
(nedoporučujeme)
Kvíz - Optimalizace struktury HTML a struktury webu v SEO
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
139 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity