Jak zrobić własną stronę 404 w WordPressie?

Własna strona 404 w WordPressie to szablon, który motyw pokazuje, gdy serwer zgłasza błąd 404, czyli nie znajduje żadnej strony pod wpisanym adresem. W Astrze tworzysz ją w module Site Builder z Astra Pro, w pozostałych motywach plikiem 404.php w motywie potomnym. Dobrze zrobiona strona 404 zatrzymuje użytkownika w serwisie i nadal zwraca prawdziwy kod 404, więc Google nie uzna jej za soft 404.

Dlaczego domyślna strona 404 szkodzi firmie?

Domyślna strona 404 w większości motywów to komunikat w rodzaju „Nic nie znaleziono” albo „Page not found” i nic więcej: bez wyszukiwarki, bez linków do oferty, często po angielsku. Gdy błąd przechwytuje hosting, użytkownik widzi biały ekran serwera bez nagłówka i stopki, czyli bez śladu Twojej firmy.

Na taką stronę użytkownicy wchodzą z Google, z reklam i z newslettera: po starych linkach, po literówce w adresie, po usunięciu podstrony. Kto nie widzi drogi dalej, zamyka kartę i wraca do wyników wyszukiwania, czyli do konkurencji.

Jak zrobić stronę 404 w motywie Astra przez Site Builder?

W motywie Astra własną stronę 404 budujesz w module Site Builder, który wchodzi w skład płatnego dodatku Astra Pro. W polskim panelu przełącznik tej funkcji nazywa się „Kreator witryn”, a wcześniej nosiła ona nazwę Custom Layouts. Szablon przygotujesz w edytorze Gutenberga, bez kodu, w pięciu krokach:

Layout strony błędu 404 odpowiada tylko za obszar treści, a nagłówek i stopka pochodzą z ustawień motywu, dlatego cała strona wygląda jak reszta serwisu, z menu, logo i danymi kontaktowymi.

Jak złożyć stronę 404 w edytorze, blok po bloku?

Najłatwiej utknąć właśnie tutaj, przed pustym edytorem. Niżej podajemy układ, który sprawdza się na stronach firmowych, w kolejności, w jakiej czyta go użytkownik. Nazwy bloków są z polskiej wersji WordPressa, a każdy blok dodajesz przyciskiem „+”.

• Grupa: dodaj ją jako pierwszą i umieść w niej pozostałe bloki. Ustawisz jej raz tło, odstęp od góry i wyrównanie, więc nie musisz powtarzać tego przy każdym bloku osobno.
• Nagłówek (H1): komunikat po polsku, na przykład „Strona nie istnieje”. To jedyny nagłówek pierwszego stopnia na tej stronie.
• Akapit: jedno zdanie o tym, co zrobić dalej, w rodzaju „Poszukaj strony wyszukiwarką albo przejdź prosto do oferty”.
• Wyszukiwanie: etykietę, tekst zastępczy w polu i napis na przycisku wpisujesz wprost w bloku. Domyślnie bywa on po angielsku („Search …”), więc nadpisz go, zanim zapiszesz szablon.
• Przyciski: dwa, nie więcej. Pierwszy prowadzi do oferty albo na stronę główną, drugi do kontaktu.
• Kolumny z odnośnikami: cztery do sześciu linków do najważniejszych działów, rozdzielone na dwie listy obok siebie. Czyta się je szybciej niż jeden długi spis pod sobą.
• Odstęp: nad grupą i pod nią, żeby treść nie kleiła się do nagłówka i stopki motywu.

Możesz użyć bloków rdzenia WordPressa albo tych, na których zbudowana jest reszta serwisu. Na roseo.com.pl sekcje składamy ze Spectry, bo wtedy strona błędu ma te same odstępy, przyciski i typografię co pozostałe podstrony. Ważniejsze od samych bloków jest to, żeby strona 404 wyglądała jak Twój serwis, a nie jak pusty dokument.

Zanim klikniesz Publikuj, przełącz podgląd w edytorze na tablet i telefon, bo na wąskim ekranie najczęściej rozjeżdżają się dwa elementy: blok wyszukiwania i rząd przycisków.

Jak zrobić stronę 404 bez Astra Pro, plikiem 404.php?

