Lekce 4 - SEO - Optimalizace struktury webu

Dnešní lekce je věnována návrhu webu, aby byl pro vyhledávače co nejoptimálnější.

Hezké URL adresy

Než se vyhledávač vůbec dostane na naši webovou stránku, projde přes URL adresu. Představte si, že vypadá nějak takto:

http://www.totojemujweb.cz/clanek.php?id=1234b=11

Vyhledávač z toho nebude příliš moudrý a navíc ho zmate větší množství parametrů. Přicházíme také o skvělou příležitost podstrčit mu klíčová slova. Vyhledávače totiž přisuzují relevanci mimo jiné i podle nejlepší shody klíčových slov a ta čerpají i z URL adresy. Hezké URL adresy (Pretty URL) se skládají jen ze slov a jsou důležitou součástí SEO. Slova jsou oddělena pomlčkami. V adresách se vyhněte používání velkých písmen, mezer, diakritice a zkrátka všemu, co by mohlo znepříjemnit jejich opisování nebo zpracování. Již příliš nezáleží na tom, zda adresa odpovídá skutečnému umístění dokumentu:

http://www.hardwareshop.cz/notebooky/notebook-lenovo-abc-123.html

Nebo slouží jen jako text, podle kterého se vybírá dokument z databáze:

http://www.hardwareshop.cz/notebooky/detail/notebook-lenovo-abc-123

Pozn.: Doména hardwareshop.cz je zvolena čistě náhodně.

Můžete se pro ilustraci také podívat na URL tohoto článku Hezké URL adresy jsou přínosné i pro lidi. Ono vůbec většinou platí, že když uděláme něco pro lidi, bude se to líbit i vyhledávačům. URL adresa je mimo jiné vidět i na SERP (stránce s výsledky vyhledávání).

Každý dokument by měl být na webu přístupný jen pod jednou URL adresou. Měla by fungovat jak verze adresy s www., tak i bez www. Verze bez www. by měla odkazovat na verzi s www. a to pomocí přesměrování 301, aby to vyhledávače nechápali jako novou URL adresu. Stejně tak by na stejný článek neměly odkazovat různé subdomény. Pokud chcete z nějakého důvodu odkazovat na jeden článek pomocí více URL adres, uveďte u odkazu atribut rel="canonical".

Dostupnost

Web by se měl rychle načítat a být tedy dostupný. Doba generování stránky na straně serveru se obvykle pohybuje kolem 100ms, říká se, že do 500ms je to ještě snesitelné, i když už nepohodlné. Kromě doby generování je důležitá i celková doba načítání stránky (měla by být asi do 3 vteřin). Tu vám změří např. Chrome ve vývojářské konzoli (F12) nebo nástroj Google Analytics, o kterém si řekneme příště. Obecně platí, že čím je web rychlejší, tím více má přístupů. Pokud budete šetřit za webhosting, přijdete o řádově vyšší částky na ztrátách kvůli výpadkům nebo nižší aktivitě uživatelů. Je dokázáno, že na pomalých webech uživatelé zobrazí menší množství stránek a to i když se doba načítání zvýší např. jen o několik set ms. Výpadky nebo pomalé načítání stránek samozřejmě znemožňuje naše stránky používat jak lidem, tak i robotům. Mohou nastat i problémy s indexováním.

Validita

Náš web by měl být ideálně validní podle W3C specifikace. Prakticky je pro to nutné vynaložit poměrně velké úsilí a to hlavně kvůli různým editorům článků a podobně. Validátor nemusí váš web označit jako 100% validní, přiznejme si, že tyto weby jsou většinou umělé a ne příliš přínosné. Na živém webu nám vždy něco ujede a v dnešní době je zbytečné řešit každou podstránku. Základní kostra stránky by však měla být stoprocentní, neměli byste zapomínat na doctype, znakovou sadu, správnou definici hlavičky, oddělování JavaScriptu a CSS kódu do samostatných souborů a podobně.

Mapa stránek

Každý web by měl poskytovat mapu všech svých podstránek. Jedná se o XML dokument, který můžeme v případě malého počtu stránek napsat sami. Můžeme si ho nechat vygenerovat pomocí generátoru sitemap. Nebo si ho můžeme vytvořit velmi jednoduše pomocí PHP. Na názvu ani umístění souboru nezáleží, robotům o něm řekneme pomocí souboru robots.txt, o kterém si však povíme až v dalších dílech, nebo pomocí nástroje Google Analytics, jehož představení nás rovněž teprve čeká. Soubor sitemap.xml může v úplně nejjednodušší podobě vypadat např. takto:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>http://www.hardwareshop.cz/notebooky-a-ultrabooky.html</loc>
    </url>
    <url>
        <loc>http://www.hardwareshop.cz/tablety.html</loc>
    </url>
    <url>
        <loc>http://www.hardwareshop.cz/pc-sestavy.html</loc>
    </url>
    <url>
        <loc>http://www.hardwareshop.cz/mobilni-telefony-a-smartphony.html</loc>
    </url>
    <url>
        <loc>http://www.hardwareshop.cz/kontakty-a-oteviraci-doba.html</loc>
    </url>
</urlset>

Jednoduše do něj zapíšeme URL adresy všech podstránek na webu. Kromě lokace URL můžeme udávat i další data, jako např. datum poslední změny nebo prioritu. Pro popis dalších značek můžeme zajít např. ke Google - https://support.google.com/…nswer/183668?…. Mapu stránek často zpřístupňujeme nejen vyhledávačům, ale i uživatelům v podobě klasické HTML stránky.

Můžete také nahlédnout do souboru sitemap itnetwork.

HTML struktura

Vyhledávače parsují zdrojový kód stránek našeho webu a snaží se z něj pochopit o čem je obsah. K tomu jim samozřejmě pomáhají HTML značky. HTML je sémantický jazyk. To znamená, že jednotlivým částem webu přiděluje určitý význam. HTML není o vzhledu, stylujeme pomocí CSS. Když budete špatně používat HTML značky (např. místo tagu pro nadpis jen zvětšíte písmo), uživatel to sice nepozná, ale vyhledávač nepochopí, že je velký text nadpis a nepřisoudí mu žádnou důležitost. To se samozřejmě v konečném výsledku projeví na nízké pozici webu na SERP.

Nyní si popíšeme několik tagů, které jsou pro SEO důležité. Ačkoli to není úplně nezbytné, tak pokud nemáte silné základy HTML, doporučuji nejprve pročíst náš seriál Webové stránky krok za krokem, kde je význam jednotlivých tagů popsán.

<title>

Tag <title> by měl být vyplněný na všech podstránkách webu. Titulek je to první, s čím vyhledávač přichází do styku a jeho text se také obvykle objevuje ve výsledcích vyhledávání, které vidí uživatel. Titulek by měl být na každé podstránce unikátní. Nikdy nepoužívejte stejný titulek pro více stránek. Domovská stránka webu má obvykle titulek s jeho názvem, poté následuje pomlčka a krátký popis s co nejvíce klíčovými slovy. Např. takto:

<title>HardwareShop - Eshop s notebooky, PC komponentami, tablety a smartphony</title>

K jednotlivým podstránkám můžete připojit pro lepší optimalizaci název webu pomocí pomlčky:

<title>Notebooky a ultrabooky - HardwareShop</title>

Pamatujte na to, že tag by měl obalovat opravdu jen ta nejdůležitější klíčová slova.

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