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?
Darren: Thanks for the link. Your new 404 Error page is a great example of what information should be provided.
I spent a good deal of time on mine. It parses the URL and tries to list blog posts that come close to matching the title. I also have a fun GIF of Rick Astley. Here’s an example of someone mistyping “code-monkey”:
http://www.mgroves.com/code-monkey
A couple of tips:
1. If you submit a URL to a service for validating the HTML/XHTML, be aware that any typos in the URL will cause the 404 page to be validated instead of the page you wanted. Copying and pasting the URL is advisable to avoid false positives.
2. Be careful about relative links in your 404 page. For example, if your 404 page references a CSS file in the same directory via a relative link (e.g., “main.css”), it will look right when you view http://www.yourdomain.com/404.html. However, it will not pick up the CSS file when you view http://www.yourdomain.com/2007/09/fjkdsjt.html–you'll see the 404 page, but it will be looking for main.css in the 2007/09 directory. You can avoid this by referencing files by absolute paths, e.g., “http://www.yourdomain.com/main.css.” Relative paths are fine in general, just not on 404 pages.
You can also configure Google Analytics to report the source of your 404 errors so you can fix your site and stop people ever reaching the 404 page. I wrote about this at:
http://www.blogstorm.co.uk/blog/advanced-google-analytics/
nice – with my 404 page I post up my recent top 20 post to help users maybe find what they are looking for instead of just getting a “BLAH” page
I just redirect them back to the home page. Like you said, we can also use humor in it and redirect back home.
This doesn’t occur much anyway.
This is our 404 page :)
http://dev.starfeeder.com/blog/dfsdfds
pretty simple right now, since not officially launched, not all sections are there.
Nice post. I keep my 404 page within the same theme as my blog, with navigation menus etc. It helps users to figure out where they’re really trying to go.
Thanks for the tips. I’ve had a custom 404 page for some time, but was able to tweak it a bit based on your suggestions.
I did mine a while ago, since the purpose of my blog had changed. Some content had been removed, and I knew I’d be getting a lot of 404 hits. Here’s my 404 page.
The more the reader know the more they will return.
Who likes to be left out in the dark ?
NO ONE.
At the previous web development company I worked for we came up with the idea of a 404 page that said “Congratulations. You have found penguin number [insert a random number]. See if you can find the rest.” We thought users would think it was a game and clients would not receive complaints ;)
Also I remember reading a good article on MSDN a few years ago that presented a simple HTML 404, so users would always see something, but then loaded some JavaScript which would look at the referer URL and try to guess, based on some keyword lookups, what the user had been trying to get to. Always thought this was a good idea, and not with AJAX this could stem the URL after the base and do a site search?
I think you’ve missed an important point Darren. You really need to explain what a 404 is and how the user got there This is important for two reasons. Firstly, you want to reduce the number of 404s in the future and secondly, you want to stop the user from being surprised with some content. What I mean by the last point is that if you try and guess what the user was really after, and end up getting it wrong, you’ve probably lost ’em. It’s probably worth pointing out that lots of people don’t know what the 404 error code is.
I did this with my current blog, and my 404 page displays my top 10 posts. I also did something similar to my old domains. I put in the feedburner headlines for my current blogs, so that people who I knew from way back who thought to check on my old URLs can still find me.
I will learn how to put 404 error code when I have my own domian. I never knew what 404 error code for.
Really delighted that you raised this. It’s more than just a blogging issue, as the dreaded ‘Page Not Found’ error pops up on so many web-sites that really should know better.
Worse still is when your hosting company – not mentioning any names (1&1… cough, cough) – deliver a page of Google ads to your potential reader/customer if you haven’t implemented a 404 error page – ALL WITHOUT TELLING YOU! And you don’t realise until a year later.
Anyway – sort out your 404s. It looks really unprofessional if you don’t.
http://www.yourekillingmyserver.com/404.html
I put up some of my recycled art that relates to the idea of search. Do any of you find this offensive? It was an old art class assignment.
thank you for great article :)
Wow I never knew that you could customize your 404 error page. Interesting post!
my 404 page error includes all the latest 20 posts, list of categories, list of archives and I explained information about why 404 page shows. That’s enough for first time visitor when they reach 404 page.
http://www.myokyawhtun.com/404.html
Darren,
Isn’t it against the TOS to have Adsense or Adsense Search on a 404 page?
RT
> It parses the URL and tries to list blog posts that come close to matching the title
Is it possible to have the same feature in Drupal?
And which plugin was used for WordPress?
Thanks for the info Darren. Did not know it was possible to customize a 404 error page.
However, just like RT, I would also like to know whether Is it against the TOS to have Adsense or Adsense Search on a 404 page?
Avinash
http://www.photoswift.com
This weekend I just began rudimentary work on a customized 404 page. Right now, I just have my logo there and a few words, but I plan on adding links and a search engine to it.
I’ve been meaning to make up my 404 page but had no idea what it should be like. But now I have a perfect example, thanks! :)
Can you have a customised 404 page on Blogger / Blogspot?
Nothing fancy, but my 2Dolphins.com custom 404 page includes a link to our Contact page, the sitemap, and a prominently-displayed Google box (with in-site search set as the default option).
Yet another good reason for me to get off a free hosting provider!
Avinash, RT: In fact it does seem that it is against the rules to use adsense a 404 page.
5 Prohibited Uses. You shall not, and shall not authorize or encourage any third party to: … (v) display any Ad(s), Link(s), or Referral Button(s) on any error page, on any registration or “thank you” page (e.g., a page that thanks a user after he/she has registered with the applicable Web site), on any chat page, in any email, or on any Web page or any Web site that contains any pornographic, hate-related, violent, or illegal content;…
Here is the official link: https://www.google.com/adsense/static/en_US/LocalizedTerms2.html
Didn’t customize the 404 page that came with my theme, I love Chris Pearson’s 404 page from his Copyblogger Theme on my WordPress blogs. Just tweaked the text a wee bit to suit my readers (I assume). I’m still preaching for an empty church.
Chris Pearson’s text:
* Welcome to the seedy underbelly of this otherwise upstanding Web site. Please choose from the following in order to get back on track:
* Try the ol’ back button on your browser, it is the most used button on the Web, you know.
* Head on back home
*Try the navigation menu at the top (arrow ponitng up) of the page.
* Search or click on a link over in the sidebar.
* Subscribe to this site’s feed [link to feed] so you don’t have to come here for updates.
* Visit [http://www.nlpmij.nl (my other blog)] if you want to read in depth about NLP or translate a bit.
Wel the last one I changed, something about a groin …
I created a WordPress Plugin called AskApache Google 404 (released today) that adds some freaking awesome capabilities to your 404 Error Page. The cool thing it does besides providing users with web/site/cse/blog/image/ and video search results for their query is it keeps google searching its indexes for your site every time. I absolutely love it. AskApache Google 404
Hey great post Darren! I never really thought about a customized 404 Error Page, but now I can see how you can turn it into an asset for your blog!
Personally, when I run across a 404 page I just give up. But if I saw one like yours I’d at least be intrigued enough to search your website a little more.
It’s the little things in blogging that can make a big difference!
This is something my blog has needed for a while now. I have made changes to my template and even to the file structure without fully understanding what I was in for.
Now I am trying to correct the problems I have caused. Good thing I am using my MMO blog to mess with instead of messing up my money making blogs.
By the time I am done fixing things up I should be able to write a really helpful post for my readers, sure hope they will be able to find it without a 404 error.
Hi Darren, i was hoping if you could let me know if there are anyways on creating a custom 404 error page for people who use Blogger instead of WordPress.
Thank you
It is no longer against google TOS to put adsense for search on a 404 page. I wrote up a post on how to integrate Adsense for search on a 404 page (for wordpress as well as static html websites) here:
http://tech.shantanugoel.com/2008/11/06/make-money-out-of-nothing-add-google-adsense-for-search-to-your-404-page.html
I just recently customized my 404 page… and I added in a few links, some fun, and even a sexy audio, just to keep people entertained.
http://www.eroticachallenge.com/nothing.html
Hey why no one is replying for custom 404 pages in blogspot .. is it possible or not to do that ???
Nice information, this is a great way to point visitors to other places of your website. ALways look at your stats and ssee just how much error traffic you get and then point them in the right direction.