Własna strona błędu 404 w WordPressie – jak ją przygotować i zatrzymać użytkownika?

Większość właścicieli stron przypomina sobie o istnieniu strony 404 dopiero wtedy, gdy sama na nią trafi. Budujemy dopracowaną stronę główną, przygotowujemy ofertę, poprawiamy formularz kontaktowy i testujemy witrynę na telefonach. Tymczasem szablon błędu pozostaje w wersji dostarczonej przez motyw: krótki komunikat, dużo pustej przestrzeni i żadnej podpowiedzi, co użytkownik powinien zrobić dalej.

Błąd 404 nie zawsze oznacza, że popełniliśmy poważny błąd. Użytkownik mógł źle wpisać adres, otworzyć starą zakładkę albo kliknąć link prowadzący do usuniętego materiału. Nawet na dobrze utrzymanej stronie będą pojawiały się wejścia na adresy, które nie istnieją.

Nie mamy pełnej kontroli nad tym, skąd odwiedzający przychodzą, ale możemy kontrolować to, co zobaczą po dotarciu do nieprawidłowego adresu. Dobrze przygotowana strona 404 wyjaśnia sytuację i proponuje kilka prostych dróg powrotu: wyszukiwarkę, stronę główną, ofertę albo popularne artykuły.

Techniczne przyczyny takich błędów oraz metody ich wykrywania opisaliśmy wcześniej w artykule „Błędy 404 – jak je wykryć i naprawić?”. Tutaj skupimy się wyłącznie na samym wyglądzie i użyteczności strony błędu. Pokażę, jak przygotować ją w motywie blokowym oraz co zrobić, jeśli korzystamy ze starszego, klasycznego motywu.

Dlaczego domyślna strona 404 to za mało?

Kod 404 oznacza, że serwer działa, ale nie znalazł treści pod wskazanym adresem. Nie jest to awaria całego WordPressa. Problem dotyczy wyłącznie konkretnego URL-a. Dla użytkownika techniczne rozróżnienie nie ma jednak większego znaczenia. Kliknął link, oczekiwał artykułu, produktu lub formularza, a zamiast niego zobaczył komunikat o błędzie.

Domyślne strony 404 często kończą się na zdaniu „Nie znaleziono strony”. Taka informacja jest prawdziwa, ale niewiele z niej wynika. Użytkownik nie wie, czy materiał został usunięty, czy popełnił literówkę, ani gdzie może znaleźć podobną treść. Najprostszym wyjściem staje się przycisk „Wstecz” albo zamknięcie karty.

Własna strona błędu powinna przejąć rolę awaryjnej nawigacji. Nie odzyska usuniętego artykułu, ale może skierować czytelnika do wyszukiwarki, kategorii lub strony kontaktowej. W sklepie może pokazać najpopularniejsze produkty, a na blogu kilka najnowszych poradników.

Nie oznacza to, że powinniśmy zamienić stronę 404 w drugą stronę główną. Zbyt wiele elementów także utrudnia podjęcie decyzji. Wystarczy prosty komunikat i kilka najbardziej prawdopodobnych kierunków. Użytkownik powinien w ciągu kilku sekund zrozumieć, co się stało i gdzie może przejść.

Warto też pamiętać, że estetyczna strona 404 nie zastępuje naprawiania problemów. Jeśli usunęliśmy ważną podstronę albo zmieniliśmy jej adres, powinniśmy ustawić przekierowanie. Gdy strona została skasowana przypadkowo, pomocny może być poradnik „Jak odzyskać przypadkowo usuniętą stronę lub wpis w WordPressie?”. Szablon 404 jest zabezpieczeniem na sytuacje, których nie udało się uniknąć, a nie zamiennikiem regularnej administracji.

Co umieścić na własnej stronie błędu?

Najważniejszy jest czytelny nagłówek. Sam wielki napis „404” może wyglądać dobrze, ale nie każdy odwiedzający wie, co ten numer oznacza. Warto dodać normalne zdanie: „Nie znaleźliśmy tej strony” albo „Wygląda na to, że ten adres już nie istnieje”. Pod spodem wystarczy krótka informacja, że treść mogła zostać przeniesiona, usunięta lub adres został wpisany nieprawidłowo.

Kolejnym elementem powinna być wyszukiwarka. Jeżeli użytkownik pamięta temat lub fragment tytułu, może samodzielnie znaleźć aktualny artykuł. WordPress ma standardowy blok wyszukiwania, dlatego w motywie blokowym nie trzeba instalować żadnego dodatkowego rozszerzenia.

