404: So erstellst du die optimale Fehlerseite (mit vielen Beispielen)

Wenn der Server eine angeforderte Seite nicht findet, gibt er den Fehler 404 aus. Es ist nur eine Frage der Zeit, wann ein solcher Fehler auftaucht, denn es ist die bekannteste Fehlermeldung des Internets. Ein einziger Vertipper in der URL verursacht schon einen 404. Viele Websites vergessen jedoch diese wichtige Seite und lassen stattdessen den Serverstandard ausliefern. Leider wirst du mit dieser nichtssagenden Seite höchstwahrscheinlich Besucher verlieren. Um das zu vermeiden, zeigen wir dir heute, was es bei einer optimalen 404-Fehlerseite zu beachten gilt.

404 - die optimale Fehlerseite

In diesen Situationen treten 404-Fehler auf

404-Fehler treten auf, wenn sich dein Besucher vertippt hat. Oder auch, wenn Google oder andere Websites, die auf eine oder mehrere deiner Unterseiten leiten auf eine veraltete Seite verweist, diese Seite aber umbenannt, umgezogen oder gelöscht wurde.

An den meisten 404-Fehlern ist aber dein Besucher schuld, denn gerne wird etwas falsch eingetippt. Ein einziger Buchstabendreher reicht schon, um den Fehler zu provozieren. Dein Besucher wird jedoch von der Annahme ausgehen, nichts falsch gemacht zu haben. Das ist einfach nur menschlich.

Deshalb ist es sehr wichtig, deinem Besucher in dieser Situation wichtige Links und Details an die Hand zu geben, damit sein Ärger verraucht und er vielleicht dennoch das Gesuchte findet.

404: Drei Versionen von Fehlerseiten

Grundsätzlich gibt es drei Hauptvarianten von Fehlerseiten. Nummer Eins ist grafisch sehr aufwändig, jedoch simpel in der Funktion, da sie einfach nur einen Button zur Startseite präsentiert. Diese Art einer Fehlerseite ist zwar hübsch anzusehen, jedoch nicht zu empfehlen.

http://www.tripomatic.com/404

Nummer Zwei ist grafisch aufwändig gestaltet, bietet jedoch dem Besucher wesentlich mehr Möglichkeiten, sich zu orientieren. So sieht eine brauchbare 404-Fehlerseite aus. Dem Besucher werden einige Links an die Hand gegeben, mit denen er vielleicht doch noch das Gesuchte finden kann.

https://www.airbnb.com/404

Version Nummer Drei hingegen ist grafisch sehr einfach gehalten, bietet jedoch alle Informationen, die wirklich wichtig sind. Wir werden etwas weiter unten im Artikel darauf eingehen. Ob du diese Version oder eine grafisch hochwertigere Variation bevorzugst, bleibt dir überlassen.

https://www.democraticpost.de/404

Hilfestellung für den Besucher: Wichtige Elemente einer 404-Seite

Die Idee hinter einer wirklich guten 404-Fehlerseite ist die Hilfestellung für den Besucher der Website. Dieser weiß oftmals nicht, warum das Gesuchte nicht gefunden wurde. Darum müssen wir ihm Informationen und zusätzliche Funktionen an die Hand geben, damit er motiviert wird, weiterhin auf unserer Website zu bleiben und eine neue Suche zu starten. Eine gute 404-Fehlerseite hilft dem Besucher also bei der Orientierung und liefert zudem Information.

Wichtige Elemente einer 404-Fehlerseite

Die folgende Liste wird dir beim Aufbau deiner 404-Fehlerseite helfen. Wenn du sie Schritt für Schritt abarbeitest, hast du alle wichtigen Elemente in deine Fehlerseite integriert.

1 – Der Hinweis auf einen 404-Fehler

„404 – Seite nicht gefunden“ sollte auf jedem Fall in einer Variation ausgegeben werden. Das ist ein wichtiger Ansatz zur Orientierung deines Besuchers. Erst damit weiß er, was schief gelaufen ist.

2 – Ein verlinktes Logo und ein Slogan