WordPress przy odpowiedzi 404 sięga po plik 404.php z aktywnego motywu, a gdy go nie znajdzie, wyświetla stronę z index.php. Tak działa hierarchia szablonów: system dobiera plik do rodzaju żądania, a przy nieistniejącym adresie warunek is_404() zwraca prawdę i wskazuje właśnie 404.php.

Plik dodajesz do motywu potomnego (child theme), czyli takiego, który dziedziczy wygląd z motywu głównego i trzyma Twoje zmiany w osobnym katalogu. Ten sam plik w motywie głównym zniknie przy pierwszej aktualizacji.

Szkielet pliku to cztery elementy: get_header(), komunikat w HTML, get_search_form() z polem wyszukiwania i listą linków, a na końcu get_footer(). Nagłówek i stopka dołączają się z motywu, więc strona błędu wygląda spójnie z resztą serwisu, tak samo jak w Site Builderze.

Jedna pułapka: część hostingów przechwytuje błąd 404 wcześniej niż WordPress i pokazuje własną stronę błędu serwera. Wtedy ani 404.php, ani layout z Site Buildera się nie wyświetli, dopóki nie wyłączysz tej opcji w panelu hostingu.

Co powinna zawierać własna strona 404?

Własna strona 404 ma dać użytkownikowi trzy rzeczy: informację, co się stało, sposób na znalezienie właściwej strony i drogę do kontaktu. Sam napis „404” nie mówi nic osobie, która szukała cennika.

• Komunikat po polsku: jedno zdanie, co się stało („Strona nie istnieje”), i jedno, co zrobić („spróbuj wyszukiwarki lub przejdź do oferty”).
• Pole wyszukiwania: blok „Wyszukiwanie” w Gutenbergu albo get_search_form() w pliku; użytkownik wpisuje to, czego szukał, i zostaje w serwisie.
• Linki do najważniejszych stron: strona główna, oferta lub kategorie produktów, kontakt, blog. Wystarczą cztery do sześciu linków, nie całe menu.
• Nagłówek i stopka motywu: logo, menu i dane kontaktowe, żeby strona błędu wyglądała jak reszta serwisu.
• Zaproszenie do kontaktu: telefon, e-mail albo przycisk do formularza, bo część osób trafia na 404 z reklamy i chce zapytać o usługę od razu.

Czego na stronie 404 nie robić: nie ustawiaj automatycznego przekierowania na stronę główną, bo serwer zwróci wtedy kod 200 zamiast 404 i Google zaklasyfikuje adres jako soft 404. Nie zastępuj też informacji żartem: obrazek z kotem nie prowadzi do cennika.

Co ustawić w Rank Math, żeby nieistniejący adres pokazał Twoją stronę 404?

Po zbudowaniu szablonu pada zwykle pytanie, czy w Rank Math trzeba jeszcze kazać wtyczce kierować błędne adresy na tę stronę. Nie trzeba i takiego przełącznika tam nie ma, bo szablon 404 pokazuje się sam pod każdym adresem, którego WordPress nie rozpozna. W Rank Math pilnujesz czegoś odwrotnego: żeby wtyczka tej strony nie zastąpiła przekierowaniem.

W Rank Math SEO → Ustawienia ogólne → Przekierowania jest opcja „Reakcja na błąd”, a pod nią zdanie: „Jeśli nie zostanie znalezione nic podobnego, zostanie zastosowana ta opcja”. Decyduje ona o adresach, dla których wtyczka nie znalazła żadnej reguły przekierowania, czyli o całym ruchu, który normalnie trafia na stronę 404.

• Domyślne 404: adres zostaje na miejscu, serwer zwraca kod 404 i widać Twój szablon. Tak wtyczka działa po instalacji i tak ma zostać.
• Przekierowanie na stronę główną: każdy nierozpoznany adres ląduje na stronie głównej, a ta odpowiada kodem 200. Własna strona błędu przestaje się wtedy pokazywać.
• Własne przekierowanie: to samo, tylko na wskazany przez Ciebie adres.

