404 Fehlerseite – die vielleicht wichtigste Seite deiner Website

Was passiert, wenn jemand eine Seite deiner Website aufruft, die es gar nicht gibt? Standardmäßig zeigt WordPress einen Fehler an: “Diese Seite konnte nicht gefunden werden” oder “Keine Ergebnisse gefunden.” Das ist für den Besucher frustrierend und damit für deinen Umsatz schädlich. Richte daher umbedingt eine sogenannte 404-Fehlerseite ein. Wie das geht, das zeige ich dir jetzt.

Inhalt

Was ist eine 404-Fehlerseite

Ein 404-Fehler tritt auf, wenn dein Webserver eine Seite oder ein Bild nicht finden konnten. In der Regel wird dann eine Fehlerseite angezeigt – die 404-Fehlerseite.

Diese Seite wird für alle nicht gefundenen Seiten oder Bilder auf dem Server verwendet und sollte den Benutzer darüber informieren, dass die Seite nicht gefunden wurde und Vorschläge liefern um das Problem zu lösen.

Immerhin ist der Besucher ja aus einem bestimmten Grund auf dieser Seite gelandet, also sollten wir weiterhelfen.

Wie entsteht ein 404-Fehler?

Ein 404-Fehler entsteht zum Beispiel durch

  • einen fehlerhaften Link auf deiner Website. Du hast dich schlicht vertippt.
  • weil die Seite oder Datei am Server umbenannt oder gelöscht wurde und die alte URL nicht auf die neue URL umleitet.
  • weil sich der Besucher deiner Website vertippt hat.
  • weil du einen Blog-Beitrag oder eine Seite in WordPress umbenannt hast und sich der Slug bzw. Permalink geändert hat.

Ein 404-Fehler weist auf eine technisch gültige URL hin, die schlicht nicht gefunden wurde. Im Unterschied dazu weist ein Fehler 500 darauf hin, dass am Server etwas falsch konfiguriert wurde.

Warum solltest du eine eigene 404-Seite erstellen?

Du könntest jetzt einfach alle nicht gefundenen Seiten auf die Startseite umleiten. Doch dadurch verwirrst du die Besucher (und Google!) und verschenkst wertvolles Potential.

Eine eigene 404-Fehlerseite hat nämlich folgende Vorteile:

  1. Branding: Eine eigene 404-Seite ermöglicht es dir deine Marke auf eine benutzerfreundliche Weise zu präsentieren.
  2. Benutzerfreundlichkeit: Eine benutzerfreundliche 404-Seite kann dem Benutzer helfen, sich auf deine Website zurechtzufinden und ihm eventuell sogar Vorschläge geben, wo er weiter suchen kann. Mehr dazu weiter unten.
  3. Suchmaschinenoptimierung: Eine gut gestaltete 404-Seite kann dazu beitragen, dass deine Website besser von Suchmaschinen indexiert wird, weil sie sich “korrekt” verhält.
  4. Analytics: Eigene 404 Seite ermöglicht es dir zu sehen, wo es auf deiner Website zu Problemen kommt um gegenzusteuern. Du findest Broken Links oder kannst Weiterleitungen anlegen. Das Plugin Rank Math bietet einen 404-Monitor.
  5. Professionalität: Eine professionelle 404-Seite kann dazu beitragen, dass deine Website seriöser und vertrauenswürdiger wirkt. Wenn dein Besucher auf eine 404-Seite gestoßen ist, die gut gestaltet ist und ihm hilft, weiterzukommen, wird er weniger geneigt sein, dein Website zu verlassen und zu einer anderen zu wechseln.

Du siehst also – eine gut gestaltete 404-Fehlerseite ist wichtig.

Angebote schreiben in 10 Minuten - mit der ultimativen Angebotsvorlage für Web-Designer, Webprogrammierer und Online-Marketer

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Web-Designer, Web-Programmierer und Online-Marketer.

7 Tricks, wie andere Web-Professionals arbeiten und wirklich Geld verdienen

Das eBook für Web-Designer, Grafiker und Online-Marketer.