Deine Fehlerseite sollte auf jeden Fall deine Website erkennbar machen. Dazu gehört ein auf die Startseite verlinktes Logo und der Slogan deiner Website. Bei Dr. Web beispielsweise wäre das Logo angebracht und der Slogan »Dr. Web – Das Magazin für Seitenbetreiber«. Damit weiß der Besucher sofort, auf welcher Website er gelandet ist.

3 – Die Suchfunktion

Das ist das wichtigste Element einer Fehlerseite. Der direkte Zugriff auf die Suche muss möglich, die Suchfunktion muss direkt sichtbar und ohne weiteren Link benutzbar sein.

4 – Link zur Sitemap und den Archiven

Eine gute 404-Fehlerseite sollte stets einen Link zu einer Sitemap für Besucher enthalten. Ich meine damit nicht die Sitemap.xml für Google, sondern eine speziell für Besucher angelegte Sitemap, aus der die wichtigsten Links hervorgehen. Ebenso ist ein Link zu den Archiven angebracht, vorzugsweise zu monatlichen Archiven. Beide Seiten bieten dem Besucher einige Möglichkeiten, das von ihm Gesuchte doch noch zu finden.

5 – Ein Hinweis auf einen eventuellen Tippfehler

Schnell hat man sich mal vertippt, wenn man eine URL händisch eingibt und aufruft. Für diese Fälle ist es gut, einen kleinen netten Hinweis auf einen eventuellen Tippfehler auszugeben.

6 – Eine Kontaktmöglichkeit benennen

So mancher Besucher möchte vielleicht helfen und den Fehler an den Administrator der Website weiterleiten. Damit dieses schnell und einfach geschehen kann, sollte eine Kontaktmöglichkeit angegeben werden. Das kann mit einem Kontaktformular oder einer verlinkten E-Mail-Adresse geschehen.

So einfach ist eine 404 erstellt

Die meisten Websites laufen heute auf Apache-Servern. Eine Fehlerseite erstellen und ausgeben, ist nicht sonderlich schwer. Erstelle einfach eine Datei namens 404.php. Diese Datei kannst du dann so gestalten, wie du es möchtest. Achte jedoch bitte darauf, dass sich alle wichtigen Elemente in der Datei befinden. Ob du diese Datei grafisch aufwändig oder einfach und klar gestalten möchtest, bleibt dir überlassen.

1 – Nutzung ohne WordPress

Nachdem du die Datei fertiggestellt hast, sollte sie in das Root-Verzeichnis deines Servers geladen werden. Dann musst du im Anschluss noch die .htaccess Datei bearbeiten. Diese Datei steuert den Server. Sollte der Server eine bestimmte Datei nicht auf Anhieb finden, sieht er in der .htaccess nach und findet in unserem Fall die Datei.

Folgender Code muss hinein:

ErrorDocument 404 /404.php

Die .htaccess-Datei muss ebenfalls in das Root-Verzeichnis des Servers geladen werden. Jeder fehlerhafte Aufruf deiner Website sollte nun mit der Anzeige deiner 404.php-Datei abgeschlossen werden.

2 – Nutzung mit WordPress

Auch hier wird eine 404.php angelegt und so gestaltet, wie du es haben möchtest. Du kannst entweder eine Theme-Datei nehmen, dann wird die 404-Seite wie in Beispiel Nummer Drei angezeigt aussehen, oder du wählst eine grafisch aufwändigere Version. Nach Fertigstellung kommt die Datei dann in den Root-Ordner deines aktiven Themes. Die .htaccess Datei muss nicht geändert werden. WordPress kümmert sich automatisch um die Auslieferung.

Beispiel: eine 404 für die Nutzung mit WordPress

Den wichtigen, inneren Teil meiner eigenen 404-Fehlerseite verlinke ich dir als Gist bei GitHub. Ein Klick auf die Grafik öffnet die Datei. Du kannst dich an der Datei etwas orientieren.

Code für eine optimale 404-Fehlerseite

404 – grafische Inspirationen

