Nauč se s námi víc. Využij 50% zdarma na e-learningové kurzy.
discount week 50

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?
25 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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

 

 

Komentáře

Avatar
Old Account
Člen
Avatar
Old Account:21.8.2014 21:22

Pri optimalizacii pre vyhladavace sa zvyknu pouzivat strukturovane data (microdata, microformats, RDFa), ktore zvysuju CTR aj ranking.

Odpovědět
21.8.2014 21:22
"If you keep your eye on the profit, you’re going to skimp on the product. But if you focus on making really gre...
Avatar
Tomáš Maňhal:21.8.2014 21:33

Výborný seriál!

 
Odpovědět
21.8.2014 21:33
Avatar
Petr Čech
Redaktor
Avatar
Petr Čech:22.8.2014 22:57

Jenom taková stupidní otázka, ale proč tedy Itnetwork používá keywords, když je to zbytečné?

Odpovědět
22.8.2014 22:57
the cake is a lie
Avatar
Odpovídá na Petr Čech
Neaktivní uživatel:22.8.2014 23:01

Některé vyhledavače ještě keywords používají.

Odpovědět
22.8.2014 23:01
Neaktivní uživatelský účet
Avatar
Old Account
Člen
Avatar
Odpovídá na Neaktivní uživatel
Old Account:22.8.2014 23:05

Ktore konkretne ? Neviem si vybavit ziadny, ktory by ich stale pouzival.

Odpovědět
22.8.2014 23:05
"If you keep your eye on the profit, you’re going to skimp on the product. But if you focus on making really gre...
Avatar
Odpovídá na Old Account
Neaktivní uživatel:22.8.2014 23:11

Yahoo, Bing (u obou ale malá priorita). Kdybych měl teď čas, napsal bych ti další.

Odpovědět
22.8.2014 23:11
Neaktivní uživatelský účet
Avatar
Old Account
Člen
Avatar
Odpovídá na Neaktivní uživatel
Old Account:23.8.2014 11:07

Yahoo pouziva Bing.

Odpovědět
23.8.2014 11:07
"If you keep your eye on the profit, you’re going to skimp on the product. But if you focus on making really gre...
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.7.2020 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.7.2020 14:13
j.k.j
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:1.7.2020 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.7.2020 14:44
Avatar
Nositelka Změny:1.7.2020 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.7.2020 17:31
j.k.j
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:1.7.2020 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.7.2020 18:45
Avatar
Odpovídá na Alesh
Nositelka Změny:3.7.2020 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.7.2020 15:10
j.k.j
Avatar
Odpovídá na Alesh
Nositelka Změny:3.7.2020 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.7.2020 15:32
j.k.j
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:4.7.2020 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.7.2020 9:03
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Nositelka Změny
Alesh:4.7.2020 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.7.2020 11:22
Avatar
Odpovídá na Alesh
Nositelka Změny:4.7.2020 17:04

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

Odpovědět
4.7.2020 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 17 zpráv z 17.