In 3 Schritten zur sinnvollen 404 Page

Hannah
In 3 Schritten zur sinnvollen 404 Page: So erstellst du eine sinnvolle 404 Seite für deinen Blog | provinzkindchen.com

Happy Friyay ♥ endlich wieder Wochenende und Zeit für COFFEE & BLOG, denn ich zeige euch wie ihr in In 3 Schritten zur sinnvollen 404 Page für euren Blog kommt. Am Besten ihr schnappt euch eine Tasse Tee oder Kaffee, denn ich hab einen schönen und vor allem langen Post für euch vorbereitet. Nadines Post vom letztem Freitag, in dem sie euch erzählt wie man einen Blog „rebranden“ kann, findet ihr natürlich auf ihrem Blog.

Letztens hab ich durch Zufall auf Pinterest etwas ziemlich Cooles entdeckt, das ich heute gerne mit euch teilen möchte. Zum Glück bietet mir COFFEE & BLOG dafür die beste Gelegenheit, yay!Ich zeige euch heute, wie man aus seiner 404 Page mehr macht, als nur eine Sackgasse ;) Den originalen Post zum Thema How to Make the Most of Your 404 Page hab ich bei Nadine von Blogbrighter gefunden, nach deren Tutorial ich zum Teil auch gearbeitet habe und das mir wirklich sehr geholfen hat. Da ich für mich ein paar Dinge optimiert habe und auch erst mal eine individuelle 404 Page erstellen musste, hab ich mich aber dazu entschieden eine neue, erweiterte Anleitung für euch zu schreiben. Ich bin schon gespannt, was ihr zu dieser meiner Meinung nach wirklich genialen Idee sagt – ich finde sie einfach super und frage mich, wieso ich nicht schon früher darauf gekommen bin ;)

In 3 Schritten zur sinnvollen 404 Page

Schritt 1: 404 Seite erstellen

Einige von euch haben vielleicht bei ihrem Theme schon eine 404 Seite dabei, die man einfach anpassen kann. Bei mir war das nicht der Fall, und deshalb musste ich nach einer Alternative suchen. Für Wordpress gibt es zum Glück zahlreiche tolle Plugins, und natürlich gibt es auch eines für die 404 Error Page. Verwendet habe ich das Plugin Custom 404 Pro, das einfach installiert und im Anschluss natürlich aktiviert wird. Und so geht’s:

  • Erstellt in Wordpress eine neue Seite erstellen. Den Namen dafür könnt ihr natürlich frei wählen, meine heißt „Ooops„. Aber natürlich ginge auch „404 Seite“ oder „Error Seite„, was ihr am Besten findet.
  • Das Plugin Custom 404 Pro downloaden und aktivieren.
  • In die EinstellungSettings“ des Plugins gehen.
  • Als „Mode“ Wordpress Page auswählen und bei „Select a Page“ die vorhin erstellte Seite auswählen.
  • Im Anschluss die Einstellungen speichern.

 

CB filter settings

Filter Settings

 

Schritt 2: den Inhalt, die Content-Übersicht erstellen

Um die erstellte 404 Page mit sinnvollem Inhalt zu füllen, braucht man ein weiteres Plugin, dass eure Beiträge in einer Content-Übersicht darstellt. Ausgewählte Posts werden mit einem Foto und Titel angezeigt und können vom Leser, der sich auf die Error Page verwirrt hat, geklickt werden. Diese Anzeige eignet sich deshalb super für die Error Page, da euer Besucher, wenn er unabsichtlich auf eine Seite gelandet ist, die nicht existiert, nicht enttäuscht euren Blog verlässt, sondern über die Content-Übersicht auf Posts hingewiesen wird, die er sonst vielleicht nicht gefunden hätte. Und so erstellt ihr eine wirklich schöne Content-Übersicht:

  • Das Content View Plugin installieren und aktivieren.
  • In das Plugin gehen und mit „Add New“ eine neue Content-Übersicht erstellen.
  • Unter „View Title“ den Titel festlegen damit ihr auch später noch wisst, wie die Content-Übersicht heißt falls ihr sie bearbeiten wollt.
  • Da ihr Inhalt von Posts anzeigen möchtet, wählt ihr bei „Content Type“ die Option Beitrag aus.
  • Limit“ zeigt an, wie viele Posts ihr in der Content-Übersicht anzeigen möchtet. Ich habe hier 9 genommen, das kann man jedoch beliebig wählen.
  • Bei den „Advanced Filters“ hab ich „Taxonomy“ gewählt, damit die Posts in der Content-Übersicht nach einer bestimmten Kategorie oder einem Schlagwort anzeigen lassen könnt.

Tipp: um Leser von eurer 404 Page auf die beliebtesten Posts umzuleiten, müsst ihr zuerst für jeden dieser Posts eine neue Kategorie mit z.B. dem Namen „Beliebt“ festlegen und diese dann in den „Taxonomy Settings“ unter „Select Terms“ auswählen. Ich hab das nicht gemacht, sondern bereits bestehende Kategorien wie Home Sweet Home oder Coffee & Blog verwendet.

  • Nun wechselt ihr von den „Filter Settings“ auf die „Display Settings„, um das Erscheinungsbild eurer Posts in der Content-Übersicht anzupassen.
  • Bei „View Type“ bzw. „Layout“ hab ich mich für „Grid“ mit 3 Items per Row entschieden. Und für das „Layout Format“ hab ich  1 Column gewählt.
  • Bei „Fields Settings“ wählt ihr Show Thumbnail, also eine kleines Vorschaubild, sowie Show Title, das den Title des Posts anzeigt.
  • Wenn ihr fertig seid mit den Einstellungen, könnt ihr euch die Preview ansehen, in dem ihr rechts unten in der Ecke auf den Button klickt. Wenn ihr mit den Einstellungen zufrieden seid, wird die Content-Übersicht gespeichert.
  • Kopiert nun den Code der oben grün hinterlegt angezeigt wird.

 