Wenn du deine Fehlerseite grafisch ansprechender gestalten möchtest, so findest du hier einige Inspirationen. Um die 404-Seite jedoch wirklich gut und benutzerfreundlich zu gestalten, solltest du trotz toller Grafik die obigen Tipps beherzigen.

Krit.it – Error

Krit.it - Error 404

Eine animierte Ping-Pong Session.

GrantBurke – Error

GrantBurke - Error 404

Gifmylive.arte.tv – Error

Gifmylife.arte.tv - Error 404

Sehr interessante Effekte, man muss diese Seite besucht und ausprobiert haben.

Wild – Error

Wild - Error 404

Ein süßes Kätzchen geht immer. Sehenswert ist die benutzerdefinierte URL.

Tripomatic – Error

Tripomatic - Error 404

Liebevoll gestaltet und animiert. Sonnen- und Mondauf- und Untergang sind zu sehen.

Urban Influence – Error

Urban Influence - Error 404

Video als Hintergrund.

Barrel – Error

Barrel - Error 404

This by Them – Error

This by Them - Error 404

Eine animierte Mischung aus David Bowie-Referenz und dem Film Gravity.

Hub – Error

Hub - Error 404

Mit vollflächigem Hintergrundvideo.

Airbnb – Error

Airbnb - Error 404

Liebevoll gestaltet und animiert mit Mehrwert durch Links – auch zur Sitemap.

Homestarrunner – Error

Homestar Runner - Error 404

Quartzy – Error

Quartzy - Error 404

Martin Wright – Error

Martin Wright - Error 404

Einfallsreich und einfach niedlich.

Laszlito – Error

Laszlito - Error 404

TOBI – Error

TOBI - Error 404

Webydo – Error

Webydo - Error 404

Angry Birds Space – Error

Angry Birds Space - Error 404

Odd Pears – Error

Odd Pears - Error 404

Tiny Carrier – Error

Tiny Carrier - Error 404

Edukate Web Client – Error

Edukate Web Client - Error 404

Hübsch animierter Parallax-Hintergrund.

Fork CMS – Error

Fork CMS - Error 404

Jackrabbit Design – Error

Jackrabbit Design - Error 404

H Art – Error

H Art - Error 404

Signum – Error

Signum - Error 404

Storio Digital – Error

Storio Digital - Error 404

Spry Group – Error

Spry Group - Error 404

Mit vollflächigem Hintergrundvideo.

Brand Crowd – Error

Brand Crowd - Error 404

Cooori – Error

Cooori - Error 404

Paul Foster Design – Error

Paul Foster Design - Error 404

Bietet eine blinkende Serverlandschaft.

Romain Brasier – Error

Romain Brasier - Error 404

Im Stil alter Computer-Spiele animierte Seite mit dazu passendem Sound. Sehr sehenswert!

Cool Apps – Error

Cool Apps - Error 404

Code School – Error

Code School - Error 404

Vollanimierte Seite mit startender Rakete, liebevoll und witzig gemacht.

Herrlich Media – Error

Herrlich Media - Error 404

Back Country – Error

Back Country - Error 404

Constellation & Co. – Error

Constellation & Co. - Error 404

Use Panda – Error

Use Panda - Error 404

EyeEm – Error

EyeEm - Error 404

Bob Wassermann – Error

Bob Wassermann - Error 404

Niedlich gestaltet und animiert.

(Der Beitrag erschien erstmals am 12. März 2009 und wurde aus dem Smashing Magazine übernommen. Seitdem wurde er grundlegend renoviert, neu geschrieben und regelmäßig aktualisiert. Fällt dir ein Fehler oder ein Änderungsbedarf auf, wäre es nett, wenn du uns unter redaktion@drweb.de darüber unterrichten würdest.)

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

Hinterlasse einen Kommentar

25 Kommentare auf "404: So erstellst du die optimale Fehlerseite (mit vielen Beispielen)"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Fehlerseiten 404 […]

trackback

[…] Und wieder einmal – 404-Fehlerseiten Und wieder einmal – 404-Fehlerseiten on Dr. Web. […]

Sascha Reinhardt
Gast