Hast du es satt, im Internet stundenlang nach Lösungen zu suchen?

Welche Elemente sollte eine 404 Fehlerseite enthalten?

Eine gut gestaltete 404-Fehlerseite sollte folgende wichtige Elemente enthalten:

  • Eine klare und eindeutige Fehlermeldung: teile dem Besucher mit, was gerade passiert ist und dass sie Seite nicht gefunden wurde. Erkläre auch, dass es sich um einen Fehler handelt und nicht um ein temporäres Problem, wie z.B. Wartung.
  • Eine Navigation: ermögliche dem Besucher, auf andere Bereiche deiner Website zu wechseln. Am einfachsten enthält deine 404-Fehlerseite den Standard-Header und Standard-Footer deiner Website.
  • Suche: Eine Suchfunktion ermöglicht es dem Besucher, nach der gewünschten Seite oder Informationen auf Ihrer Website zu suchen.
  • Kontaktinformationen: Gib dem Besucher die Möglichkeit, dich zu kontaktieren, falls er Hilfe benötigt.
  • Grafiken/Design : Gestalte die 404-Fehlerseite im Design deiner Website.
  • HTTP-Statuscode 404 : Stelle sicher, dass Fehlerseiten auch wirklich mit dem HTTP-Statuscode 404 ausgeliefert werden, um dem Benutzer und vor allem Suchmaschinen klar zu signalisieren, dass es sich um eine Fehlerseite handelt.
  • Eine humorvolle Note: Nutze die 404-Fehlerseite um den Besucher zum Schmunzeln zu bringen und so die Frustration zu lindern. Beispiele für gut gestaltete 404-Fehlerseiten findest du weiter unten.

Achte darauf, dass die 404-Seite auf jeden Fall benutzerfreundlich und hilfreich ist. Es sollten so viele nützliche Informationen wie möglich bereitgestellt werden, um dem Benutzer auf der Website zu halten.

Wie erstelle ich eine 404 Fehlerseite in WordPress?

So erstellst du eine 404 Fehlerseite mit Elementor Pro

Mit Elementor* erstellst du eine 404-Seite, indem du unter Templates > Theme Builder den Button “Add new” drückst und “Error 404” auswählst. (Leider sind die Begriffe hier noch nicht übersetzt).

404-Fehler-Seite mit Elementor Pro
404-Fehler-Seite mit Elementor Pro

Anschließend kannst du aus verschiedenen vorgefertigte Templates wählen oder die Fehlerseite im Design deiner Website gestalten.

Wähle eine 404-Design aus der Elementor Bibliothek
Wähle eine 404-Design aus der Elementor Bibliothek

Beim Veröffentlichen des Templates fragt ich Elementor, wo das Template angezeigt werden soll. Hier ist schon korrekt “404 Seite” ausgewählt.

Wo soll das Template angezeigt werden?
Wo soll das Template angezeigt werden?

Die mit Elementor erstellte 404-Fehlerseite wird damit korrekt angezeigt.

So erstellst du eine 404 Fehlerseite mit Divi

In Divi* erstellst du eine 404-Fehlerseite, indem du unter Divi > Theme Builder eine neue Vorlage hinzufügst.

Füge eine neue Vorlage im Divi Theme Builder hinzu
Füge eine neue Vorlage im Divi Theme Builder hinzu

Wähle “Neue Vorlage erstellen” und wähle anschließend ganz unten in den Vorlageneinstellungen “404 Seite” aus.

Divi Vorlageneinstellungen für eine 404 Seite
Divi Vorlageneinstellungen für eine 404 Seite

Anschließend kannst du wie bei jeder anderen Divi-Vorlage den Header, Footer und vor allem den “Körper” (doofe Übersetzung, ich weiß) gestalten.

Divi Vorlage für eine 404 Seite
Divi Vorlage für eine 404 Seite

Gestalte die Seite ansprechend und im Designstil deiner bestehenden Website.

So erstellst du eine Fehlerseite mit jedem WordPress Theme

