smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress: Individuelle 404-Fehlerseite erstellen

8. April 2013
Stephan
WordPress: Individuelle 404-Seite erstellen

Fehler können immer mal passieren, aber nichts ist schlimmer als den Besuchern eures Blogs Fehlerseiten der Art „Error 404: file not found“ zu präsentieren. Eine nichtssagende Fehlerseite hinterlässt keinen guten Eindruck und führt nicht selten dazu, dass die Besucher den Blog direkt wieder verlassen.

Viel besser wäre es doch, wenn die Fehlerseite benutzerfreundlich ist und hilft den Besuchern das zu finden, wonach sie eigentlich gesucht haben.

In diesem Artikel zeige ich euch, wie ihr für euren WordPress-Blog eine individuelle 404-Fehlerseite erstellen könnt.

Was ist eine 404-Fehlerseite?

Vereinfacht gesagt, wird eine 404-Fehlerseite immer dann angezeigt, wenn eine angefragte Seite auf dem Webserver nicht existiert bzw. nicht gefunden werden konnte. Zu den möglichen Gründen zählen gelöschte Seiten, falsch eingegebene URLs oder tote Links.

Was zeichnet eine nützliche 404-Fehlerseite aus?

Wie bereits einleitend erwähnt, zeichnet sich eine nützliche/benutzerfreundluche 404-Fehlerseite vor allem dadurch aus, dass den Besuchern geholfen wird, dass zu finden, wonach sie eigentlich gesucht haben.

Weitere Tipps für eine benutzerfreundliche 404-Fehlerseite:

  • teilt dem Besucher mit, dass die angefragte Seite nicht existiert
  • verwendet das gleiche (ansprechende) Design, wie auf allen anderen Seiten in eurem Blog (Stichwort: „Look & Feel“)
  • bietet auch auf der 404-Fehlerseite eine Navigation an
  • Möglichkeit anbieten, den toten Link zu melden
  • eine Liste mit den letzten oder meistgelesenen Artikeln anzeigen
  • auf das Suche in eurem Blog hinweisen bzw. prominent auf der 404-Fehlerseite platzieren

Das eine 404-Fehlerseite gar nicht so unwichtig ist, zeigt auch der Fakt, dass selbst Google explizit Tipps zur Erstellung gibt: Creating useful 404 pages

404-Fehlerseite in WordPress ertellen

Im Fall von WordPress ist die Erstellung einer 404-Fehlerseite recht einfach. Dazu legt einfach eine Datei mit dem Namen 404.php in eurem Theme-Verzeichnis an. Diese Datei wird nun immer von WordPress aufgerufen und angezeigt, wenn eine Besucher eine Seite anfragt die nicht gefunden werden konnte.

Hier in meinem Blog sieht der Code z.B. wie folgt für die 404.php aus:

<? get_header(); ?>
<section>
	<article>
		<h2>Seite wurde nicht gefunden</h2>
		<div class="text">
			<p>Leider wurde die von Dir angefragte Seite nicht gefunden. Entweder hast Du die falsche Seite aufgerufen
			oder die angefragte Seite existiert nicht mehr.</p>
			<p>Versuche es doch einfach mal mit der Suche, die sich oben rechts befindet.</p>
			<p>Ansonsten geht es hier zurück zur Startseite:
			<a href="/" title="Smart-Webentwicklung - Startseite">Smart-Webentwicklung</a></p>
		</div>
	</article>
</section>
<? get_sidebar(); ?>
<? get_footer(); ?>

Zugeben, meine 404-Fehlerseite Bedarf auch unbedingt mal einer Überarbeitung.

404-Fehlerseite in WordPress anpassen

Eine Möglichkeit eure 404-Fehelrseite anzuapssen, wäre z.B. die prominente Platzierung eines Suchfelds. Damit können die Besucher direkt eingeben, wonach sie suchen. Dazu könnt ihr das Suchformular von WordPress mittels get_search_form einbinden.

