Kdykoliv se může stát, že na vašich stránkách probíhá technická údržba, že jednotlivé stránky nejsou přístupné nebo obsahují chybné odkazy, což obvykle vede k zobrazení stránky 404. To není příjemné, ale i přesto si díky dobře navrženým chybovým stránkám můžete udržet své návštěvníky. Ukážeme vám, jak na to s pomocí WordPressu a Visual Composeru.

Účelem chybové stránky 404 je informovat návštěvníky o chybě, ke které došlo. A přesměrovat je na ty části webu, které stále existují nebo fungují. Tímto způsobem snížíte míru okamžitého opuštění, tzv. bounce rate.

Individuální nastavení stránky 404 je také ideální pro propagaci a vkládání prvků výzvy k akci. To znamená, že může v podstatě plnit stejné funkce jako funkční vstupní a cílová stránka.

Podíváme se na následující body:

• Co je to chybová stránka 404?
• Varianty chyby 404
• Kdy dochází k chybám 404 
• Jak opravit chyby 404
• Dobré a kreativní příklady stránek 404
• Tvorba vlastní chybové stránky 404 pomocí WordPressu
• Tvorba chybové stránky 404 s Visual Composerem

Co je to stránka 404?

Stručně řečeno je error 404 kódem odpovědi protokolu HTTP (Hypertext Transfer Protocol). Znamená to, že server nemůže najít požadovaný zdroj, nebo tu část cesty k webové stránce, která následuje za znakem "/". V podstatě to znamená, že konkrétní stránka, která se má zobrazit, není k dispozici.

Většinou se zobrazí následující chybové hlášení 404:

• HTTP 404
• 404 Not Found / nenalezeno
• 404
• 404 Error / Chyba
• 404 This page does not exist/ Tato stránka neexistuje
• Page Not Found/ Stránka nenalezena
• File Not Found/ Soubor nenalezen
• Directory Not Found/ Adresář nenalezen 
• Requested URL Not Found/ Požadovaná adresa URL nenalezena
• ... a podobně

Možné příčiny výskytu chyb 404:

• WordPress stránka nebo příspěvek jsou odstraněny, nebo přesunuty na jinou stránku bez přesměrování odkazů
• Návštěvník zadá název domény nesprávně (chybí písmeno, pravopisná chyba apod.)
• Dřívější odkazy (které se změnily) jsou stále uvedeny v externích zdrojích
• Server/webové stránky se zhroutily, jsou v údržbě nebo mají technické problémy, které způsobují, že se stránky nezobrazují správně (například přerušení připojení)

Kromě chyby 404 existují následující stavové kódy HTTP:

• 100-199 Odpověď: Požadavek na příjemce a pokračovat ve zpracování
• 200-299 Úspěch: Požadavek byl úspěšně zpracován
• 300-399 Přesměrování: Vyžaduje další akci k dokončení požadavku
• 400-499 Chyba klienta: Neplatný požadavek nebo požadavek nelze dokončit
• 500-599 Chyba serveru: Server nemohl přijmout požadavek

Jak opravit chybu 404

Na jedné straně prostřednictvím přesměrování, takže přesměrujete návštěvníky přímo na vstupní stránky, které co nejvíce odpovídají obsahu původního požadavku. U Raidboxes nepotřebujete další plugin WordPress pro nastavení přesměrování a pravidel pro předávání. Podívejte se na průvodce přesměrováním 301 a 302.

Další možností je najít a opravit nefunkční odkazy, tj. nahradit je nově platným interním zdrojem. Ujistěte se, že všechny interní odkazy vedou na požadované stránky. Požádejte také vlastníky externích zdrojů odkazů, aby změnili všechny nefunkční odkazy.

Dalším tipem je používání uživatelsky přívětivých adres URL a trvalých odkazů - zkraťte je, používejte malá písmena a popište, kam odkazy vedou. To vám pomůže sledovat nefunkční odkazy a optimalizovat web pro vyhledávače. Viz článek Vnitřní propojení a SEO s WordPress.

A nakonec byste měli vytvořit vlastní stránku 404. To vede "ztracené" návštěvníky zpět na domovskou stránku nebo na relevantní obsah. Zároveň nezaměňují chybu s výpadkem celého vašeho webu.

Jak si umět zajít na stránky 404

Důležité tedy je mít vlastní chybovou stránku 404, která návštěvníky přesměruje zpět na existující části webu. Nyní se podíváme, jaké máte možnosti. Obvyklé a doporučené postupy k vytváření vlastních stránek 404 jsou následující:

