Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » E-Business » 404: So baust du die optimale Fehlerseite (mit und ohne WordPress)

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

Artikel weiterempfehlen

  • Aktualisiert am 24. März 2023
  • 13 Kommentare
  • Markus Seyfferth von Markus Seyfferth
Lesedauer: 8 Minuten

Inhaltsverzeichnis

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.

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.

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

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

Bit.ly

https://bitly.com/a/404 404 Seite

Pixar

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

CSS-Tricks

404 Seite

Blizzard

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

Starbucks

404 Starbucks

Walk With You

404

Funilo

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

Dailymotion

404

The Useless Web Index

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

Wufoo

404

Duoh.com

404

Steve Lambert

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

Dan Woodger

404

Hot Dog Production

404

Airbnb

404

Lego

404

Github

404

CSS Ninjas

404

Limpfish

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

MailChimp

404

Audiko

404

Bret Victor

404

Figma.com

404

Spotify

404

Good Old Games

404

Cooklet

404

Moveline

404

Cloud Sigma

404

Grant Burke

404

Hoppermagic

404

Tripomatic

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

Urban Influence

Urban Influence - Error 404
Video als Hintergrund.

Barrel

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

This by Them

This by Them - Error 404
Eine animierte Mischung aus David Bowie-Referenz und dem Film Gravity.

 

Hub

Hub - Error 404
Mit vollflächigem Hintergrundvideo.

 

Martin Wright

Martin Wright - Error 404
Einfallsreich und einfach niedlich.

Tiny Carrier

Tiny Carrier - Error 404

Fork CMS

Fork CMS - Error 404

Jackrabbit Design

Jackrabbit Design - Error 404

Signum

Signum - Error 404

Storio Digital

Storio Digital - Error 404

Spry Group

Spry Group - Error 404
Mit vollflächigem Hintergrundvideo.

Brand Crowd

Brand Crowd - Error 404

Romain Brasier

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

Cool Apps

Cool Apps - Error 404

Herrlich Media

Herrlich Media - Error 404

Constellation & Co

Constellation & Co. - Error 404

Use Panda

Use Panda - Error 404

EyeEm

EyeEm - Error 404

Mein wahres Ich

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

Magnt

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

(Beitragsbild: Depositphotos)

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

  • Michael Dobler Michael Dobler
  • 14. Februar 2023
Reaktion auf Siegeszug ChatGPT

Google empfiehlt Websitebetreibern einen AI-Content Disclaimer

Bringen ChatGPT und Microsoft den Suchmaschinengiganten zu Fall? Keep cool. Google reagiert nun im Stile einer Verwaltungsbehörde.
  • Content Marketing, SEO
  • Michael Dobler Michael Dobler
  • 31. Januar 2023
Die Königsdisziplin für gute Suchmaschinen-Rankings

Darum ist SEO für den Erfolg Ihrer Website so wichtig

Suchmaschinen sind Big Business. Google, bzw. die Alphabet Inc., verdient damit jährlich Milliarden. Warum ist das so? Weil der Google Suchschlitz der Ausgangspunkt von Abermillionen Kaufentscheidungen ist. Ein Teil dieser Kaufentscheidungen betrifft auch Ihr Unternehmen. Und deshalb sollten Sie sich unbedingt mit diesem geheimnisumwitternden Thema SEO näher beschäftigen.
  • SEO
  • Markus Seyfferth Markus Seyfferth
  • 30. Januar 2023
Backlinks = wichtiger Rankingfaktor

So setzen Sie Backlinks für Ihre Website erfolgreich zur Kundengewinnung ein

Was sind Backlinks? Der Begriff Backlink stammt aus dem Englischen und bedeutet übersetzt „Rückverweis“. Ein solcher „Rückverweis“ wird erstellt, indem ein Link einer Webseite auf eine andere Webseite führt.
  • SEO
  • Michael Dobler Michael Dobler
  • 30. Januar 2023
Ist in der Nische noch Platz für Sie?

SEO: Long Tail Keywords – mehr Sichtbarkeit in Google für Ihr Unternehmen

