Jak vytvořit chybovou stránku 404 s WordPress a Visual Composer

Jak vytvořit chybovou stránku 404 s WordPress a Visual Composer

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.

Věděli jste to?

Vynálezce World Wide Webu Tim Berners-Lee měl kancelář v místnosti 404 v CERNu (Evropská organizace pro jaderný výzkum), kde spravoval vůbec první webový server. Chyba 404 byla pojmenována podle něj, protože Tima často nebylo možné najít.

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.

Nakonec byste měli vytvořit svou vlastní stránku 404. Ta přivede "ztracené" návštěvníky zpět na domovskou stránku nebo k jinému relevantnímu obsahu. Zároveň si nebudou plést tuto chybu s výpadkem celého webu.

Stránky 404 a SEO

Většina chyb 404 obvykle nemá přímý negativní dopad na výkon nebo hodnocení webových stránek. V horším případě neobsahují žádné další přesměrování. Pak je o 88 % pravděpodobnější, že uživatelé zcela opustí web a už se na něj nevrátí, což je nepřímý faktor SEO. Dobrá stránka 404 je spíše o tom, že svému cílovému publiku připravíte příjemnější zážitek.

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.

404 WordPress pluginy

Nejlepší ve světě WordPressu jsou pluginy. K dispozici existuje více než 50 000 bezplatných aplikací pro snad všechny účely, které si dokážete představit: Pro stránky 404, stránky 301, přesměrování, SEO a mnoho dalšího. Viz oficiální seznam WordPress pluginů.

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:

Ukázka stránky 404 GOG
Stránka 404 od GOG.com (Obrázek © gog.com)

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:

Ukázka stránky 404 Blizzard
Blizzard vysílá své pomocníky (Obrázek © Blizzard)

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

Ukázka stránky 404 Slack
Hravé a s animací: Chybová stránka 404 na Slacku (Obrázek © Slack)

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.

Vaše dotazy na stránky 404

Jaké otázky máte ohledně chybových stránek 404 s WordPressem? Těšíme se na váš komentář. Zajímají vás aktuální témata kolem WordPress a WooCommerce? Pak sledujte Raidboxes na Twitteru, Facebooku,LinkedInnebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.