Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 18. Juli 2018

404: So baust du die optimale Fehlerseite (mit und ohne WordPress)

Wenn der Server eine ange­for­der­te Seite nicht fin­det, gibt er den Fehler 404 aus. Es ist nur eine Frage der Zeit, wann ein sol­cher Fehler auf­taucht, denn es ist die bekann­tes­te Fehlermeldung des Internets. Ein ein­zi­ger Vertipper in der URL ver­ur­sacht schon einen 404. 

Viele Websites ver­ges­sen jedoch die­se wich­ti­ge Seite und las­sen statt­des­sen den Serverstandard aus­lie­fern. Leider wirst du mit die­ser nichts­sa­gen­den Seite höchst­wahr­schein­lich Besucher ver­lie­ren. Um das zu ver­mei­den, zei­gen wir dir heu­te, was es bei einer opti­ma­len 404-Fehlerseite zu beach­ten gilt.

In diesen Situationen treten 404-Fehler auf

404-Fehler tre­ten auf, wenn sich dein Besucher ver­tippt hat. Oder auch, wenn Google oder ande­re Websites, die auf eine oder meh­re­re dei­ner Unterseiten lei­ten auf eine ver­al­te­te Seite ver­weist, die­se Seite aber umbe­nannt, umge­zo­gen oder gelöscht wur­de.

An den meis­ten 404-Fehlern ist aber dein Besucher schuld, denn ger­ne wird etwas falsch ein­ge­tippt. Ein ein­zi­ger Buchstabendreher reicht schon, um den Fehler zu pro­vo­zie­ren. Dein Besucher wird jedoch von der Annahme aus­ge­hen, nichts falsch gemacht zu haben. Das ist ein­fach nur mensch­lich.

Deshalb ist es sehr wich­tig, dei­nem Besucher in die­ser Situation wich­ti­ge Links und Details an die Hand zu geben, damit sein Ärger ver­raucht und er viel­leicht den­noch das Gesuchte fin­det.

404: Drei Versionen von Fehlerseiten

Grundsätzlich gibt es drei Hauptvarianten von Fehlerseiten. Nummer Eins ist gra­fisch sehr auf­wän­dig, jedoch sim­pel in der Funktion, da sie ein­fach nur einen Button zur Startseite prä­sen­tiert. Diese Art einer Fehlerseite ist zwar hübsch anzu­se­hen, jedoch nicht zu emp­feh­len.

http://www.tripomatic.com/404

Nummer Zwei ist gra­fisch auf­wän­dig gestal­tet, bie­tet jedoch dem Besucher wesent­lich mehr Möglichkeiten, sich zu ori­en­tie­ren. So sieht eine brauch­ba­re 404-Fehlerseite aus. Dem Besucher wer­den eini­ge Links an die Hand gege­ben, mit denen er viel­leicht doch noch das Gesuchte fin­den kann.

https://www.airbnb.com/404

Version Nummer Drei hin­ge­gen ist gra­fisch sehr ein­fach gehal­ten, bie­tet jedoch alle Informationen, die wirk­lich wich­tig sind. Wir wer­den etwas wei­ter unten im Artikel dar­auf ein­ge­hen. Ob du die­se Version oder eine gra­fisch hoch­wer­ti­ge­re Variation bevor­zugst, bleibt dir über­las­sen.

https://www.democraticpost.de/404

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

Die Idee hin­ter einer wirk­lich guten 404-Fehlerseite ist die Hilfestellung für den Besucher der Website. Dieser weiß oft­mals nicht, war­um das Gesuchte nicht gefun­den wur­de. Darum müs­sen wir ihm Informationen und zusätz­li­che Funktionen an die Hand geben, damit er moti­viert wird, wei­ter­hin auf unse­rer Website zu blei­ben und eine neue Suche zu star­ten. Eine gute 404-Fehlerseite hilft dem Besucher also bei der Orientierung und lie­fert zudem Information.

