5. díl - SEO - Optimalizace HTML struktury

HTML a CSS SEO SEO - Optimalizace HTML struktury

V minulém dílu našeho seriálu o SEO 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, ve které budeme dnes pokračovat.

<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 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.


 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
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 College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (16 hlasů) :
55555


 


Miniatura
Předchozí článek
SEO - Optimalizace struktury webu
Miniatura
Všechny články v sekci
SEO - Optimalizace webů pro vyhledávače
Miniatura
Následující článek
SEO a copywriting

 

 

Komentáře

Avatar
Old Account
Člen
Avatar
Old Account:

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
tomasmanhal
Člen
Avatar
tomasmanhal:

Výborný seriál!

Odpovědět  +2 21.8.2014 21:33
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Petr Čech (czubehead):

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
Why so serious? -Joker
Avatar
Filip Šohajek
Redaktor
Avatar
Odpovídá na Petr Čech (czubehead)
Filip Šohajek:

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

 
Odpovědět  +1 22.8.2014 23:01
Avatar
Old Account
Člen
Avatar
Odpovídá na Filip Šohajek
Old Account:

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
Filip Šohajek
Redaktor
Avatar
Odpovídá na Old Account
Filip Šohajek:

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

 
Odpovědět 22.8.2014 23:11
Avatar
Old Account
Člen
Avatar
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...
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 7 zpráv z 7.