Mimo to, že webové stránky a jejich technologie procházejí neustálým vývojem, tak se také neustále zvyšuje celkový počet stránek na webu. Pro to, aby se stránky správně zobrazovaly uživatelům a aby šly dohledat přes vyhledávače bylo postupně vytvořeno množství formálních pravidel souhrně nazývaných jako SEO, které je při vytváření vhodné dodržovat. Při zachování těchto pravidel můžou vyhledávače stránky efektivně načíst, zařadit do svého katalogu a následně zobrazit ve výsledcích hledání.

Většinou se o dodržování těchto pravidel do různé míry starají redakční systémy, některá pravidla je ale třeba znát a pamatovat na ně při vytváření stránek. V těchto pokynech se zaměřuji jen na ty, které se týkají redaktorů a tvůrců obsahu webových stránek a které jsou nejčastěji porušovány na současných fakultních webech.

1. Adresa stránky (odkaz, URL) a název stránky

Adresa je nejdůležitější formální prvek stránky, typicky se při návštěvě stránky zobrazuje v horním řádku prohlížeče. Adresa především slouží k dohledání a citování obsahu stránky – z dlouhodobého hlediska by měla být trvalá a neměnná. Změna adresy je z hlediska uživatele i vyhledávače stejná jako odstranění stránky z webu. Změnu adresy lze částečně kompenzovat nastavením přesměrování ze staré adresy na novou – toto lze realizovat buď v redakčním systému nebo v nastavení serveru a doporučuji ve všech takových případech se obracet na mě jako na správce webu pro optimální řešení.

Moderní redakční systémy se adresu snaží vytvářet podle názvu stránky (title). Proto pro název i adresu platí obdobná pravidla. Název stránky se zobrazuje v záložce nebo okně prohlížeče a při uložení stránky na disk.
Problém nástává při změně názvu stránky a to ať už systém adresu podle nového názvu změní (typo3 – stará adresa zůstane nepřístupná) nebo nezmění (WordPress – hlavně při vytváření stránek kopírováním – nová stránka má potom starý odkaz, který vůbec nesouvisí s novým obsahem stránky).

• Název stránky by měl být trvalý, obsahově přesný a jedinečný. Drobné změny v názvu jsou v pořádku, pokud neovlivní adresu stránky (v typo3 je toto třeba ošetřit ručně zadáním staré/stávající adresy do „Speaking URL“ v nastavení stránky).
• Název by měl mít maximálně 70 znaků včetně mezer.
• Pokud se chystáte stránku v budoucnosti aktualizovat, nebo alespoň připouštíte možnost aktualizace obsahu, potom neuvádějte do názvu žádná data. Časová upřesnění patří do nadpisů.
  špatný příklad: „PdF MU v číslech 2007-2012“
  dobrý příklad: „PdF MU v číslech„
• Adresa ani název by neměly obsahovat žádné nadbytečné, nesrozumitelné nebo nerelevantní údaje. Např. by neměly obsahovat systémové prvky jako „index.php“ nebo „default.htm“ nebo další nesrozumitelné číselné parametry.
• Adresa by měla být složena jen z malých písmen bez diakritiky, čísel a pomlček. Pomlčky jsou vyhledávači chápány jako oddělovače slov. Lomítka a tečky jsou určeny k oddělování částí webu a jejich použití by měl řídit server nebo redakční systém. Toto je třeba hlídat už při nahrávání souborů na web. Adresy stránek vytvořených v redakčním systému se takto vytváří automaticky.
  špatný příklad: „http://www.ped.muni.cz/warts/fenknih/2012/photot/František Řezníček – Poezie čtyř druhů čaje (2).JPG„
• Každá stránka by měla být přístupná jen pod jednou adresou. V opačném případě duplikovaného obsahu musí vyhledávače řešit dilema jakou adresu zobrazit uživateli, což většinou řeší nezobrazením nebo penalizací stránky ve výsledcích vyhledávání. Toto se týká i případů když hlavní obsah stránky celý zkopírujete na jiný web.
• Při citování a odkazování na vaše fakultní stránky si proto zkontrolujte správný formát odkazů. Pozornost věnujte i (ne)přítomnosti lomítek na konci odkazu. Pro omezení duplicit jsem na fakultním serveru nastavil automatické přesměrovávání z některých špatných tvarů adres (lomítka na konci, velká písmena, chybějící www. na začátku).