Wichtige Elemente einer 404-Fehlerseite

Die fol­gen­de Liste wird dir beim Aufbau dei­ner 404-Fehlerseite hel­fen. Wenn du sie Schritt für Schritt abar­bei­test, hast du alle wich­ti­gen Elemente in dei­ne Fehlerseite inte­griert.

1 – Der Hinweis auf einen 404-Fehler

“404 – Seite nicht gefun­den” soll­te auf jedem Fall in einer Variation aus­ge­ge­ben wer­den. Das ist ein wich­ti­ger Ansatz zur Orientierung dei­nes Besuchers. Erst damit weiß er, was schief gelau­fen ist.

2 – Ein verlinktes Logo und ein Slogan

Deine Fehlerseite soll­te auf jeden Fall dei­ne Website erkenn­bar machen. Dazu gehört ein auf die Startseite ver­link­tes Logo und der Slogan dei­ner Website. Bei Dr. Web bei­spiels­wei­se wäre das Logo ange­bracht und der Slogan »Dr. Web – Das Magazin für Seitenbetreiber«. Damit weiß der Besucher sofort, auf wel­cher Website er gelan­det ist.

3 – Die Suchfunktion

Das ist das wich­tigs­te Element einer Fehlerseite. Der direk­te Zugriff auf die Suche muss mög­lich, die Suchfunktion muss direkt sicht­bar und ohne wei­te­ren Link benutz­bar sein.

4 – Link zur Sitemap und den Archiven

Eine gute 404-Fehlerseite soll­te stets einen Link zu einer Sitemap für Besucher ent­hal­ten. Ich mei­ne damit nicht die Sitemap.xml für Google, son­dern eine spe­zi­ell für Besucher ange­leg­te Sitemap, aus der die wich­tigs­ten Links her­vor­ge­hen. Ebenso ist ein Link zu den Archiven ange­bracht, vor­zugs­wei­se zu monat­li­chen Archiven. Beide Seiten bie­ten dem Besucher eini­ge Möglichkeiten, das von ihm Gesuchte doch noch zu fin­den.

5 – Ein Hinweis auf einen eventuellen Tippfehler

Schnell hat man sich mal ver­tippt, wenn man eine URL hän­disch ein­gibt und auf­ruft. Für die­se Fälle ist es gut, einen klei­nen net­ten Hinweis auf einen even­tu­el­len Tippfehler aus­zu­ge­ben.

6 – Eine Kontaktmöglichkeit benennen

So man­cher Besucher möch­te viel­leicht hel­fen und den Fehler an den Administrator der Website wei­ter­lei­ten. Damit die­ses schnell und ein­fach gesche­hen kann, soll­te eine Kontaktmöglichkeit ange­ge­ben wer­den. Das kann mit einem Kontaktformular oder einer ver­link­ten E-Mail-Adresse gesche­hen.

So einfach ist eine 404 erstellt

Die meis­ten Websites lau­fen heu­te auf Apache-Servern. Eine Fehlerseite erstel­len und aus­ge­ben, ist nicht son­der­lich schwer. Erstelle ein­fach eine Datei namens 404.php. Diese Datei kannst du dann so gestal­ten, wie du es möch­test. Achte jedoch bit­te dar­auf, dass sich alle wich­ti­gen Elemente in der Datei befin­den. Ob du die­se Datei gra­fisch auf­wän­dig oder ein­fach und klar gestal­ten möch­test, bleibt dir über­las­sen.

1 – Nutzung ohne WordPress

Nachdem du die Datei fer­tig­ge­stellt hast, soll­te sie in das Root-Verzeichnis dei­nes Servers gela­den wer­den. Dann musst du im Anschluss noch die .htac­cess Datei bear­bei­ten. Diese Datei steu­ert den Server. Sollte der Server eine bestimm­te Datei nicht auf Anhieb fin­den, sieht er in der .htac­cess nach und fin­det in unse­rem Fall die Datei.