Przydatny jest również wyraźny przycisk prowadzący do strony głównej. Lepiej podpisać go konkretnie — „Wróć na stronę główną” — zamiast używać ogólnego „Kliknij tutaj”. Obok można dodać dwa lub trzy odnośniki do najważniejszych sekcji witryny. Na stronie firmowej będą to zwykle oferta, realizacje i kontakt. W sklepie lepiej pokazać kategorie produktów, promocje albo bestsellery.

Na blogu warto wykorzystać kilka najnowszych lub najpopularniejszych artykułów. Nie powinno być ich jednak zbyt dużo. Trzy materiały z miniaturą, tytułem i krótkim opisem wystarczą, żeby zainteresować czytelnika innym tematem. Jeśli strona ma rozbudowaną strukturę, można również podlinkować interaktywną mapę witryny. Sposób jej przygotowania pokazywaliśmy w artykule „Jak dodać interaktywną mapę strony w WordPressie?”.

Całość powinna zachować wygląd pozostałej części serwisu. To samo logo, kolory, typografia i menu pokazują odwiedzającemu, że nadal znajduje się na właściwej witrynie. Można dodać zabawną ilustrację lub delikatną animację, ale nie powinna ona zajmować całego pierwszego ekranu i spychać nawigacji na sam dół.

Dobra strona 404 jest zatem prosta: komunikat, wyszukiwarka, przycisk powrotu i kilka alternatywnych treści. Reszta jest dodatkiem.

Edycja szablonu 404 w motywie blokowym

Jeżeli korzystamy z motywu blokowego, WordPress pozwala edytować stronę 404 bezpośrednio w Edytorze witryny. Nie trzeba tworzyć osobnej podstrony ani modyfikować plików PHP. Szablon błędu działa podobnie jak szablon pojedynczego wpisu, archiwum czy wyników wyszukiwania.

W panelu przechodzimy do Wygląd → Edytor, a następnie otwieramy sekcję Szablony. Na liście szukamy pozycji „404”, „Strona błędu” albo „404 Page”. Nazwa zależy od używanego motywu i wersji językowej WordPressa.

Po otwarciu szablonu zobaczymy elementy przygotowane przez autora motywu. Czasami będzie to jedynie nagłówek i pole wyszukiwania, a czasami bardziej rozbudowany układ. Możemy usunąć domyślną zawartość i zbudować własną wersję z dostępnych bloków.

Najwygodniej rozpocząć od bloku Grupa. Ustawiamy w nim odpowiednią szerokość, odstępy oraz wyrównanie do środka. Wewnątrz dodajemy duży napis „404”, normalny nagłówek, dwa zdania wyjaśnienia i blok wyszukiwania. Pod nim możemy umieścić przycisk prowadzący do strony głównej.

Jeżeli chcemy wyświetlić najnowsze artykuły, używamy bloku Pętla zapytania. Wybieramy prosty układ trzech kolumn, ograniczamy liczbę wyników i pozostawiamy jedynie miniaturę, tytuł oraz ewentualnie krótką zajawkę. Na telefonie kolumny powinny ułożyć się jedna pod drugą.

Przydatne mogą być również wzorce blokowe. Zamiast budować każdą sekcję od zera, możemy wykorzystać gotowy układ z przyciskiem, listą wpisów albo wezwaniem do kontaktu. O tworzeniu i używaniu takich elementów pisaliśmy w poradniku „Bloki wielokrotnego użytku i wzorce w Gutenbergu – jak przyspieszyć tworzenie treści?”.

Po zakończeniu edycji klikamy „Zapisz”. WordPress pokaże listę zmienianych elementów. Warto sprawdzić, czy zapisujemy wyłącznie szablon 404, a nie przypadkowo nagłówek lub stopkę używaną w całym serwisie.

Jeżeli nie widzimy pozycji Wygląd → Edytor, najprawdopodobniej używamy klasycznego motywu. Sam brak tej funkcji nie oznacza, że trzeba natychmiast przebudowywać stronę. Jeśli jednak rozważamy przejście na nowszy model edycji, warto wcześniej zapoznać się z artykułem o migracji na Full Site Editing.

Własna strona 404 w klasycznym motywie

W klasycznych motywach za wygląd błędu odpowiada najczęściej plik 404.php. Można go zmodyfikować, ale zmiany powinny zostać wykonane w motywie potomnym. Edytowanie głównego motywu jest ryzykowne, ponieważ kolejna aktualizacja może nadpisać przygotowany szablon.

Dla większości użytkowników prostszym rozwiązaniem będzie darmowa wtyczka Smart Custom 404 Error Page, znana także jako 404page. Pozwala ona utworzyć zwykłą stronę WordPressa i wybrać ją jako widok wyświetlany przy nieistniejących adresach.