Um bei anderen Themes eine 404-Fehlerseite anzuzeigen empfehle ich dir das Plugin “Smart Custom 404 error page” von Peter Raschendorfer.

Installiere und aktiviere das WordPress-Plugin.

Erstelle anschließend eine beliebige neue Seite in WordPress, die du als 404-Fehlerseite verwenden willst.

Anschließend kannst du unter Design > 404 Error Page diese Seite auswählen. Sie wird ab jetzt als 404-Fehlerseite angezeigt.

Eine beliebige Seite als Fehlerseite mit 404page
Eine beliebige Seite als Fehlerseite mit 404page

Beispiele für gute (und lustige) 404 Fehlerseiten

Wie oben schon erwähnt kannst du die 404-Fehlerseite auch dazu nutzen, den Kunden zu unterhalten und so den Frust, der durch den Fehler auftritt, etwas zu lindern.

Hier ein paar Beispiele für gut gemachte, lustige Fehlerseiten:

Cornelia dal Sasso

Moviepilot

Github

AirBnB

Mit lustiger Animation!

Redaxo CMS

Deine 404 Fehlerseite?

Hast du eine lustige, coole, perfekte Fehlerseite erstellt? Dann schick sie mir, ich nehme sie gerne hier auf.

Weitere Fragen zur 404-Fehlerseite

Was passiert, wenn ich bei meiner Domain keine 404 Fehlerseite konfiguriert habe?

Wenn du keine benutzerdefinierte 404-Fehlerseite auf deiner Website konfiguriert hast, wird standardmäßig eine generische 404-Fehlerseite angezeigt, die vom Server geliefert wird.

In vielen Fällen wird diese generische Seite lediglich eine Fehlermeldung enthalten, die dem Benutzer mitteilt, dass die gewünschte Seite nicht gefunden wurde. Diese generischen 404-Fehlerseiten können unattraktiv und wenig hilfreich sein, und es besteht die Gefahr, dass Benutzer die Website verlassen, anstatt weiter zu suchen.

Ein weiteres Problem kann darin bestehen, dass Suchmaschinen deine Website nicht korrekt indexieren und einige Seiten nicht in den Suchergebnissen angezeigt werden, wenn der Benutzer eine nicht vorhandene Seite aufruft.

Was ist der HTTP-Statuscode 404?

Der HTTP-Statuscode 404 ist ein HTTP-Statuscode, der vom Web-Server verwendet wird, um anzuzeigen, dass die angeforderte Ressource (normalerweise eine Webseite oder eine Datei) nicht gefunden wurde. Es ist ein sogenannter “Client-Side”-Fehler, was bedeutet, dass der Fehler auf der Seite des Benutzers liegt und kein Serverfehler vorliegt.

Wenn ein Benutzer eine URL eingibt, die auf eine nicht vorhandene Seite verweist, sendet der Browser eine Anfrage an den Server, der die entsprechende Webseite hostet. Der Server prüft die URL und, falls die Ressource nicht gefunden wird, sendet er den HTTP-Statuscode 404 zurück.

Es gibt auch andere ähnliche HTTP-Statuscodes, die zu finden sind wie z.B. 403 (Forbidden), 401 (Unauthorized) und 410 (Gone). Jeder HTTP Statuscode gibt an, ob eine Anforderung erfolgreich war oder nicht.

Wie kann ich den Fehler 404 beheben?

Ein Fehler 404 kann auf verschiedene Arten behoben werden, abhängig davon, was die Ursache des Fehlers ist:

  • Ändere die URL: Wenn der Fehler auf eine falsch eingegebene URL zurückzuführen ist, stelle sicher, dass die URL korrekt eingegeben wurde. Prüfen, ob die URL richtig geschrieben ist und ob sie mit der tatsächlichen URL der gewünschten Seite übereinstimmt.
  • Erstellen eine Weiterleitung: Wenn eine Seite oder eine Datei auf deiner Website gelöscht wurde, kannst du eine Weiterleitung erstellen, um Benutzer automatisch auf eine alternative Seite weiterzuleiten. 
  • Überprüfen Sie die .htaccess-Datei: Wenn du das Gefühl hast, dass das Problem auf einen Fehler in der .htaccess-Datei zurückzuführen ist, überprüfe die Datei auf mögliche Fehler. Stellen sicher, dass alle Weiterleitungen und Umleitungen korrekt konfiguriert sind und dass es keine Syntaxfehler gibt.