Ein recht unpassendes Icon (Männchen schießt sich durch den Kopf) für eine Topstory am heutigen Tag. Stichwort Katastrophe in Winnenden.

Pirate
Gast

Und zum „Talk like pirate -day“ gibt’s dann wieder diese wundervollen „Arrr! Rats below deck!“-404-Seiten :-)

Nico
Gast

Schick, Schick warum ist den meine nicht dabei ? :D

Sascha Reinhardt
Gast

Finde es sehr gut, dass Ihr das Icon geändert habt. Danke.

Blog Drauf
Gast

Danke für die Erwähnung meiner 404 Seite notaniche.com . Die Witze gibts auf http://blogdrauf.de/404 auch noch mit ein paar deutschen Witzen. :)

domingos
Gast

Ich denke, man sollte auf jeden Fall das Corporate Design der Seite einblenden, vor allem bei unternehmen. Bei einigen dieser Beispiele sieht das so aus, als ob die komplette Navi ausgeblendet wäre.
Ich würde je nach Geschmack eine HTML-Sitemap oder eine benutzbare volltextsuche anbieten.

trackback

[…] den meisten fällen sind die 404-Seiten ja nicht gerade schön anzusehen.drWeb.de hat hier eine Liste schöner Page-not-Found-Pages veröffentlicht. Kann man sicher die ein oder andere als […]

trackback

[…] 404 und wie kann man kreativ damit umgehen? Die haben sich bestimmt von Dr. Web inspirieren lassen (Und wieder einmal – 404-Fehlerseiten). Tipp: Man die 404-Seite originell gestalten oder mit einer nützlichen Funktion versehen, […]

trackback

[…] bietet das Tracking von 404 Fehlern in bestehenden Webseiten und die Benachrichtigung per Mail inklusive umfangreichem Fehlerbericht. […]

trackback

[…] Eine schöne Sammlung mit ungewöhnlichen Fehlerseiten findet ihr übrigens bei Dr. Web. […]

Spielehorst.de
Gast

I like those ones with homer :D

trackback

[…] wenig Inspiration gefällig? Hier geht’s […]

trackback

[…] DrWeb.de […]

Sebastian
Gast

Ihr habt eine der schönsten 404 Seiten vergessen :)

http://www.yazio.de/i-moag-di

Uwe
Gast

Mir ist auch eine sehr schicke 404er über den Weg gelaufen: http://www.furnissimo.de/404.php

Ulli
Gast

Bin gerade über einen veralteten Link hier gelandet und habe mich zumindest gut amüsiert ;-)

Telco
Gast

Sehr interessanter Artikel. Grüße!

Franz Meyer
Gast

Ich finde diese hier absolut klasse
http://anunnaki.serverma.de/404.html

oli
Gast

Übrigens, in der DoubleOptInMail des DrWeb Newsletters ist ein 404 :-)

https://drweb.us1.list-manage.com/subscribe/confirm

Michael Dobler
Dr. Web

Haben wir extra als eigenes Beispiel eingebaut :-) Nein, im Ernst, ich habe gerade den Anmeldeprozess getestet und konnte den Fehler nicht finden. Magst du mir die Email mit dem 404er an michael.dobler@drweb.de schicken? Danke!

Lukas
Gast

Habe auch auch schon gehört, dass so etwas für Google sehr wichtig sein soll. Also anders gesagt, dass Google Seiten mit customized 404 Sites höher ranken kann.
Kann man solche 404 Seiten auch bei anderen Plattformen so einfach einfügen wie in WordPress?
Also für mich interessant: geht das auch bei Onlineshop Software wie von shopify?
Merci! :)

Lukas
Gast

Vielen Dank!
Stimmt das sieht doch schon mal vielversprehend aus! Das ich nicht direkt da bin sodern bei shopify.onebyte müsste ja keinen Unterschied machen oder?
Wobei deren eigene 404 eher schlicht gehalten ist finde ich: https://shopify.onebyte.ch/404
Hier habe ich übrigens noch mehr kreative 404 Seiten gefunden:
http://t3n.de/news/kreative-404-fehlerseiten-626019/
lg

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen