404-Seite: Tipps & Inspiration für Deine individuelle Errorpage

Den Hinweis “Fehler 404 – Seite nicht gefunden” kennen wir alle. Er zeigt an, dass eine angesteuerte Seite nicht existiert und nicht erreichbar ist. Eine wichtige Information, die Besucher:innen im Falle von nicht verfügbaren Inhalten hilft, sich auf Deiner Website zurecht zu finden. Schauen wir uns genauer an, welche Rolle die 404-Seite für Deine Website User Experience spielt und wie Du aus ihr mehr machst, als eine langweilige Standardinformation.

Was ist eine 404-Fehlerseite?

Eine 404-Fehlerseite ist die Seite die angezeigt wird, wenn ein Client (z.B. ein Internet-Browser) versucht einen Inhalt aufzurufen, der auf der angegebenen Website nicht verfügbar ist.

Die Zeile „Not Found. The requested URL was not found on this server.“ hat in Fettschrift sicherlich jeder schon einmal gesehen haben. Sie wird meist als Standard angezeigt, wenn ein Server eine von einem Client angeforderte URL nicht gefunden hat.

So kommt es zu 404-Fehlern

404-Fehler (Status Code 404) entstehen wenn ein Server auf die Anfrage eines Clients die gewünschte URL nicht aufrufen kann, weil diese URL nicht mehr auf dem Server vorhanden ist. Vergleichbar ist der 404-Fehler beispielsweise mit der Anzeige „ausverkauft“ in einem Ladengeschäft oder einer alten Adresse von einem Schulfreund, der mittlerweile umgezogen ist.

URLs können aus ganz unterschiedlichen Gründen nicht mehr vom Server gefunden werden. Zum Beispiel wenn Du einen Domainumzug mit Deiner Webseite vorgenommen hast, URLs verschoben oder geändert wurden oder wenn URLs komplett gelöscht wurden. In der Regel sollten alte URLs per 301-Redirect auf eine neue Seite umgeleitet werden. Passiert das nicht, führt der Aufruf dieser URLs dann zu einer Fehlermeldung in Form eines Status Codes 404.

Tipp: Auch wenn Du mit einer guten 404-Seite viel retten kannst, solltest Du Deine Website regelmäßig auf 404-Fehlercodes prüfen. So kannst Du sicherstellen, dass alle wichtigen URLs Deiner Seite direkt erreichbar sind. Wie Du 404-Fehler finden und beheben kannst, haben wir vor kurzem in einem separaten Artikel im Ryte Magazine erklärt.

Was passiert, wenn ich keine 404-Seiten konfiguriere?

Wenn keine Errorpage erstellt wird, kann der Server im oben beschriebenen Fall auf eine nicht gefundene Ressource keine adäquate Antwort ausliefern.

Das ist in doppeltem Sinne nicht gut:

1. Nutzer wissen nicht, warum die aufgerufene URL nicht funktioniert und erleben eine negative Erfahrung mit Deiner Seite.

2. Der Googlebot möchte auf eine nicht vorhandene Ressource zurückgreifen, erhält aber nicht den korrekten Status Code 404 oder 410, dass diese URL nicht mehr verfügbar ist. In beiden Fällen wird Google ein negatives Signal gesendet. Umso wichtiger ist es deshalb, eine 404-Fehlerseite anzulegen.

Neben der individuellen Behebung von 404-Fehlern kann eine Alternative zur 404-Seite eine generelle 301-Weiterleitung auf die Startseite sein. Auch wenn diese Variante immer wieder gewählt wird, ist sie nicht unbedingt zu empfehlen. Denn sie kann mittelfristig zu sogenannten Soft 404-Fehlern führen.

Eine Art Zwischenlösung wählt zum Beispiel Spiegel.de. Die Webseite führt Besucher beim Abruf einer nicht verfügbaren URL zwar automatisch auf die Startseite, weist aber explizit auf die Umleitung hin.

Abbildung 1: Weiterleitung auf die Startseite bei Spiegel.de mit Fehlerhinweis

404-Fehlerseiten korrekt konfigurieren

Damit eine Fehlerseite angezeigt werden kann, reicht zunächst ein einfacher Eintrag in der .htaccess-Datei. Diese wird dabei um den folgenden Eintrag ergänzt.

ErrorDocument 404 /meine-404-Fehlerseite.html

Übersetzt bedeutet diese Zeile: Gibt es eine Serveranfrage für eine nicht mehr vorhandene URL (ErrorDocument 404), dann gib folgende Seite aus. Selbstverständlich solltest Du zuvor eine entsprechende Seite auf Deiner Domain anlegen. Je nach Art des CMS gibt es derartige Seiten meist schon als Standard.

In der schlichtesten Variante kann eine 404-Errorpage dann so aussehen:

Abbildung 2: Schlichteste Variante einer 404-Fehlerseite

So wird schnell deutlich, dass es nicht nur wichtig ist, überhaupt 404-Fehlerseiten anzeigen zu lassen, sondern diese auch ansprechend zu gestalten. Denn eine solche Fehlerseite wird dazu führen, dass Besucher sofort abspringen und entweder zurück zur Google-Suche gehen oder den Browser ganz schließen. Beide Varianten sind schlecht für Deine Website. Deshalb solltest Du am besten die folgenden Tipps für gute 404-Fehlerseiten beachten.

Eine individuelle 404 Errorpage gestalten