Po instalacji tworzymy nową stronę, na przykład o nazwie „Błąd 404”. Możemy edytować ją w Gutenbergu, Elementorze, Divi albo innym builderze używanym w witrynie. Dzięki temu projektowanie wygląda dokładnie tak samo jak przygotowanie standardowej podstrony.

W treści dodajemy nagłówek, wyszukiwarkę, krótki komunikat oraz przyciski. Warto wyłączyć elementy typowe dla artykułów, takie jak data publikacji, nazwisko autora, komentarze i lista kategorii. Strona błędu nie jest zwykłym wpisem i nie potrzebuje takich informacji.

Po opublikowaniu strony przechodzimy do ustawień wtyczki 404page i wskazujemy ją jako aktywny szablon błędu. Od tego momentu WordPress powinien wyświetlać przygotowany układ za każdym razem, gdy użytkownik otworzy nieistniejący adres.

Niektóre rozbudowane motywy i page buildery mają własny mechanizm tworzenia szablonów. Elementor Pro pozwala przygotować 404 w Theme Builderze, podobne możliwości oferują również Divi Theme Builder i część nowoczesnych motywów. Jeśli używane narzędzie ma taką funkcję, nie trzeba instalować dodatkowej wtyczki. Najlepiej korzystać z jednego systemu, zamiast nakładać na siebie kilka metod obsługi tego samego szablonu.

Jak sprawdzić, czy wszystko działa poprawnie?

Po zapisaniu zmian wpisujemy w przeglądarce losowy adres, który na pewno nie istnieje, na przykład:

twojastrona.pl/test-strony-404-123

Jeżeli pojawi się przygotowany szablon, wykonujemy kilka prostych testów. Sprawdzamy wyszukiwarkę, wszystkie przyciski oraz linki do najważniejszych sekcji. Następnie otwieramy stronę na telefonie i upewniamy się, że duży napis „404” nie wychodzi poza ekran, a pole wyszukiwania i przyciski są wygodne w obsłudze.

Ważny jest również kod odpowiedzi serwera. Strona może wyglądać estetycznie, ale nadal powinna zwracać status 404 Not Found. Jeśli serwer odpowiada kodem 200, wyszukiwarka może uznać pustą stronę za zwykły dokument i zgłosić soft 404.

Status można sprawdzić za pomocą internetowego narzędzia do testowania nagłówków HTTP, narzędzi deweloperskich przeglądarki albo Google Search Console. Jeśli dopiero konfigurujemy tę usługę, pomocny będzie poradnik „Google Search Console – konfiguracja i pierwsze kroki”.

Nie należy automatycznie przekierowywać wszystkich błędów na stronę główną. Użytkownik szukający konkretnego artykułu nagle trafia na zupełnie inną treść i nie wie, dlaczego. Przekierowanie 301 ma sens tylko wtedy, gdy istnieje rzeczywisty odpowiednik usuniętej strony.

Na koniec warto monitorować adresy generujące błędy. Darmowa wtyczka Redirection potrafi zapisywać wejścia na nieistniejące podstrony. Jeśli zauważymy, że jeden stary URL otrzymuje regularny ruch, możemy zdecydować o ustawieniu przekierowania. Losowe adresy odwiedzane pojedynczo przez boty zwykle nie wymagają żadnej reakcji.

Podsumowanie

Strona 404 nie jest miejscem, które chcemy pokazywać użytkownikom. Nie oznacza to jednak, że możemy całkowicie ją zignorować. Nieaktualne linki, błędnie wpisane adresy i usunięte treści będą pojawiać się nawet w dobrze utrzymanym serwisie.

W motywie blokowym przygotowanie własnego widoku jest stosunkowo proste. Wystarczy wejść do Edytora witryny, otworzyć szablon 404 i zbudować układ z dostępnych bloków. W klasycznym motywie możemy użyć wtyczki 404page albo mechanizmu dostępnego w page builderze.

Nie trzeba projektować rozbudowanej podstrony. Najlepszy efekt daje czytelny komunikat, wyszukiwarka, przycisk powrotu oraz kilka najważniejszych linków. Dodatkowa ilustracja lub żart mogą zmniejszyć frustrację, ale najważniejsza pozostaje nawigacja.

Celem strony 404 nie jest zdobycie nagrody za najbardziej kreatywny błąd w internecie. Ma ona zatrzymać użytkownika i pomóc mu odnaleźć treść, której rzeczywiście szukał. Jeśli po kilku sekundach wie, gdzie kliknąć dalej, szablon spełnił swoje zadanie.

Jeżeli macie inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.