Create a Custom 404 Error Page for Your Blog

Posted By Darren Rowse 11th of September 2007 Blog Design, Featured Posts

When someone comes to a page on your domain that is no longer there (either because it’s been deleted, because they’ve typed something in wrong or because the link that they followed was wrong) they are shown the dreaded 404 ‘page not found’ error page.

This error simply means that the person was able to communicate with your server but that the server couldn’t find the page that they were after.

404 error pages come in all shapes and sizes but traditionally are quite often like these:

While these sorts of pages certainly communicate that there’s been some kind of error – they don’t really do you or your potential reader any good. In the majority of cases they’ll simply surf away from your website.

It need not be this way – Customize Your 404 Page

One of the things that I asked Ben to do when redesigning ProBlogger was to put together a customized 404 page for this site. The old one was a fairly poor page that didn’t really do much (it was just an error message on my normal template).

However Ben put together a page that in the last week or so had a message about us going through a redesign process.

Yesterday I upgraded it to give more information. You can see how it looks by typing in any url that doesn’t return a page on my domain (like this one).

What Have I included in my 404 error page?

Bloggers wanting to customize their error page are confronted with a lot of choices. My own priorities on this occasion were twofold:

1. Help people find what they are looking for

2. Give people other helpful content and drive them deeper into the blog

Priority 1 is all about helping the person find the actual information that they are after. I do this by giving them a search field and the option to contact me.

Priority 2 is all about making the site sticky and giving readers an option to surf deeper into the blog. As a result I prove some of my ‘best articles’, suggest some ‘blogging for beginners’ posts and then point them back to the front page of the site.

I’ve chosen to do this all within a normal template for the blog – although did toy with the idea of a much simpler and cleaner page.

Other Options that I’ve seen bloggers use

Redirect to Front Page of Blog – From what I can tell the default 404 page on WP blogs is to serve up the main page of a blog. While this is probably better than a start white error page it fails to communicate to the reader what’s going on or to help them find their information.

Promote RSS Feed – I’ve seen a few bloggers use a 404 page to heavily promote their RSS feed. While I can see why they do this (and do promote mine right at the bottom of my own 404 page) I’m not sure how the conversion would be. People confronted with a page not found error are looking for something specific – not looking to become loyal to a site that can’t find what they want on.

Humor – There’s been a trend over the last few years (or longer) to serve up funny 404 pages – either with funny images or statements. These can definitely take some of the sting out of a reader’s frustration at getting an error – but unless they have a way of helping them or driving them into the site I suspect most will surf away from the page – be it with a smile on their face.

To see a list of different 404 pages check out Smashing Magazine’s post on the topic with lots of examples (and another one).

How to Customize Your 404 Page

The process for creating a customized 404 page for your blog will vary from blog platform to blog platform (and for some hosted options it may not be possible). I don’t propose to go through each option in this post – but if you are a WordPress user (as the majority of ProBlogger readers are) I would suggest you look at a post on 404 pages that Average Joe Blogger posted on the topic a few days back which reminded me to fix my own 404 page.

If you’ve seen tutorials for other blog platforms please feel free to suggest them below. If you’ve customized a Custom 404 Page – how did you do it and what did you include?

Exit mobile version