Folgender Code muss hin­ein:

ErrorDocument 404 /404.php

Die .htac­cess-Datei muss eben­falls in das Root-Verzeichnis des Servers gela­den wer­den. Jeder feh­ler­haf­te Aufruf dei­ner Website soll­te nun mit der Anzeige dei­ner 404.php-Datei abge­schlos­sen wer­den.

2 – Nutzung mit WordPress

Auch hier wird eine 404.php ange­legt und so gestal­tet, wie du es haben möch­test. Du kannst ent­we­der eine Theme-Datei neh­men, dann wird die 404-Seite wie in Beispiel Nummer Drei ange­zeigt aus­se­hen, oder du wählst eine gra­fisch auf­wän­di­ge­re Version. Nach Fertigstellung kommt die Datei dann in den Root-Ordner dei­nes akti­ven Themes. Die .htac­cess Datei muss nicht geän­dert wer­den. WordPress küm­mert sich auto­ma­tisch um die Auslieferung.

(Beitragsbild: Depositphotos)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

21 Kommentare

  1. Danke für die guten Ideen! Eine Sitemap habe ich eigent­lich immer auf mei­nen Seiten, aber auf die Idee bin ich noch nicht gekom­men, sie auf der 404 Seite zu ver­lin­ken! Auf die ein­fachs­ten Dinge kommt man manch­mal nicht. (-;

  2. dan­ke für den inter­es­san­ten arti­kel! was spricht denn eigent­lich dage­gen im 404 fall auto­ma­tisch auf die start­sei­te des web­auf­tritts umzu­lei­ten? bei klei­nen über­sicht­li­chen web­auf­trit­ten ist das doch viel­leicht sogar bes­ser?

    • Bei wirk­lich sehr klei­nen Auftritten mit einer Handvoll Seiten wäre eine 404 viel­leicht über­di­men­sio­niert und eine Weiterleitung auf die Homepage käme in Frage. In allen ande­ren Fällen soll­test du beach­ten, dass der Besucher mit einer Erwartung kommt. Die wird durch die Homepage garan­tiert nicht erfüllt, sonst hät­te er ja kei­nen kon­kre­ten Link geklickt. Kommt er nun auf der Homepage an, wird er sich fra­gen, was denn hier schief gelau­fen ist und mög­li­cher­wei­se die Seite direkt wie­der ver­las­sen. Besser du holst ihn da ab, wo er steht.

  3. Sehr inter­es­san­ter Artikel. Grüße!

  4. Bin gera­de über einen ver­al­te­ten Link hier gelan­det und habe mich zumin­dest gut amü­siert ;-)

  5. Mir ist auch eine sehr schi­cke 404er über den Weg gelau­fen: http://www.furnissimo.de/404.php

  6. Ihr habt eine der schöns­ten 404 Seiten ver­ges­sen :)

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

  7. I like tho­se ones with homer :D

  8. Ich den­ke, man soll­te auf jeden Fall das Corporate Design der Seite ein­blen­den, vor allem bei unter­neh­men. Bei eini­gen die­ser Beispiele sieht das so aus, als ob die kom­plet­te Navi aus­ge­blen­det wäre.
    Ich wür­de je nach Geschmack eine HTML-Sitemap oder eine benutz­ba­re voll­text­su­che anbie­ten.

  9. Danke für die Erwähnung mei­ner 404 Seite notaniche.com . Die Witze gibts auf http://blogdrauf.de/404 auch noch mit ein paar deut­schen Witzen. :)

  10. Finde es sehr gut, dass Ihr das Icon geän­dert habt. Danke.

  11. Schick, Schick war­um ist den mei­ne nicht dabei ? :D

  12. Und zum “Talk like pira­te -day” gibt’s dann wie­der die­se wun­der­vol­len “Arrr! Rats below deck!”-404-Seiten :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.