Display Settings

Display Settings

 

Schritt 3: den Code in 404 Page einfügen

Nun fehlt eigentlich nur noch ein wichtiger Schritt für eure sinnvolle 404 Page. Ihr müsst den Code eurer Content-Übersicht, die ihr gerade mit Hilfe des Plugins erstellt habt, in eure 404 Page einfügen, damit sie auch angezeigt werden kann. Dazu macht ihr Folgendes:

  • Geht auf die Seite die ihr als 404 Page festgelegt habt.
  • Fügt den kopierten Code auf der Seite ein und speichert Sie. Wenn ihr wollt, könnt ihr zusätzlich zur Content-Übersicht auch noch Text eingeben, vielleicht einen kleinen Hinweis zur 404 Page, damit eure Leser wissen wo sie gelandet sind.
  • Überprüft eure 404 Page in dem ihre eure Blog-URL mit einem Namen hinter dem / eingebt der nicht existiert. Meine 404 Page könnt ihr euch hier ansehen: provinzkindchen.com/KeineEchteSeite

 

Code in Seite einfügen

Code in Seite einfügen

 

Und für Blogger?

Auch für Blogger, die mit ihrem Blog bei Blogger.com sind, gibt es die Möglichkeit die 404 Page zu individualisieren. Eine Anleitung dafür habe ich zum Beispiel bei hellobrio.com gefunden. Hier wird auch gezeigt, wie man mit Call to Action Buttons, oder Kategorie-Listen die Seite verschönern kann – also ganz ähnlich, wie ich es gerade für Wordpress erklärt habe.

 
Gutes Gelingen!

12 Kommentare

Katharina 21. November 2015 - 12:19

Ein toller Beitrag mit vielen absolut nützlichen und hilfreichen Tipps :-)

Ein schönes Wochenende und liebe Grüße!
Katharina

http://casualchic.eu/

provinzkindchen 21. November 2015 - 18:26

das freut mich, dass du von dem Post etwas mitnehmen konntest :)

Tabea 21. November 2015 - 19:31

An diese Seite habe ich bis jetzt noch gar nicht gedacht, also werde ich jetzt wohl mal den verlinken Beitrag für Blogger-Blogs durchlesen :)

Auf deiner 404-Seite fehlen übrigens die Kommas vom Relativsatz. Das hat mich beim Lesen ein bisschen irritiert…

Liebe Grüße

provinzkindchen 21. November 2015 - 19:44

Danke für den Hinweis :)

Jules 22. November 2015 - 14:05

Ohh was für eine coole Idee. Schöner Beitrag :)

Viele Grüße,
Jules von today is …

provinzkindchen 29. November 2015 - 0:55

Danke liebe Jules :)

Jacky N. 27. November 2015 - 21:23

Der Post gefällt mir richtig gut. Ich hab zwar schon öfters individuelle 404-Seiten gesehen, bin aber noch nicht auf die Idee gekommen, meine eigene zu machen. Ich werde mir den Post auf jeden Fall mal merken und bei Gelegenheit nachmachen. Das Ganze hast du auch richtig toll beschrieben :)

Alles Liebe, Jacky N.
vapausblog.wordpress.com

provinzkindchen 29. November 2015 - 0:51

Danke! das freut mich, wenn ich dir ein bisschen Inspiration liefern konnte :)

Tatj 28. November 2015 - 20:05

Schöne Idee, ich wollte schon lange an meiner 404 Seite was ändern! :)

Aber das sind ja sehr viele Schritte und Plugins notwendig… für mich wohl ein bisschen zu aufwendig noch mit den Extras, wo ich letztendlich 2x so eine Datei hätte…
Wenn ich einfach den Inhalt der index.php oder eine andere in die Datei der 404.php einsetze, dann wird auch die Startseite angezeigt mit allen Posts, wie ich mag… dann brauch ich in der Datei auch nur noch meinen 404 Text schreiben und einfach speichern. Dann brauch ich mit keinen Plugins oder einer Seite die normale Ausgabe überschreiben und ersetzen :)

Liebe Grüße

Random Recap November - hydrogenperoxid.net 30. November 2015 - 11:54

[…] dem Blog von Provinzkindchen bekommt ihr ein super Blog Tutorial zum nachmachen. Habt ihr euch manchmal auch schon darüber […]

COFFEE & BLOG: Rich Pins einrichten auf Pinterest - so geht's! - provinzkindchenprovinzkindchen 4. Dezember 2015 - 18:00

[…] einem Abend hab ich mir nicht nur für meine optimierte 404 Page Zeit genommen, sondern auch dafür, endlich mal Rich Pins einzurichten. Weil ich schlussendlich […]

COFFEE & BLOG: Rich Pins einrichten auf Pinterest – so geht’s! - AmandoBlogs.comAmandoBlogs.com 4. Dezember 2015 - 20:21

[…] einem Abend hab ich mir nicht nur für meine optimierte 404 Page Zeit genommen, sondern auch dafür, endlich mal Rich Pins einzurichten. Weil ich schlussendlich […]

Kommentare sind geschlossen.