Stránka 404: dokument nenalezen je důležitá součást každého webu o více než jedné stránce, přesto na ni spousta vývojářů zapomíná nebo ji nemá vyřešenou správně. Dnes vám představím, jak takovou chybovou stránku vůbec vytvořit, pohovořím něco o základních komponentách, ze kterých by se měla skládat a v závěru zkusím na pár příkladech demonstrovat správně a nesprávně vytvořené 404ky.

Začneme pěkně od základu: nejdříve si ukážeme, jak vůbec stránku 404 správně nastavit. Příklad pro statické stránky v HTML je uvedený níže. Kód zkopírujeme do souboru .htaccess.

Error Document 404

ErrorDocument 404 /404.html

Tedy vždy, když bude zadaná chybná url, načte se soubor 404.html. K jeho vlastnímu obsahu se dostanu v druhé části článku. Pokud na webu využíváme PHP a nějaké základní konstrukce jako například include podle GET proměnné, obsah souboru index.php můžeme upravit následovně. (Pro ještě lepší ošetření GET proměnné doporučuji přečíst odkazovaný článek.)

if (isset($_GET['page'])) {
	if (file_exists('templates/' . $_GET['page'] . '.php')) {
		include 'templates/' . $_GET['page'] . '.php';
	} else {
		include 'templates/404.php';
	}
} else {
	include 'templates/uvod.php';
}

Tento zápis dovolí přistupovat k obsahu stránky 404 i napřímo, a to zadáním ?page=404 do url. (Bude splněna druhá podmínka.) Do souboru .htaccess potom zapíšeme:

ErrorDocument 404 /index.php?page=404

pro případ neexistujících obrázků či jiných dokumentů. V případě dynamických stránek s použitím databáze už samozřejmě předpokládám, že podmínku na existenci záznamu v tabulce zvládnete složit sami.

Vzhled šablony 404

Definice ErrorDocument a zobrazení šablony je ta jednodušší část: nyní si povíme něco o samotném obsahu stránky 404: co a proč by měla obsahovat, jak by měla vypadat. Máme vlastně dvě možnosti: buď zachováme design webu včetně hlavičky, navigace a patičky nebo vytvoříme šablonu novou s vlastním jednoduchým designem. Pro kterou možnost se tedy rozhodnout? U jednoduchého webu můžeme šablonu 404 plně integrovat do designu - jak tomu mám například já. Naopak čím náročnější web, tím víc býváme limitování architekturou redakčního systému, a tak vývojáři často volí právě druhou možnost s nezávislou šablonou.

mike.treba.cz/404/

Obsah stránky 404

Bývá standardem uvádět na chybové stránce pár základních komponent: některé tam být musí, jiné tam být mohou, některé jen pomohou. Co na chybovce uvedeno být musí, je odkaz na hlavní stránku - nějaký způsob, jak se uživatel dostane zpět na prohlížení webu. Že by měla obsahovat velký nadpis a informaci, že dokument neexistuje, snad ani zmiňovat ani nemusím. Spíš bych zdůraznil často viděný text, který by tam rozhodně být neměl: "zkuste to prosím později". Pokud někdo odkazuje na neexistující url, těžko to bude někdy později fungovat. Nebude. A my nebudeme návštěvníka uvádět v omyl a raději mu napíšeme, aby požadovaný dokument zkusil najít například v mapě stránek nebo pomocí vyhledávacího políčka.

Právě mapa stránek bývá často uváděna. Na chybovce být může i nemusí, stejně tak vyhledávání. Pokud už search form na webu existuje někde na viditelném místě, není nutné ho vždy opakovat. A když chceme mít stránku 404 ještě více vymakanou, můžeme například uvést i první úroveň kategorií webu včetně anotačních obrázků. Hezky to májí vyřešené například lidovky.cz (odkaz níže).

Jak řeší chybovku jiní

Alfacomp.cz

Stránka 404 je zakomponovaná do těla stránky, vlevo vidím jak vyhledávací formulář, tak seznam kategorií. Uprostřed pak akorát hlášení, že se nacházím na špatné adrese. Toto řešení je velice jednouché, přesto jedno z nejefektivnějších. V tomto případě není nutné na stránku nic víc přidávat.

www.alfa.cz/asdf

Lidovky.cz

Lidovky mají šablonu pro stránku 404 zvlášť. Je na ní umístěné vyhledávání, stejně tak základní rubriky webu spolu s obrázkem a krátkým popisem. I toto řešení je pěkné. Díky separované šabloně si můžeme se vzhledem trochu víc vyhrát a hlavně nemusíme načítat kompletní obsluhu webu.

www.lidovky.cz/asdf

iDnes.cz

Tak takhle ne. Nejdůležitější prvky sice stránka obsahuje, ale v prvé řadě není příliš hezká a v druhé řadě by tam rozhodně mohl být navíc například ten seznam rubrik.

www.idnes.cz/asdf/

Novinky.cz

Tohle je snad ještě horší než iDnes... Takto stránky 404 opravdu neděláme. Na druhou stranu chápu, že Seznam má asi na práci lepší věci než ladit chybovku na Novinkách.

www.novinky.cz/asdf/

Myslíte, že jsem nějakou důležitou informaci vynechal nebo máte jakoukoli připomínku ke článku? Neváhejte se o ni podělit v komentářích!

Edit 26. 4. 2020: Upraven blok kódu pro include, aby odpovídal revidovanému článku. iDnes i Novinky už si svou chybovku koukám opravili a mně se nepovedlo najít vyloženě špatnou 404ku na některém z velkých českých webů. Odkazy proto zatím nechávám.