Zásady správného webu

Seznam tzv. On-page faktorů, prvků optimalizace pro vyhledávače přímo v kódu www stránky, které ovlivňují umístění ve vyhledávačích a základní zásady tzv. přístupného webu. Pokud bude váš web psán dle těchto zásad, bude mít i bez reklam a placených odkazů slušné vyhlídky pro dobré pozice a uživatelé se budou na webu dobře orientovat.

Na nedávném školení o webu padla z úst přednášejícího číslovka 300, coby počet těchto faktorů, které na stránkách hodnotí jeho konzultační firma při analýze klientových www stránek.

Seznam je pochopitelně interní know-how, které nechtěl prozradit. Pátral jsem na internetu, zda je někde takový přehled zveřejněn, ale nenašel jsem. Níže je můj pokus, který budu postupně aktualizovat.

Nejde o dogmata, s některými zásadami správného webu nebude část internetových expertů souhlasit. To ale považuji za normální, protože jsem např. v hodnocení webu WebTop100 našel absolutně protichůdné názory porotců na stejnou problematiku.

Obecné zásady

v

Validní HTML kód

Přestože není jasně definováno, že by web musel být nutně validní, bezchybný, že by jej vyhledávače ignorovaly, jde o vizitku programátora. Navíc validní web má teoreticky větší šanci, že se správně vykreslí ve všech prohlížečích.

Ověřte si HTML kód zde: validátor HTML

Validní kaskádové styly CSS

Je to stejné jako v případě validního HTML. Chyby v CSS mohou způsobit, že některé prohlížeče daným vlastnostem neporozumí a layout stránky se může výrazně lišit od vaší představy.

Tady si můžete ověřit zda i vaše kaskádové styly jsou validní: validátor CSS

CSS styly pro různé způsoby čtení

CSS styly nevyužívají jen prohlížeče, ale také hlasové čtečky a tiskárny. Je tedy vhodné připravit styl pro tiskárnu, kde se upraví text tak, aby byl dobře čitelný a je také možné některé bloky skrýt – např. menu, které na vytištěném papíře jen zabírá místo.

Důsledně oddělený design od textového obsahu

Znamená to nepoužívat atribut style="", nebo CSS neuzavírat do tagů <style> v HTML kódu, ale vše uložit do externích souborů, které nalinkujete.

Prohlížeče nyní umí CSS styly vypnout. Já obyčejně ještě do paty stránky vložím odkaz, který styly vypne, resp. po reloadu nenačte.

Nepoužívat specifika jednotlivých prohlížečů

Některé prohlížeče mají různé CSS styly a funkce, které fungují pouze v nich. Je dobré vědět o jejich existenci, ale nepoužívat je, neučit se je. Psát web pro všechny.

Některých"nedokonalostí" prohlížečů se naopak používá záměrně – je to zejména nekompatibilitou jednotlivých verzí prohlížečů. Například skok z IE z šesté verze na sedmou byl tak dramatický, že donutil mnoho programátorů k tzv. IE hackům – pro tuto verzi se připraví opravný externí CSS styl. Prohlížeči ho donutíte přijmout třeba JavaScriptem takto:

<!--[if IE 6.0]>
<link href="hacky-pro-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

Typický uživatel je líný a hloupý

Většina klientů, tedy zadavatelů www stránek, žije v přesvědčení, že běžný návštěvník jeho stránek se připojí, začne číst, pídí se, o čem stránky jsou, a snaží se získat co nejvíce obsahu. Logicky odhaluje priority a pročítá nejdůležitější marketingové texty...

A takhle to přesně není. Uživatel texty nečte, spokojí se s nadpisy a pokud text článku začne číst, bez skrupulí přeskakuje delší odstavce, vybírá si ty o pár řádcích. Pokud jej jasně nenavedete k cíli, nenapadne ho ta"správná cesta". Nechce totiž přemýšlet a nechce věnovat energii, aby se dobral na vašem webu k nějakému poznání. To raději jde jinam.

Dosažitelné informace na pár kliků

Dříve se uváděla číslovka 3, coby mezník pro nalezení každé stránky. Ve skutečnosti ale uživateli klikání nad tento limit nevadí, protože – jak je uvedené v bodě výše – uživatel kliká bezmyšlenkovitě, někdy ledabyle. Pokud mu tedy správně naservírujete cestu k nějaké informaci na více než 3 kliky, není to chybou, důležitější je tyto kliky zobrazit tak, aby je uživatel našel.

Udržet návštěvníka na webu

S předchozím bodem úzce souvisí i úsilí, aby návštěvník prošel na webu co nejvíce stránek. Pokud by vše bylo k nalezení jen na tři kliky, a uživatel pak odešel, také by nešlo o úspěch. Na každé stránce by tedy kromě klasické navigace měla být zobrazena nabídka, kde navedete uživatele dál, do jiné, zajímavé části webu.

Správné použití tagů

Díky kaskadovým stylům je možné vytvořit graficky a typograficky zajímavou stránku, pokud se ale styly vypnou, text může být najednou špatně čitelný – díky přednastaveným stylům uživatelova prohlížeče.

Například když v textu prohodíte pořadí nadpisů, a ve stylech uvedete, že ten z nižší úrovně má být výraznější, zobrazí se to se styly logicky dle velikostí. Když se ale styl vypne, text působí chaoticky. Vyhledávače budou navíc přiřazovat ve výsledcích vyšší prioritu textům, které nemusí být tak důležité a tak se ochudíte o dobré výsledky.