Für den wirtschaftlichen Erfolg Ihrer Website ist eine hohe Sichtbarkeit in den Suchmaschinen, allen voran auf Google, der Erfolgsfaktor Nummer Eins. Was nützt Ihnen das beste Angebot, wenn die Kunden es nicht finden? Richtig. Gar nichts.
  • SEO
  • Michael Dobler Michael Dobler
  • 26. Januar 2023
Auf die richtigen Worte kommt es an

SEO Keyword Recherche: so finden Sie die richtigen Keywords für Ihre Website

Lage, Lage, Lage – das sind im Maklersprech die drei wichtigsten Faktoren bei der Bewertung einer Immobilie. Was für Grund und Boden gilt, ist auch für die Website Ihres Unternehmens nicht falsch: Mit der einer guten Positionierung in den Google-Suchergebnissen erhöht sich die Reichweite Ihrer Homepage enorm. Doch um sich einen guten Platz unter den Mitbewerbern zu sichern, müssen Sie die Spielregeln der Suchmaschinenoptimierung (SEO) kennen und beherzigen.
  • SEO
  • Michael Dobler Michael Dobler
  • 19. Januar 2023
Am Anfang war das...

SEO Audit: ein wichtiger Startpunkt für die SEO Ihrer Website

SEO Audit? Bei diesem Begriff kriegt man gleich ein unangenehmes Kribbeln im Bauch. Das klingt nach, Achtung, der Steuerbeamte ist im Haus und prüft die Bücher. Mit internationalem Rechnungswesen hat ein SEO Audit nichts zu tun. Ich führe Sie ein in die spannende Welt der Suchmaschinenoptimierung (SEO) für Ihre Website.
  • SEO

13 Antworten

  1. Andreas sagt:
    23. Juli 2018 um 22:51 Uhr

    Danke für die guten Ideen! Eine Sitemap habe ich eigentlich immer auf meinen Seiten, aber auf die Idee bin ich noch nicht gekommen, sie auf der 404 Seite zu verlinken! Auf die einfachsten Dinge kommt man manchmal nicht. (-;

    Antworten
  2. kai sagt:
    19. Juli 2018 um 15:59 Uhr

    danke für den interessanten artikel! was spricht denn eigentlich dagegen im 404 fall automatisch auf die startseite des webauftritts umzuleiten? bei kleinen übersichtlichen webauftritten ist das doch vielleicht sogar besser?

    Antworten
    1. Dieter Petereit sagt:
      19. Juli 2018 um 16:05 Uhr

      Bei wirklich sehr kleinen Auftritten mit einer Handvoll Seiten wäre eine 404 vielleicht überdimensioniert und eine Weiterleitung auf die Homepage käme in Frage. In allen anderen Fällen solltest du beachten, dass der Besucher mit einer Erwartung kommt. Die wird durch die Homepage garantiert nicht erfüllt, sonst hätte er ja keinen konkreten Link geklickt. Kommt er nun auf der Homepage an, wird er sich fragen, was denn hier schief gelaufen ist und möglicherweise die Seite direkt wieder verlassen. Besser du holst ihn da ab, wo er steht.

  3. Telco sagt:
    23. November 2015 um 14:11 Uhr

    Sehr interessanter Artikel. Grüße!

    Antworten
  4. Ulli sagt:
    19. August 2015 um 10:28 Uhr

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

    Antworten
  5. Uwe sagt:
    5. November 2013 um 14:24 Uhr

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

    Antworten
  6. Sebastian sagt:
    20. Juni 2013 um 10:07 Uhr

    Ihr habt eine der schönsten 404 Seiten vergessen 🙂

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

    Antworten
  7. Spielehorst.de sagt:
    20. Juni 2010 um 17:55 Uhr

    I like those ones with homer 😀

    Antworten
  8. domingos sagt:
    16. März 2009 um 15:49 Uhr

    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.

    Antworten
  9. Blog Drauf sagt:
    13. März 2009 um 12:31 Uhr

    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. 🙂

    Antworten
  10. Sascha Reinhardt sagt:
    12. März 2009 um 16:49 Uhr

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

    Antworten
  11. Nico sagt:
    12. März 2009 um 16:46 Uhr

    Schick, Schick warum ist den meine nicht dabei ? 😀

    Antworten
  12. Pirate sagt:
    12. März 2009 um 13:24 Uhr

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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