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

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.

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.

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.

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.

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.

Die Top 50 der kreativsten Fehlerseiten im Weltennetz

Leider ist die Gestaltung einer Fehlerseite für viele Designer ein ungeliebtes Stiefkind. Andere Websites hingegen verbergen richtige Kunstwerke an dieser Stelle. Wir haben uns auf die Suche nach den 50 kreativsten Fehlerseiten im Weltennetz gemacht. Die hier haben wir gefunden. Beurteile die 404s nicht bloß vom Screenshot her. Viele arbeiten mit Videos oder parallaxen Effekten und anderen Animationen. Besuchen lohnt sich:

Redaxo

Bit.ly

Pixar

CSS-Tricks

Blizzard

Starbucks

Walk With You

Funilo

Dailymotion

The Useless Web Index

Wufoo

Duoh.com

Steve Lambert

Dan Woodger

Hot Dog Production

Airbnb

Lego

Github

CSS Ninjas

Limpfish

MailChimp

Audiko

Bret Victor

Figma.com

Spotify

Good Old Games

Cooklet

Moveline

Cloud Sigma

Grant Burke

Hoppermagic

Tripomatic

Urban Influence

Barrel

This by Them

 

Hub

 

Martin Wright

Tiny Carrier

Fork CMS

Jackrabbit Design

Signum

Storio Digital

Spry Group

Brand Crowd

Romain Brasier

Cool Apps

Herrlich Media

Constellation & Co

Use Panda

EyeEm

Mein wahres Ich

Magnt

(Beitragsbild: Depositphotos)