Wer möchte schon gerne in einer Sackgasse oder vor ausverkauften Regalen stehen? Das gleiche gilt für leere, langweilige 404-Seiten ohne Infos und ohne Ausweg. Was muss also auf eine gute 404-Seite?

Zunächst einmal solltest Du Deinen Besucher:innen auf der 404-Seite mitteilen, dass der gewünschte Inhalt nicht verfügbar ist. Um Absprünge zu vermeiden, solltest Du ihnen außerdem die weitere Navigation auf Deiner Website erleichtern.

Im Folgenden haben wir ein paar Tipps gesammelt, wie Du Deine Errorpage gestalten kannst, um trotz 404 für eine gute Website User Experience zu sorgen.

1. Verweis auf die Startseite

Die einfachste Variante, um Nutzer:innen trotz 404-Fehler auf Deiner Website zu behalten, ist der Verweis auf die Startseite.

Abbildung 3: Verweis auf die Startseite auf ryte.com

2. Verweis auf weitere Kategorien

Sinnvoll ist außerdem, Besucher:innen über mögliche Gründe für den Fehler aufzuklären und Optionen für die weitere Navigation auf der Website zu bieten. So macht es der Onlineshop Snipes, der neben der Startseite auch auf die verschiedenen Onlineshop Kategorien verweist.

Abbildung 4: Der Onlineshop Snipes klärt Besucher:innen über Gründe für den Fehler auf und verweist neben der Startseite auch auf die verschiedenen Onlineshop Kategorien.

3. Eine Suchfunktion anbieten

Wenn Besucher:innen auf einer 404-Seite landen, bedeutet das meistens, dass sie den gewünschten Inhalt nicht finden können. Mit einer internen Suche ermöglichst Du Deiner Zielgruppe, nach Themen zu suchen und so die passenden Inhalte auf Deiner Website zu finden.

Abbildung 5: WordPress.com bietet auf der 404-Seite eine Suchfunktion zur leichteren Navigation.

4. Weitere Möglichkeiten zur Interaktion anbieten

Auch die Verlinkung von Support-Hotlines, Kontaktdaten oder FAQs kann Deinen Besucher:innen weiterhelfen. Überlege Dir am besten immer, was nach dem Landen auf der 404-Fehlerseite der beste nächste Schritt für Deine Besucher:innen ist und ermögliche diesen von der Errorpage aus.

Abbildung 6: Coca-Cola verlinkt unter anderem Kontaktinformationen und FAQs auf der 404-Seite

Google zeigt übrigens bei seiner Errorpage nicht allzu viel Einfallsreichtum. Aber als Anbieter der weltweit größten Suchmaschine ist es naheliegend, welche Seite die Nutzer als nächstes aufrufen werden…

Abbildung 7: 404-Seite von Google

Beispiele: Kreative 404-Seiten als Branding Element

Neben der Hilfe bei der Website-Navigation sind 404-Seiten auch eine tolle Gelegenheit für Dein Branding. 404-Seiten können neben ihrem Informationsgehalt ruhig auch lustig, unterhaltsam und außergewöhnlich sein. Mit einer Prise Kreativität und einem kleinen Augenzwinkern wird aus einem ärgerlichen Fehler schnell ein Grund zum Schmunzeln.

Inspiration gefällig? Hier kommen unsere Top 5 der kreativsten und schönsten 404-Fehlerseiten:

1. lego.com

Abb. 8: 404-Seite auf lego.com

Lego zeigt seinen Besucher:innen auf der Fehlerseite den Weg zurück zum Onlineshop und lässt dank originellem Design nicht nur Kinderherzen höher schlagen.

2. disney.com

Abb. 9: 404-Seite auf disney.com

Auch Disney weiß natürlich, wie gutes Storytelling funktioniert. Beim Blick in Mikes missliches Monstergesicht kann wohl niemand lange böse sein.

3. chefkoch.de

Abb. 10: 404-Seite auf chefkoch.de

Die 404-Seite der Rezepte-Website Chefkoch überzeugt uns mit jeder Menge schmackhaften Wortspielen – ein echter Augenschmaus.

4. dribbble.com

Abb. 11: 404-Seite auf dribbble.com

Die Kreativ-Plattform Dribbble bietet Besucher:innen auf der 404-Seite sogar ein interaktives Erlebnis. Passend zum Thema der Website zeigt und verlinkt die 404-Seite beliebte Designs in frei wählbaren Farben.

5. zendesk.com

Abb. 12: 404-Seite auf zendesk.com

Zendesk wählt für die 404-Seite ein eher unspektakuläres Design, überzeugt aber mit außergewöhnlichem Text. Ein ungemütlicher Fehler wird dabei kurzerhand in eine tolle Errungenschaft verwandelt. Gratulation zu dieser kreativen Idee.

Fazit

404-Fehler gehören zu Websites, wie Tippfehler zu Texten oder ausverkaufte Produkte zu Geschäften. Neben der regelmäßigen Prüfung auf nicht erreichbare Seiten ist vor allem der richtige Umgang mit 404-Fehlern wichtig.

Dazu gehört, dass Du eine entsprechende Errorpage auf Deinem Server hinterlegst. Denn mit einer ansprechend gestalteten 404-Seite sorgst Du dafür, dass Besucher sich weiterhin schnell zurecht finden und Deine Website nicht fluchtartig verlassen, wenn sie eine gewünschte URL nicht gefunden haben.