Pułapka siedzi w trzeciej opcji: kusi, żeby zrobić stronę błędu jako zwykłą podstronę, wpisać jej adres w „Własne przekierowanie” i uznać temat za zamknięty. Efekt jest wtedy odwrotny od zamierzonego: użytkownik dostaje przekierowanie na podstronę, która odpowiada kodem 200, więc dla Google nie ma już błędu 404, tylko zwykła strona dostępna pod wieloma adresami. To jest podręcznikowy soft 404. Szablon z Site Buildera albo plik 404.php sprawdzają się lepiej, bo zostają pod błędnym adresem i zachowują kod odpowiedzi.

Drugi moduł wtyczki, Monitor 404 (menu Rank Math SEO → Monitor 404), nie zmienia wyglądu strony błędu, tylko prowadzi dziennik: który adres zwrócił kod 404, ile razy i kiedy. Jego zakres zmienisz w Ustawieniach ogólnych → Monitor 404, gdzie znajdziesz Tryb, Limit dziennika, Wyklucz ścieżki i Ignoruj parametry zapytania. Pod każdym wierszem są odnośniki „Zobacz | Przekierowanie | Usuń”, a „Przekierowanie” przenosi adres wprost do formularza z wypełnionym polem źródłowym.

Podział pracy jest prosty. Przekierowanie 301 zakładasz dla adresów, które mają następcę, czyli przeniesioną albo przepisaną podstronę, a strona 404 obsługuje całą resztę: literówki, stare linki bez odpowiednika i adresy wymyślone przez boty. Dlatego dziennik przeglądasz co jakiś czas i przekierowujesz z niego pojedyncze adresy, zamiast ustawiać jedną regułę na wszystko. Jak wypełnić taki formularz krok po kroku, opisujemy we wpisie jak naprawić błąd 404 w WordPressie.

Jak sprawdzić, czy własna strona 404 zwraca kod 404?

Wpisz w przeglądarce adres, który na pewno nie istnieje, i sprawdź kod odpowiedzi serwera, nie wygląd strony. Strona może wyglądać jak błąd i jednocześnie zwracać kod 200, a to jest soft 404, który Google zgłasza jako problem w Search Console. Kod sprawdzasz w trzech miejscach:

Adres testowy roseo.com.pl/strona-nie-istnieje-test/ zwraca kod HTTP 404 i tę stronę: komunikat „Strona nie istnieje” z podpowiedzią, pole wyszukiwania oraz nagłówek i stopkę serwisu z linkami do oferty i kontaktu. Na zrzucie jest jeszcze wbudowany szablon Astry, bez własnych bloków w obszarze treści, ale kod odpowiedzi jest prawidłowy, a to on decyduje o tym, jak Google potraktuje ten adres. Kod 200 na stronie błędu ma zwykle dwie przyczyny: kierowanie nieistniejących adresów na stronę główną albo strona 404 zrobiona jako zwykła podstrona z własnym adresem, do której prowadzi przekierowanie.

Czego nie pominąć przy własnej stronie 404?

Na koniec sprawdź osiem punktów:

• szablon 404 jest w Site Builderze (Astra Pro) albo w pliku 404.php motywu potomnego, nie w motywie głównym;
• komunikat jest po polsku i mówi, co zrobić dalej;
• na stronie jest pole wyszukiwania, a jego tekst zastępczy również po polsku;
• w Rank Math (Ustawienia ogólne → Przekierowania) „Reakcja na błąd” jest ustawiona na „Domyślne 404”;
• są linki do strony głównej, oferty i kontaktu;
• nagłówek i stopka motywu wyświetlają się na stronie błędu;
• nieistniejący adres zwraca kod 404 w curl -I albo w Search Console, nie 200;
• pamięć podręczna wtyczki i hostingu jest wyczyszczona po zapisaniu szablonu.

FAQ

Źródła

• Astra, dokumentacja „Enable Custom 404 Page”: wpastra.com/docs/enable-custom-404-page
• Astra, dokumentacja „Display Rules in Astra”: wpastra.com/docs/display-rules-in-astra
• Rank Math, dokumentacja ustawień ogólnych (sekcja Redirections, „Fallback Behaviour”): rankmath.com/kb/general-settings
• Rank Math, dokumentacja modułu 404 Monitor: rankmath.com/kb/monitor-404-errors
• Kinsta, „WordPress Template Hierarchy”: kinsta.com/blog/wordpress-template-hierarchy
• Elementor, „How to Create a Custom 404 Page in WordPress”: elementor.com/blog/custom-404-page-wordpress