Erstellen eine eigene 404-Fehlerseite : Eine benutzerdefinierte 404-Fehlerseite kann dazu beitragen, dass Benutzer auf deiner Website bleiben und dass deine Website besser von Suchmaschinen indexiert wird.

Was muss auf einer 404-Fehlerseite stehen?

Eine gut gestaltete 404-Fehlerseite sollte einige wichtige Elemente enthalten, um Benutzern eine gute Benutzererfahrung zu bieten:

  • Eine klare und eindeutige Fehlermeldung: Eine klare Fehlermeldung, die dem Benutzer mitteilt, dass die gewünschte Seite nicht gefunden wurde, ist unerlässlich.
  • Eine Navigation: Eine Navigation, die dem Benutzer ermöglicht, auf andere Bereiche deiner Website zugreifen zu können, ist wichtig. Dies kann entweder eine Hauptnavigation sein oder eine Liste von Links zu den am häufigsten besuchten Seiten deiner Website.
  • Suche: Eine Suchfunktion ermöglicht es dem Benutzer, nach der gewünschten Seite oder Informationen auf deiner Website zu suchen.
  • Kontaktinformationen: Bereitstellen von Kontaktinformationen, wie z.B. Emailadresse, Telefonnummer und ein Kontaktformular, damit Benutzer dir mitteilen können, falls sie Hilfe benötigen.

Es ist wichtig, dass die 404-Seite benutzerfreundlich und hilfreich ist.

Welche Arten von Fehlerseiten gibt es?

Es gibt verschiedene Arten von HTTP-Statuscodes, die vom Web-Server verwendet werden, um den Erfolg oder Misserfolg einer Anfrage anzuzeigen. Einige der häufigsten Fehlerseiten sind:

  • 401 Unauthorized: Dieser Fehler tritt auf, wenn der Benutzer nicht berechtigt ist, auf die angeforderte Ressource zuzugreifen.
  • 403 Forbidden: Dieser Fehler tritt auf, wenn der Benutzer zwar berechtigt ist, auf die Ressource zuzugreifen, aber der Zugriff verweigert wird, z.B. durch serverseitige Zugriffskontrollen.
  • 404 Not Found: Dieser Fehler tritt auf, wenn die angeforderte Ressource nicht gefunden wurde.
  • 500 Internal Server Error: Dieser Fehler tritt auf, wenn ein unerwarteter Fehler auf dem Server aufgetreten ist, der verhindert, dass die Anfrage erfolgreich abgeschlossen werden kann.
  • 503 Service Unavailable: Dieser Fehler tritt auf, wenn der Server momentan nicht in der Lage ist, die Anfrage zu bearbeiten, z.B. wegen Wartungsarbeiten oder hoher Auslastung.
  • 504 Gateway Timeout: Dieser Fehler tritt auf, wenn ein Zwischenserver, der zur Verarbeitung der Anfrage verwendet wird, nicht innerhalb des erwarteten Zeitrahmens eine Antwort liefert.

Jeder HTTP-Statuscode gibt den Erfolg oder Misserfolg einer Anfrage an und unterstützt dem Benutzer sowie dem Entwickler, die notwendige Fehlerbehebung durchzuführen und die Probleme zu diagnostizieren.



Dieser Blog-Beitrag wurde teilweise mit Hilfe von ChatGPT erstellt.

Schreibe einen Kommentar

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

Projektanfrage

Wobei kann ich dich unterstützen?
Angebote schreiben in 10 Minuten - mit der ultimativen Angebotsvorlage für Web-Designer, Webprogrammierer und Online-Marketer

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Web-Designer, Web-Programmierer und Online-Marketer.