Zwanzig originale 404-Seiten-Designs, die du als HTML und CSS kopieren kannst, was eine nützliche 404-Seite enthält, Beispiele für die Tonalität und wie du sicherstellst, dass die Seite auf Next.js, Netlify, Vercel und weiteren Plattformen einen echten 404-Status sendet.
Eine gute 404-Seite sagt in klaren Worten, dass die Seite fehlt, behält deine Navigation bei und zeigt einen Weg nach vorn: ein Suchfeld, Links zu beliebten Seiten und eine Möglichkeit, einen defekten Link zu melden. Sie muss außerdem einen echten 404-Statuscode senden, sonst behandeln Suchmaschinen sie als Soft 404. Unten findest du 20 Designs zum Kopieren.
Was eine 404-Seite enthalten sollte
Jedes Design unten ist reines HTML und CSS, das du neben einer Live-Vorschau bearbeiten und dann in deine eigene 404-Seite einfügen kannst. Nach den Designs folgt der Teil, den die meisten Sammlungen auslassen: dafür sorgen, dass der Server den richtigen Statuscode sendet.
Eine Seite, die zum Beispiel nicht gefunden meldet, aber einen Status 200 OK zurückgibt, oder eine dünne Seite, die Suchmaschinen als Fehler einstufen. Google meldet solche Seiten in der Search Console als Soft 404 und entfernt sie möglicherweise aus den Ergebnissen. Die Lösung ist, für fehlende Seiten einen echten 404- oder 410-Status zurückzugeben.
Beide bedeuten, dass die Seite nicht da ist, und laut Google werden 4xx-Fehler weitgehend gleich behandelt. 410 Gone sagt aus, dass die Entfernung dauerhaft ist, was zu beendeten Kampagnen und gelöschten Produkten passt. 404 ist in den meisten Fällen in Ordnung, vor allem, wenn du dir nicht sicher bist.
Nicht für sich genommen. Fehlende Seiten sind ein normaler Teil des Webs, und laut Google schaden 404-Fehler für Seiten, die nicht existieren sollen, dem Rest deiner Website nicht. Schaden entsteht durch defekte interne Links, durch verlorene Links auf eine gelöschte Seite und durch Soft 404.
Die meisten Single-Page-Apps schreiben jede URL auf index.html um, damit der Router laufen kann, sodass der Server auf alles mit 200 antwortet. Rendere entweder echte Seiten vorab und lass unbekannte Pfade auf eine 404.html fallen, oder lass deinen Server für Pfade, die dein Router nicht kennt, einen 404-Status zurückgeben.
Jedes Design ist eigenständiges HTML und CSS. Bearbeite den Code, und die Vorschau aktualisiert sich.
Die Grundlage: Meldung, Suche, ein paar Links. Passt zu jedem Unternehmen.
Große, umrandete Ziffern geben der Seite eine starke Form, ganz ohne Bilder.
Meldung links, eine kurze Liste beliebter Seiten rechts. Auf Smartphones untereinander.
Für Websites mit dunklem Design. Das weiche Leuchten hält die Überschrift lesbar, ohne zu schreien.
Für Onlineshops: Mach aus der Sackgasse einen Stöberweg mit drei beliebten Produkten.
Ein mailto-Link mit fertiger Betreffzeile macht das Melden eines defekten Links zu einem einzigen Klick. Füge die Seitenadresse wenn möglich auf deinem Server in den Text ein.
Ein Straßenschild, nur mit CSS gezeichnet, es muss also kein Bild geladen werden.
Für Dokumentationen und große Content-Websites, bei denen die Suche der schnellste Weg zurück ist.
Für Portfolios und persönliche Websites, bei denen weniger mehr ist.
Bringt hungrige Besucher direkt zur Speisekarte, zur Reservierung und zur Telefonnummer.
Für Handwerksbetriebe: Der Besucher möchte wahrscheinlich einen Auftrag buchen, also zeig die Telefonnummer.
Eine farbenfrohe Überschrift, die zu verspielten Marken passt.
Für Entwicklertools: eine nachgebaute Kommandozeile mit echten Links.
Führt Leser zu den neuesten Texten statt zu einer leeren Seite.
Für Software: Angemeldete Nutzer landen oft über alte Lesezeichen auf 404-Seiten, also biete das Dashboard an.
Text über einem randlosen Bild mit dunkler Überlagerung für den Kontrast. Setze die URL deines eigenen Bildes ein.
Schlägt vor, wohin die meisten Besucher als Nächstes gehen, leitet aber nie weiter, sodass der Status 404 bleibt.
Eine zentrierte Karte auf getöntem Hintergrund, gut für klare, moderne Websites.
Für zweisprachige Websites: die Meldung in beiden Sprachen mit Links zur jeweiligen Startseite.
Für Seiten, die nicht zurückkommen. Kombiniere das mit einem 410-Status.
Das Design hilft nur, wenn auch der Server 404 meldet. So geht es bei gängigen Setups.
Wird für unbekannte URLs gerendert und immer dann, wenn du notFound() aufrufst; Next.js sendet einen 404-Status.
Beide liefern eine 404.html im Stammverzeichnis des veröffentlichten Ordners mit einem 404-Status aus. Ein Catch-all-Rewrite auf index.html mit Status 200 macht das kaputt.
Lege 404.html im Stammverzeichnis der Veröffentlichungsquelle ab. GitHub Pages liefert sie mit einem 404-Status aus.
Verweist fehlende URLs auf deine Seite und behält den 404-Status bei. Verwende einen lokalen Pfad, keine vollständige URL, sonst leitet Apache stattdessen weiter.
Das internal-Flag verhindert, dass jemand /404.html direkt mit einer 200 aufruft.
Füge den Handler nach allen anderen Routen hinzu, damit nur nicht zugeordnete Anfragen ihn erreichen.
Kostenlos starten · Keine Kreditkarte nötig