Jak vytvořit vlastní 404 chybovou stránku pro váš web

…a proč

Může to být nesprávně zadaná adresa URL nebo nefunkční odkaz, který spouští chybovou stránku 404, což je reakce serveru na stránku, která neexistuje. Pro ty, kteří neví, jak to vypadá, viděli jste stránku takovou již dříve?

Když se uživatel pokusí sledovat nefunkční odkaz, zobrazí se stránka „404 nenalezeno“

Když se na to podíváte, dokážete si představit, jak by bylo pro uživatele náročný pocit, že by náhle padl na prázdnou stránku, jako je tato. Před vytvořením naší stránky si to rychle rozdělíme na kousky.

Scénář / problém: Uživatel se pokouší vyhledat stránku, která neexistuje.
Známý kontext: Stránka 404 nebyla nalezena.
Řešení: Přátelská stránka informující uživatele o tom, co se stalo jednoduchým jazykem, a řekne jim, co dělat dál.

Chcete-li tedy zamrznout velké UX, na kterém jste na svém webu opakovali, ujistěte se, že jste využili případ 404.

Pojďme se ponořit.

Krok 1: Používáte webový tvůrce, jako je Squarespace nebo Weebly?

Pokud ano, pak by již mělo mít nastavení chybové stránky 404, které můžete přímo použít k nahrání obrázku a přidání tlačítek. Jsi tady docela hotový.

V mém případě jsem nechal svůj web běžet lokálně. Pokud jste jako já, jděte dál!

Krok 2: Vytvořte si vlastní stránku 404 v HTML.

404 stránek pro mé portfolio

Krok 3: Vyhledejte soubor „.htaccess“ v kořenovém adresáři serveru

FTP na váš server a najděte tento soubor v kořenovém adresáři. Budete jej muset upravit. Pokud to nenajdete, budete si ho muset vytvořit. Pojmenujte jej „.htaccess“. Nic před a po. Jen „.htaccess“.

Krok 4: Upravte soubor .htaccess

Otevřete jej a přidejte následující řádek:

ErrorDocument 404 /not-found-page.html

… Kde /not-found-page.html je úplná cesta k nové vlastní stránce 404, kterou jste vytvořili.

S tímto řádkem pouze oznamujeme serveru, že v případě scénáře chyby 404 tento soubor vraťte do prohlížeče.

Krok 5: Ujistěte se, že cesta je správná a otestujte ji

Zkuste hledat stránku, která na vašem webu neexistuje. Měli byste získat svou vlastní stránku 404, kterou jste označili v souboru .htaccess.

Krok 6: Fungovalo to? Pokud ne, aktualizujte nastavení serveru

V mém případě, protože webové stránky provozuji lokálně na počítačích Mac, Apache neumožňuje vlastní soubor .htaccess. Musel jsem jít do konfigurace Apache a upravit nastavení.

Takto jsem to udělal pro každého, kdo má zájem a postupuje stejným způsobem:

Voilah! To je do značné míry pro vytvoření vlastní stránky 404. Mělo by to fungovat perfektně pro váš web. Pokud problémy stále přetrvávají, zkuste si s tím, jak můžete změnit konfiguraci serveru, aby bylo možné přizpůsobit 404 vlastních stránek.

Příběh a tok vašich webových stránek je neúplný, pokud uživatele dovedete do slepé uličky, jako je 404. Existuje mnoho tvůrčích příkladů, ze kterých se můžete inspirovat. Nezapomeňte, aby to bylo jednoduché, ale zajímavé. :-)

Dejte nám vědět, pokud máte nějaké dotazy nebo potřebujete další pomoc týkající se tohoto. Chodil jsem kolem a snažil jsem se to vyřešit celý den, dokud jsem to nechal funkční a nemyslel si, že se o to podělím.