September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

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>

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 nebo je popsáno v českém HTML 5 manuálu.

HTML 5 layout

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.


 

Předchozí článek
SEO - Optimalizace struktury webu
Všechny články v sekci
SEO - Optimalizace webů pro vyhledávače
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
23 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (7)

Avatar
nosekt
Člen
Avatar
nosekt:8.3.2017 0:48

Co se týče toho ukázkovýho altu, slova by měly být odděleny - nebo _, takhle se za mezery dosadí zástupný symbol, tuším procento a to není zhlediska SEO nic moc.

 
Odpovědět
8.3.2017 0:48
Avatar
Nositelka Změny:1. července 14:13

Já s těmi odkazy nesouhlasím. Mě osobně zní "tady" tak nějak roztomile. Navíc je dle mého pro člověka pochopitelnější ukazovací zájmeno. Odkaz přece někam ukazuje. A když ukazujeme prstem, řekneme také "tady". Nemělo by být pro SEO náhodou lepší to, co je lidem přirozené?

Odpovědět
1. července 14:13
j.k.j
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:1. července 14:44

Ale houby, to je naprosté nepochopení smyslu odkazu. Představ si, kdyby takto blbě byla napsaná třeba Wikipedia. To by se vůbec nedalo číst. Nebo když tu stránku vytiskneš, tak to pak fakt taky vypadá "strašně smysluplně". Bohužel se nám tento nešvar dost rozmohl. ;-)

 
Odpovědět
1. července 14:44
Avatar
Nositelka Změny:1. července 17:31

Samozřejmě se to nesmí používat pořád, ale používala bych to třeba pro odkazy na nějaké nedůležité podrobnosti. A wikipedie je něco trochu jiného, tam jde o to, že když si chci najít informaci o daném pojmu, tak na něj prostě ťuknu a ono mě to tam hodí, nejedná se o přímé ukazování, wikipedie nám pouze dává možnost pohodlně skákat mezi články přímo v textu, ne například v závěrečném seznamu odkazů. A myslím, že jsem smysl odkazu pochopila, pouze svoje myšlenky podávám nesrozumitelně.

Odpovědět
1. července 17:31
j.k.j
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:1. července 18:45

Tak schválně zkus uvést konkrétní příklad, kde to "klikněte zde" funguje podle tebe líp, než normální věta s odkazem.

 
Odpovědět
1. července 18:45
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Alesh
Nositelka Změny:3. července 15:10

Fungovat to bude samozřejmě vždy stejně, protože na obsahu odkazu (z hlediska funkčnosti) nezáleží - pořád to bude odkaz. Ale třeba samotný příklad v tomto článku se slevami z ní s "tady" mnohem líp. Samozřejmě by záleželo i na kontextu... Takže třeba pravdu nemám a jde to vždy napsat tak, že "zde" ani nic podobného není potřeba a stejně to zní dobře, ale nejsem si tím moc jistá...

Odpovědět
3. července 15:10
j.k.j
Avatar
Odpovídá na Alesh
Nositelka Změny:3. července 15:32

Nechci vypadat, že se mi líbí stránky typu: "Pokud se chcete naučit pracovat s HTML a CSS, podívejte se <a> sem </ a>. Pokud to chcete umět moderně a profesionálně, dobrou volbou je itnetwork, určitě se <a> tam </ a> podívejte. Poslední web, který mohu doporučit, najdete <a> v tomto odkazu </ a>. Oficiální stránky HTML naleznete <a> tady </ a>..."
Ale třeba na wikipedii (https://cs.wikipedia.org/wiki/Číslo#…) si myslím, že větu "Důkaz, že takové racionální číslo neexistuje, lze najít <a> zde </ a>." bez zde nějak hezky napsat nejde.

Odpovědět
3. července 15:32
j.k.j
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:4. července 9:03

Ano, odkaz je odkaz, to ale nikdo nezpochybňuje. ;-) Furt ale platí to, že takto se to nedělá, a to bez ohledu na to, že se nám tento nešvar rozmohl. :-) Ano, asi jsou weby, kde to funguje líp, ale vesměs to moc důvěryhodné záležitosti nejsou: Chcete slevu? klikněte si zde apod.

 
Odpovědět
4. července 9:03
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:4. července 11:22

Důkaz, že takové racionální číslo neexistuje, lze najít zde .

To je typický příklad, jak se to nemá dělat, místo správného použití odkazu např. takto:

Důkaz naleznete v článku o iracionálním číslu.

 
Odpovědět
4. července 11:22
Avatar
Odpovídá na Alesh
Nositelka Změny:4. července 17:04

Tvůj příklad ale nezní tak příjemně. U mě jednoznačně vede první možnost.

Odpovědět
4. července 17:04
j.k.j
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 17. Zobrazit vše