• Tlačítka Zpět nebo Domů: Dejte publiku možnost vrátit se na dostupné stránky nebo na jakékoliv libovolné místo.
• Vyhledávací panel: K těmto typům chyb obvykle dochází, když se uživatelé snaží najít konkrétní obsah nebo stránku. Nabídněte jim tedy možnost vyhledávání nebo navrhněte konkrétní cílové stránky.
• Kontaktní formuláře: Návštěvníci mohou využít kontaktní formulář nebo živý chat, nemohou-li najít hledaný obsah, a takto získat pomoc. To samé platí i pokud potřebují pomoc s jakýmikoliv jinými věcmi na vašem webu.
• Ikony sociálních médií: Vždy je dobré propojit spolu různé platformy sociálních médií, na nichž se nechá dohledat a zobrazit váš obsah.
• Humorné obrázky: Jedná se o jeden z nejvíce podceňovaných postupů, který je zjevně nedostatečně využíván. Humor určitě může zmírnit následky (pravděpodobně) negativního vnímání. Zde je několik příkladů.

Vytvoření vlastní stránky 404 s WordPressem

Při vytváření stránky 404 máte k dispozici následující možnosti: pomocí WordPressu, nebo nástroje pro tvorbu webových stránek, resp. page builderu, anebo pomocí vlastního kódu - například HTML. Takhle to funguje s WordPressem:

1. Přejděte na svůj WordPress Dashboard
2. Vlevo vyberte oblast "Design"
3. A zde položku "Editor"
4. Zkontrolujte, zda vaše WordPress šablona obsahuje "předlohu 404" (Ctrl + F a pak zadejte "404.php");
5. Klikněte na odkaz pro šablonu 404 vpravo

Obsah vypadá asi takto:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Nyní ji změňte podle svých potřeb. K tomu však potřebujete znalost jazyka HTML. Měli byste také pracovat s podřízenou šablonou, jinak mohou být vaše změny po aktualizaci WordPress šablony opět odstraněny.

Vytvoření stránky 404 s Visual Composerem

Jedním z nejjednodušších a nejrychlejších způsobů, jak vytvořit stránku 404, je použít nástroj pro tvorbu webových stránek. V našem příkladu vám ukážeme, jak vytvořit vlastní stránku 404 pomocí nástroje Visual Composer a využitím metody drag and drop. Upozorňujeme, že to jde jen ve verzi Premium.

Nejprve je třeba stáhnout a nainstalovat plugin Visual Composer. Viz tento videonávod na YouTube:

Jakmile je plugin nainstalován a aktivován, můžete začít. Použijte jednu z mnoha šablon. Nejprve klikněte v editoru frontendu na symbol "tržiště". Vyberte "šablony" a zadejte "404", abyste našli předpřipravené stránky 404.

Tento návod přesně vysvětluje, jak vytvořit svou vlastní stránku 404 s Visual Composerem:

Po dokončení a uložení jednotlivých návrhů stránek 404 je můžete dále spravovat v editoru. Následující video ukazuje, jak na to:

Další tipy, jak vytvořit individuálně definované stránky 404, nejlepší řešení s pluginy a inspiraci pro stránky 404 najdete v příspěvku od Visual Composer 404 stránky s WordPressem.

Příklady dobrých stránek 404

Shromáždili jsme pro vás několik nejkreativnějších chybových stránek 404 – bez ohledu na WordPress či Visual Composer – a vy se jimi můžete inspirovat. Stránka 404 služby GOG.com je jedním z nejlepších příkladů nestandardního myšlení. A to doslova:

Vzhledem k tomu, že se jedná o zábavné stránky, musela společnost Blizzard - co se týče stránky 404 - dostát vysokému standardu. "Chladný" design se sám o sobě stává klasikou:

Poslední příklad stránek 404 ze Slacku je velmi jednoduchý, ale přesto překvapivý. Je to krásný příklad kreativity:

Závěr o stránkách 404 s WordPressem

Nyní víte, jak vytvořit chybovou stránku 404, která návštěvníky zavede na aktivní podstránky vašeho webu. A jak můžete nepříjemnou situaci změnit v něco, co zmírní nebo úplně zabrání rozčílení. Také už víte, že existují velmi jednoduché způsoby, jak stránku 404 navrhnout - za předpokladu kreativity a trochy grafických dovedností.

S nástrojem pro tvorbu webových stránek nepotřebujete žádné znalosti programování pro to, abyste nudnou stránku 404 proměnili v něco, co vám zlepší náladu. A nebo to pomůže vašim návštěvníkům, když vyvstane problém. Napadává dobrý příklad úspěšné chybové stránky 404? Pak se o něj můžete podělit v komentáři.