špatný příklad (částečně fiktivní):

http://www.ped.muni.cz/wlib/new_web/index.php/POSLEDNI_VERZE/Nová%20stránka/otvíracídoba.2014.brezen/default.asp?ukol=34&jazyk=cs&podukol=12&format=open&has_js=true

dobrý příklad:

http://www.ped.muni.cz/knihovna/oteviraci-doba

Další příklad je v článku o citování z ISu.

2. Nadpisy

Pro volbu typu nadpisu slouží tradičně tagy <H1>..<H7>, překládané v editorech také jako Nadpis 1 (WordPress), Hlavička 1 (typo3), atp. Tradičně se tyto tagy používaly k úpravě velikosti a vzhledu nadpisů, ale vyhledávače tyto tagy používají k analýze struktury stránek. Z tohoto důvodu je doporučeno:

• Mít na stránce právě jeden hlavní nadpis H1. Tento hlavní nadpis může nebo nemusí být stejný jako název stránky, ale opět by měl být relevantní, přesný, specifický a jedinečný.
• Další podnadpisy by měly být H2 atd., H2 tagů by nemělo být více než 10 ale není to pevně daný limit. Souvisí to s tím, že stránka by neměla být přeplněná informacemi a příliš dlouhé dokumenty by měly být rozdělené do více stránek.
• Struktura nadpisů by měla odrážet strukturu stránky. Není např. vhodné použít malý podnadpis H4 hned po hlavním nadisu H1. Je vhodné po H1 použít H2, dále H3 a až potom H4.
• Nadpisy narozdíl od názvu stránky můžete libovolně měnit, aniž by to mělo vliv na dostupnost stránky.

3. Metadata

jsou další volitelně doplňkové údaje o stránce, které se nezobrazují na stránce uživatelům, ale jsou zpracovávány prohlížeči a vyhledávači. Z těchto metadat mají pro redaktory význam jen 2 položky:

• Popis (description, shrnutí) – měl by obsahovat přibližně jednovětný popis (mini-abstrakt) obsahu stránky. Limit zpracovávaný vyhledávači je 160-170 znaků včetně mezer a vyhledávače můžou tento popisek zobrazit ve výsledcích hledání.
  V typo3 se zadává ve zvláštní záložce Metadata, ve WordPressu bude po nainstalování pluginu možné zadávat pod editačním oknem článku. Snadné, ale ne úplně vhodné je použití obecného popisku pro všechny stránky jednoho webu.
• Autor – slouží k určení autorství. Pro tento účel se používá několik různých formátů metadat. Pro bližší informace k nastavení se na mě obraťte osobně.

4. Nefunkční odkazy

Určitě znáte ten nepříjemný pocit, když se snažíte na webu najít nějaký dokument, soubor nebo program, ale místo toho se vám zobrazí chybová stránka s kódovým číslem 404 – soubor nenalezen. Pro opravy takových odkazů v případě vašeho webu je můžeme rozdělit do těchto kategorií:

• Interní – odkazy v rámci vašeho vlastního webu. V případě správného použití správného redakčního systému by k nim nemělo vůbec docházet. Jak WordPress tak typo3 si toto umí pohlídat a odkazy při změně automaticky aktualizovat. Podmínkou je, že odkaz správně nastavíte jako stránku nebo soubor v rámci redakčního systému – většinou vybráním z nabídky existujích stránek místo ručního zadávání adresy.
  V případě ostatních fakultních systémů a webů budu pravidelně provádět kontrolu a snažit se informovat odpovědné osoby.
• Externí odchozí – odkazy na vašem webu, které vedou na cizí weby. Pro tyto účely byly na oba hlavní fakultní redakční systémy nainstalovány kontrolní pluginy, které kontrolu provádí automaticky. Ve WordPressu je odkaz na výsledky kontroly „Broken link checker“ přístupný na hlávní stránce pro správu – tzv. Nástěnce. Za špatné plugin považuje i autentizované stránky v ISu, které je v opravněných případech nutné v seznamu špatných odkazů potvrdit volbou „Dismiss„. Pro kontrolu funkčnosti odkazů je vhodné používat jiný prohlížeč, ve kterém nejste přihlášeni do ISu ani do redakčního systému.
  Pro ostatní weby můžu i opakovaně poskytnout jednorázovou kontrolu.
