Es kommt immer wieder vor, dass ein Besucher deiner Webseite auf einen kaputten Link deiner Seite geleitet wird. Passiert dies, erscheint automatisch die 404-Fehlerseite. Um deine Webseiten-Besucher trotz des kaputten Links bei Laune zu halten, kannst du die lustige 404 Fehlerseiten-Illustration auf deiner 404-Seite einbinden.

1. Das 404 Monster-Klassenzimmer

404 Error Page Freebie Illustration
Mit dieser lustigen Monster-Illustration kannst du deine Besucher bei Laune halten :-)

1. Die Skizzen-Vorlage

404 Error Page Freebie Illustration
Mit dieser schnellen Skizze habe ich die Idee für die 404-Schulklasse entwickelt.

404 Fehlerseiten-Illustration downloaden

Du kannst dir die Illustration als transparentes PNG für deine eigene Webseite herunterladen. Ich habe 3 verschiedene Größen in den ZIP-Ordner vorbereitet (850px, 600px und 450px breit). So hast du genug Optionen, die Illustration in der passenden Größe auf auf deiner 404-Seite einzubinden.

Download: Bild deutschsprachig

Download: Bild englischsprachig

2. Nützliche Tipps für die 404-Fehlerseit

Neben einer Illustration auf der 404-Fehlerseite, kannst du deinen Lesern weitere Tipps geben, wie sie auf die passende Info auf deiner Seite finden können. Hier einige Inspirationen:

  1. Informiere deine Besucher, in einem kurzen Text, warum es zu einem kaputten Link kommen kann.
  2. Integriere eine Such-Funktion.
  3. Behalte das Layout deiner Seite bei (Header, Navi, Sidebar etc.), so dass der Besucher sich wie gewohnt weiter navigieren kann.
  4. Biete einen Link zum Kontaktformular an, falls ein Besucher dich direkt kontaktieren möchte.
  5. Integriere einen Link zur Startseite oder zum Archiv deiner Webseite.
  6. Biete deinem Besucher alternativen Lesestoff, indem du z.B. eine Auflistung der neusten Blog-Artikel einbindest.
  7. Achte jedoch darauf, dass deine 404-Fehlerseite nicht zu viele Links und Infos enthält, und dadurch unübersichtlich wirkt.
  8. Bring deine Besucher mit Humor zum schmunzeln, so dass sie nicht zu enttäuscht oder verärgert über den kaputten Link sind.

3. Die 404-Fehlerseite in WordPress

In den meisten Fällen enthält ein WordPress-Theme eine 404.php Datei. In dieser Theme-Datei kannst du deine 404-Seite anpassen. Um die Freebie-Illustration auf der 404-Seite zu integrieren, kannst du z.B. folgenden Code innerhalb des Content-DIVs einfügen.

[php]
<div class=”error-404″>
<img src=”IMAGE URL” alt=”404 Error” width=”850″ height=”700″ />
</div>
<!–error page illustration–>
[/php]

Eine weitere hilfreiche Option (falls nicht bereits in deinem Theme integriert) ist es, die Suche zu integrieren. Dazu kannst du folgenden Code in die 404.php Datei einfügen:

[php]
<p>Schau doch einmal in der Suche, ob du die passende Information finden kannst.</p>
<?php get_search_form(); ?>
[/php]

Eine ausführliche Dokumentation zur Erstellung und Anpassung der 404-Fehlerseite in WordPress findest du im WordPress Codex.

4. Jede Menge kreative 404-Inspirationen

Es gibt zahlreiche Blogs und Webseiten, die sich mit der individuellen Gestaltung ihrer 404 Error Page sehr viel Mühe gegeben haben. Dort findest du tolle Inspirationen für deine eigene 404-Fehlerseite. Außerdem kannst du dir anschauen, welche Informationen und Links diese Webseiten ihren Besuchern im Falle eines kaputten Links geben.

Über 50 schöne Beispiele findest du z.B. im Artikel »54 Cool Examples of Custom Error Pages« von Dzine-Blog.

Ebenfalls kreative Beispiele bietet der Artikel »Beautiful and Useful 404 Error Pages for Inspiration« bei Six Revisions.

Ich hoffe, dir gefällt die 404 Monster-Illustration, und du findest die Tipps und Tricks zum Thema 404-Fehlerseiten ebenfalls hilfreich. Über dein Feedback und weitere Tipps freue ich mich sehr!