In meinem Fall könnte das z.B. so aussehen:

<? get_header(); ?>
<section>
	<article>
		<h2>Seite wurde nicht gefunden</h2>
		<div class="text">
			<p>Vielleichst findest du über die Suche, dass was du suchst:</p>
			<p><? get_search_form(); ?></p>
		</div>
	</article>
</section>
<? get_sidebar(); ?>
<? get_footer(); ?>

In dem Artikel Practical Guide to creating a 404 Error Page for WordPress von Yoast wird erklärt, wie basierend auf der angefragten URL dem Besucher direkt Suchegebnisse präsentiert werden können.

Ebenso wäre es z.B.möglich zusätzlich zur Suchmöglichkeit die 3 zuletzt veröffentlichten Artikel aufzulisten:

<? get_header(); ?>
<section>
	<article>
		<h2>Seite wurde nicht gefunden</h2>
		<div class="text">
			<p>Vielleichst findest du über die Suche, dass was du suchst:</p>
			<p><? get_search_form(); ?></p>

			<p><? get_latest_posts(3); ?></p>
		</div>
	</article>
</section>
<? get_sidebar(); ?>
<? get_footer(); ?>

Eine Erklärung wie ihr das ohne Plugin anstellen könnt, findet ihr in dem Artikel „Letzte Kommentare in WordPress anzeigen“.

Fazit

In WordPress kann relativ schnell und einfach eine individuelle 404-Fehlerseite erstellt werden. Ich rate euch die 5-Minuten zu Erstellung einer solchen Seite ruhig zu investieren, denn viele eurer Besucher werden es bestimmt dankend zur Kenntnis nehmen.

Verwendet ihr bereits eine individuelle 404-Fehlerseite in eurem Blog? Habt ihr weitere Tipps für eine nützliche 404-Fehlerseite?

Kommentare  
5 Kommentare vorhanden
1 Sylvi schrieb am 8. April 2013 um 18:09 Uhr

Hallo Stephan,

nachdem ich damals meine Permalinkstruktur geändert hatte, sind trotz Umleitung immer noch sehr viele Besucher über eine falsche Url auf meinem Blog gelandet.

Daraufhin habe ich auf meine 404er-Fehlerseite auf die Permalinkänderung hingewiesen und anhand von zwei Beispiel-Urls erklärt, wie die alte aussah und nun die neue Url nun lauten muss.

Ich habe keine Ahnung, ob es den Besuchern geholfen oder gefallen hat, aber mit zusätzlicher Suchen-Funktion fand ich die Fehlerseite nicht mehr ganz so „nackt“. 🙂

Gruß Sylvi

2 Stephan L. schrieb am 9. April 2013 um 12:59 Uhr

Hi Sylvi,

habe ich mir doch glatt mal deine 404-Fehlerseite angeschaut. Im Prinzip hast du ja bereits schon alle wichtigen Tipps & Hinweise, die ich in diesem Artikel angemerkt habe, erfolgreich umgesetzt. 😉

Da habe ich selbst hier im Blog noch Nachholbedarf.

Gruß

Stephan

3 Markus Baldauf schrieb am 11. April 2013 um 21:12 Uhr

Danke für den guten Artikel.
Ich finde die Erklärungen sehr gut!

Markus Baldauf

4 thore schrieb am 23. April 2013 um 20:11 Uhr

Für 404-Seiten gibt extrem gute Beispiele. Auf die hätte hier auch noch verwiesen werden können. Man kann aber auch einen eigenen Artikel darüberschreiben. Genug Beispiele gibt es dazu ja.

5 Heiko K. schrieb am 5. November 2013 um 21:08 Uhr

Besten Dank für die Tipps.
Die Fehlerseite ist installiert und funktioniert.
Hoffentlich wird sie nicht so oft gebraucht…

Grüße aus der Bachstadt Köthen

2 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!