Dwadzieścia oryginalnych projektów strony 404 do skopiowania jako HTML i CSS, co powinna zawierać przydatna strona 404, przykłady tonu wypowiedzi oraz jak upewnić się, że strona wysyła prawdziwy status 404 w Next.js, Netlify, Vercel i innych.
Dobra strona 404 prostymi słowami przyznaje, że strony brakuje, zachowuje nawigację i proponuje dalszą drogę: pole wyszukiwania, linki do popularnych stron i sposób zgłoszenia niedziałającego linku. Musi też wysyłać prawdziwy kod statusu 404, inaczej wyszukiwarki traktują ją jako soft 404. Poniżej znajdziesz 20 projektów do skopiowania.
Co powinna zawierać strona 404
Każdy projekt poniżej to zwykły HTML i CSS, który możesz edytować obok podglądu na żywo, a potem wkleić do własnej strony 404. Po projektach następuje część, którą większość galerii pomija: jak sprawić, by serwer wysyłał właściwy kod statusu.
To strona, która mówi coś w stylu nie znaleziono, ale zwraca status 200 OK, albo uboga strona, którą wyszukiwarki uznają za błąd. Google zgłasza je w Search Console jako soft 404 i może usunąć je z wyników. Rozwiązaniem jest zwracanie prawdziwego statusu 404 lub 410 dla brakujących stron.
Oba oznaczają, że strony nie ma, a Google twierdzi, że błędy 4xx traktuje w dużej mierze tak samo. 410 Gone mówi, że usunięcie jest trwałe, co pasuje do zakończonych kampanii i usuniętych produktów. 404 sprawdza się w większości przypadków, zwłaszcza gdy nie masz pewności.
Same w sobie nie. Brakujące strony to normalna część sieci, a Google twierdzi, że błędy 404 dla stron, które nie powinny istnieć, nie szkodzą reszcie witryny. Szkodę wyrządzają niedziałające linki wewnętrzne, utrata linków prowadzących do usuniętej strony oraz soft 404.
Większość aplikacji jednostronicowych przepisuje każdy adres URL na index.html, aby mógł zadziałać router, przez co serwer odpowiada 200 na wszystko. Albo prerenderuj prawdziwe strony i pozwól nieznanym ścieżkom trafiać do 404.html, albo skonfiguruj serwer tak, aby zwracał status 404 dla ścieżek, których Twój router nie zna.
Każdy projekt to samodzielny HTML i CSS. Edytuj kod, a podgląd się zaktualizuje.
Punkt wyjścia: komunikat, wyszukiwarka, kilka linków. Pasuje do każdej firmy.
Duże konturowe cyfry nadają stronie wyrazisty kształt bez żadnych obrazów.
Komunikat po lewej, krótka lista popularnych stron po prawej. Na telefonach układa się w pionie.
Dla stron z ciemnym motywem. Delikatna poświata utrzymuje czytelność nagłówka bez krzykliwości.
Dla sklepów internetowych: zamień ślepy zaułek w przeglądanie trzech popularnych produktów.
Link mailto z gotowym tematem sprawia, że zgłoszenie niedziałającego linku to jedno kliknięcie. Jeśli możesz, dodaj po stronie serwera adres strony do treści wiadomości.
Znak drogowy narysowany wyłącznie w CSS, więc nie ma żadnego obrazu do załadowania.
Dla dokumentacji i dużych serwisów z treścią, gdzie wyszukiwanie to najszybsza droga powrotna.
Dla portfolio i stron osobistych, gdzie mniej znaczy więcej.
Prowadzi głodnych gości prosto do menu, rezerwacji i numeru telefonu.
Dla fachowców: odwiedzający prawdopodobnie chce zamówić usługę, więc pokaż numer telefonu.
Kolorowy nagłówek pasujący do zabawnych marek.
Dla narzędzi deweloperskich: udawany wiersz poleceń z prawdziwymi linkami.
Kieruje czytelników do najnowszych tekstów zamiast pustej strony.
Dla oprogramowania: zalogowani użytkownicy często trafiają na 404 ze starych zakładek, więc zaproponuj panel.
Tekst na obrazie na całą szerokość z ciemną nakładką dla kontrastu. Podmień adres URL na własne zdjęcie.
Podpowiada, dokąd większość ludzi przechodzi dalej, ale nigdy nie przekierowuje, więc status zostaje 404.
Wyśrodkowana karta na barwionym tle, dobra dla czystych, nowoczesnych stron.
Dla stron dwujęzycznych: komunikat w obu językach z linkami do każdej strony głównej.
Dla stron, które już nie wrócą. Połącz to ze statusem 410.
Projekt pomaga tylko wtedy, gdy serwer również mówi 404. Oto jak to zrobić w popularnych konfiguracjach.
Renderowana dla nieznanych adresów URL i zawsze, gdy wywołasz notFound(); Next.js wysyła status 404.
Oba serwują plik 404.html z katalogu głównego publikowanego folderu ze statusem 404. Przepisanie wszystkiego na index.html ze statusem 200 to psuje.
Dodaj 404.html w katalogu głównym źródła publikacji. GitHub Pages serwuje go ze statusem 404.
Kieruje brakujące adresy URL na Twoją stronę, zachowując status 404. Użyj ścieżki lokalnej, a nie pełnego adresu URL, inaczej Apache wykona przekierowanie.
Flaga internal uniemożliwia bezpośrednie otwarcie /404.html ze statusem 200.
Dodaj handler po wszystkich innych trasach, aby trafiały do niego tylko niedopasowane żądania.
Zacznij za darmo · Bez karty kredytowej