Vyhledávače styly velmi filtrují a pro své čtení použijí jen pár atributů. Rozumí ale HTML tagům. Takže např. adresu doporučuji napsat do tagů <address> a ne jen do <p>, přestože se píše o tom, že je tento tag zastaralý.

Přístupnost

Logo vlevo nahoře

Umístění loga vlevo nahoře je logické, protože jsme zvyklí číst text zleva doprava, seshora dolů a tak logo uvozuje celý text. Je první, kam vrhneme svůj pohled.

Logo proklikem na homepage

Kliknutím na logo (vlevo v záhlaví stránky, vizte výše) bychom měli skočit na úvodní stránku.

Text je text

Vložením textu do obrázků se ochudíte o jeho zaindexování vyhledávačem. Čím méně textu do obrázků schováte, tím lépe. Pokud obrázek text obsahuje, vložte jej do atributu alt.

Nadpis H1

Nadpis nejvyšší úrovně H1 smí být pouze jeden, měl by vystihovat o co na dané stránce jde a měl by být jak v kódu tak v zobrazení prohlížeče co nejvíce nahoře.

Struktura nadpisů

Pro správnou orientaci v textu musí být tento správně strukturován. Jednotlivé úrovně nadpisů musí být logicky navázané. Nejenže to uživateli usnadní orientaci, ale také vyhledávače textu lépe porozumí. Pomůže v orientací v textu také slabozrakým, kteří používají hlasové čtečky.

Základní pravidlo je, že nadpis nejvyšší úrovně <h1> může být na stránce jen jednou, po něm následují logicky podřízené úrovně. Nelze přeskakovat, tedy po H1 napsat H3 atp.

Odkaz vypadá jako odkaz, tlačítko vypadá jako tlačítko

Drtivá většina grafiků bude navrhovat web tak, že každý prvek na webu bude originální. To může být nejčastějším problémem okamžitého odchodu návštěvníka z vašeho webu. Nejvíce uživatelé rozumí systémovým tlačítkům – ano, těm ošklivým šedým, s tučným černým textem. Lidé jsou na ně zvyklí a tak nad nimi nepřemýšlí a klikají na ně.

Textový odkaz by zase měl být tučnější, podtržený, jinou barvou než okolní text.

Hlavička – head

Title – titulek stránky

Titulek v záhlaví www stránky by měl být pro celý web unikátní, neměl by se zopakovat na jiné podstránce. Podobně jako H1 by měl vystihovat, o čem se na stránce nebo v článku píše. Google vám v nástrojích pro webmastery případné duplicity či dokonce nevhodné nadpisy vyhledá.

Description – popis stránky

Popis stránky by měl být také unikátní, Google na něj také upozorní pokud se opakuje napříč webem. Tento popis je navíc důležitý pro vyhledávače, protože se objeví u názvu stránky ve výsledcích. Správně napsané description tak může rozhodnout, zda si čtenář vaše články přečte nebo ne.

Description by také mělo být dlouhé do 200 znaků, což pak vyhledávače zobrazí u odkazů ve výsledcích.

Texty na webu

Jednoduchost, srozumitelnost – styl psaní článků by neměl být složitý, nesmí čtenáře nutit k pochopení psaného textu přemýšlet.

Čitelnost

Písmo by mělo být velké min. 12 pixelů, ale i tato velikost už dělá lidem nad 40 problémy. Vhodné je umožnit text jednoduše zvětšit, což většina moderních prohlížečů udělá při použití Ctrl+kolečko myši.

Úzké sloupce

Text na dlouhé řádce dělá čtenářům problém, protože oko není schopno při cestě na začátek nového řádku trefit ten další.

Krátké odstavce

Text členěný do odstavců se lépe čte, každý z odstavců by měl být oddělen minimálně mezerou o výšce poloviny řádku. Už pětiřádkový text odrazuje od čtení.

Odrážkové seznamy

Odrážky jsou velmi přehledné a uživatelé je rádi čtou, je tedy dobré je v hojně míře používat. Zřejmě je to kvůli větší vzdušnosti textu. Čtenář tak raději přečte jednorázové heslo, než-li dlouhý odstavec.

Základní optimalizace pro vyhledávače SEO

Soubor pro roboty vyhledavačů robots.txt

V rootu byste měli uložit soubor s informacemi pro roboty, které části webu jsou pro ně zakázané. Existovat by měl soubor i v případě, že povolíte celý obsah. Povolení pro prohledání celého obsahu napíšete takto:

User-agent: *
Disallow:

Mapa serveru sitemap.xml

Tento soubor by měl být takže přístupný v tomto tvaru: http://www.detepak.cz/sitemap.xml, více informací o standardu: sitemaps.org.

RSS kanál

Pokud jde o web s články nebo novinkami zpřístupněte odkazy na nové články v RSS kanále. Použití pro koncové čtenáře je sporné, ale tento kanál mohou použít další servery pro stahování upozornění na vaše články.

404

Stránka s upozorněním, že URL neexistuje. Pokud jde o starou adresu stránky a obsah se na serveru stále nachází je vhodné – třeba s použitím módu Rewrite – přesměrovat uživatele na novou adresu.

V případě ostatních nenalezených stránek je dobré uživateli vysvětlit, že zadaná adresa nemusí být v pořádku, omluvit se a podstrčit mu odkaz na homepage, mapu webu s odkazy na jednotlivé podstránky a návrh, kterou stránku mohl hledat, pokud to jde – např. výpis článku na téma, které se dá z adresy vyčíst atp.

Text budu průbežně doplňovat.

Martin Ševčík, 28. 11. 2010
přečteno: 9330/9209×