• Externí příchozí – odkazy na cizích webech, které odkazují na váš web. Pokud se takových odkazů vyskytne velké množství, tak budu jejich seznamy rozesílat příslušným redaktorům. Takové odkazy zpravidla nemáte pod kontrolou a nejlepší i když nejnáročnější je kontaktovat příslušné webmastery pro zjednání nápravy. V případě populárních odkazů na přesunuté stránky nebo soubory je možné nastavit přesměrování. Technicky je možné přesměrování řetězit (navazovat jedno na druhé), ale vyhledávače toto nemají rádi a většina jich nesleduje více než 1 přesměrování. Přesměrování si můžete nastavit i sami buď v redakčním systému (po aktivaci pluginu redirect na vyžádání), nebo mimo redakční systém pomocí souboru web.config. V případech přesměrování celého webu je nejlepší, pokud struktura odkazů na nové adrese co nejvíce odpovídá struktuře odkazů starého webu. Se složitějšími přesměrováními se obracejte na mě.

Obecné doporučení je, že na jedné stránce byste neměli mít více než 100 odkazů včetně všech položek navigace.

5. Nepřístupný obsah

Při tvorbě webu je třeba dávat pozor na obrázky a případně různé vychytávky, pro jejichž zobrazení je třeba Adobe Flash player. Hlavní problémy, které vznikají jsou:

• Při ukládání obrázku je doporučeno použít buď formát JPG pro fotky nebo formát PNG pro grafiku. Pokud si nejste jisti – zkuste obě varianty a vyberte tu, která je menší při zachování dostatečné kvality obrázku. Fotky přímo z foťáku je velice vhodné nějakým způsobem zmenšit, zejména jejich rozlišení v pixelech. Velikost jedné fotky na disku pro web by rozhodně neměla přesáhnout 1 Mb, optimálně by se měla pohybovat do 100-200 kb. Pro hromadnou konverzi můžete použít např. freeware program IrfanView nebo online službu https://kraken.io.
• Nenahrazujte texty nebo tabulky kvůli formátování nebo ozdobnému písmu obrázky nebo flashem, který neumí vyhledávač rozpoznat. Špatný příklad je např. http://www.ped.muni.cz/clil. Následkem toho taková stránka prakticky nejde dohledat ve vyhledávači podle klíčových slov.
  V nutných případech lze částečně kompenzovat přepsáním textu z obrázku do „alt“ atributu obrázku.
• Optimálně by měl každý obrázek obsahovat popisek „alt“ neboli „alternativní text„, který používají pro orientaci nevidomí a vyhledávače. Prakticky toto nemusíte řešit u fotogalerie se 100 fotkami, ale samostatně použité obrázky si popisky zaslouží.
• Snažte se vyhnout uzavřené technologii Adobe Flash, která záměrně není a nebude podporována na stále rozšířenějších mobilních zařízeních. Mimoto je obsah realizovaný flashem nepřístupný vyhledávačům a čtecím zařízením pro zrakově postižené uživatele. Nutné animace lze nově realizovat pomocí kombinace technologií HTML5 a javascript, do kterých lze exportovat z autorského nástroje Adobe Flash Pro nebo Animate.

Poznámky pro weby tvořené ručně bez redakčního systému

Na takovýchto webech je třeba zvlášť pohlídat následující:

• validitu HTML kódu stránky, např. pomocí validator.w3.org nebo pluginu do Firefoxu.
• přístupnost obsahu, např. pomocí web accessibility checker.
• přítomnost názvu stránky <title> a meta tagu „description“

Zdroje pro více informací:

• Google pokyny pro webmastery
• Google SEO Starter Guide
• http://www.jakpsatweb.cz/seo/seo.html
• Vyhledávač Bing – pravidla pro webmastery
• Dive into accessibility

Upozornění: Pravidla v tomto článku neplatí absolutně, mají charakter doporučení a odpovídají současným technologiím. V budoucnu se mohou dále vyvíjet a měnit.

Pavel Krejčí