Chybová stránka 404

00:00:00

Každý web má chybovou stránku – ale mnoho začátečníků ji přehlédne a nechá ji na výchozí šedivé stránce od hostingu. Přitom vlastní 404 stránka je jednoduché vylepšení, které zlepší dojem z webu a pomůže uživatelům najít, co hledají.

Co je chyba 404 a kdy nastane?

Stavový kód HTTP 404 (Not Found) server posílá, když požadovaná stránka neexistuje. Nastane tehdy, když:

Uživatel zadá špatnou URL adresu (překlepl se).
Někdo klikne na zastaralý odkaz, který jsi smazal nebo přejmenoval.
Odkaz z jiného webu vede na stránku, která už neexistuje.

Výchozí 404 stránka od hostingu je obvykle nevzhledná a bez jakékoli nápovědy. Vlastní stránka může uživatele přivítat, vysvětlit situaci a nabídnout cestu dál.

Jak nastavit vlastní 404 stránku – soubor .htaccess

Na sdíleném hostingu s Apache serverem (nejběžnější typ) se vlastní 404 stránka nastavuje souborem .htaccess. Je to konfigurační soubor v kořenové složce webu. Vytvoř ho (nebo ho uprav) a přidej jeden řádek:

ErrorDocument 404 /stranka-nenalezena.html

Cesta musí být absolutní od kořene webu (začínat lomítkem). Soubor stranka-nenalezena.html pak musí existovat v kořenové složce webu.

Podobně lze nastavit i jiné chybové stránky:

ErrorDocument 403 /pristup-odepren.html
ErrorDocument 500 /chyba-serveru.html

Co by měla 404 stránka obsahovat?

Dobrá chybová stránka není jen hláška „Stránka nenalezena\". Měla by uživateli pomoci:

Jasné vysvětlení situace – přátelsky vysvětli, co se stalo. Bez technického žargonu.
Odkaz na hlavní stránku – vždy. Je to první záchranné lano.
Navigace nebo mapa webu – přímé odkazy na hlavní sekce webu.
Vyhledávací pole – pokud ho web má, zobraz ho i tady.
Možnost kontaktu – pokud uživatel nenajde cestu sám, nabídni mu e-mail nebo formulář.

Nepovinné, ale sympatické: trocha humoru nebo originální design. Dobré 404 stránky jsou někdy záměrně vtipné – ale nikdy na úkor srozumitelnosti.

Příklad jednoduché 404 stránky

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stránka nenalezena | Můj web</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>

<main id="hlavni-obsah">
  <h1>Stránka nenalezena (404)</h1>
  <p>Hledaná stránka bohužel neexistuje – možná byla přesunuta nebo
     odstraněna. Omlouváme se za komplikace.</p>

  <nav aria-label="Nouzová navigace">
    <ul>
      <li><a href="/">Hlavní stránka</a></li>
      <li><a href="/o-mne.html">O mně</a></li>
      <li><a href="/kontakt.html">Kontakt</a></li>
    </ul>
  </nav>

  <p>Pokud jsi sem přišel přes odkaz z jiné stránky a myslíš, že jde
     o chybu, <a href="mailto:info@mujweb.cz">dej mi vědět</a>.</p>
</main>

</body>
</html>

Přístupnost chybové stránky

I chybová stránka musí být přístupná. Několik pravidel:

Nadpis <h1> musí jasně říct, co se stalo – „Stránka nenalezena\" nebo „Chyba 404\".
Nepoužívej jen barvy nebo ikony pro vyjádření chyby – přidej textový popis.
Všechny navigační odkazy musí mít smysluplný text. Žádné „Klikni zde\".
Stránka musí mít správný jazyk (lang="cs") – VoiceOver ho potřebuje pro správnou výslovnost.

Tip od Zdeňka

Zdeněk radí: Vlastní 404 stránku nastavuj hned při spuštění webu – ne až tehdy, kdy tě na ni uživatelé upozorní. Je to pět minut práce, které ukazují, že ti na detailech záleží. Na tomto webu mám na 404 stránce odkaz na rozcestník a vyhledávání – a ze statistik Google Search Console vidím, kolik lidí ji skutečně navštíví. Není to zanedbatelné číslo. Každý takový uživatel bez dobré 404 stránky odchází – s dobrou stránkou má šanci najít, co hledal.