Help your visitors with a *useful* 404 Error page

A 404 Error page usually informs visitors that something they were looking for is not found. I wanted to create a useful 404 error page for my blog and site. If it is only for a blog, I would have done with a multitude of plugins available for WordPress like smart 404, AskApache’s Google 404. A quick search for “404″ in wordpress extension site will reveal atleast 6 pages of extensions.
But much to my bad luck, they didn’t fit my “requirements” properly. I needed a redirection page that would show related search results straight on the page itself.

[ad#AdBrite-Post]

Google’s creating useful 404 pages didn’t work out either as it offered only to show me a text box with keywords pre-populated. I wanted something similar, but with the results of the search in the 404 error page itself, just like the AskApache’s Google 404 plugin. The smart 404 plugin didn’t work for me and many others as well after 2.7.1 upgrade. The askapache needed some .htaccess tweaking which is handled very poorly by godaddy’s Windows hosting. So I decided to write one myself and the result is what you can see here

The first thing I did was to change godaddy’s default error behaviour to redirect to a custom error page titled 404.html just under my root. After about one hour or so, my site got updated and all the 404 behaviours were directed to my page.

[ad#AdBrite-Post]

There are two ways (atleast that which is handled by my 404) in which one would come to your site. One is by typing the URL wrongly or from a old outdated bookmark. Or from one of your old blog redirection. In my case, my old blog was at blogger.com and I’ve set it up to redirect to my new domain. However, because I changed my permalink settings to avoid showing the classic year/month in the URL, all my redirection from blogspot.com were hitting 404′s… If smart 404 worked as promised, i would have been happier. But unfortunately, even after the release of 2.8.3 (at the time of writing this), the plugin didn’t work. So the first thing I did was to extract keywords from the referrer url, document.referrer. In case the document.referrer is empty, it means the user has typed a wrong url in the address bar or followed a old bookmark. In that case I extract keywords from document.location.href, which is the wrongly entered url. I strip of everything except the post name which by far has the most keywords related to the URL and pass it to Google AJAX Search API.

Based on inputs from various other sources including my favourite Jakob Nielsen’s suggestions, I decided that my 404 should look like a real *error* page rather than a blog post. It should possibly have a sitemap if it’s a website or links to popular posts in case of a blog. It should take your users to important places in your website as in my 404 page offers links to my homepage and blog. Above all, it should have a search box where user could search for what he was looking for without hitting the browser back button.

My version of 404 error page looks like this.

It uses plain html and javascript. It’s not a server scripted file like PHP of ASPX. You can go ahead and copy the file (Cmd click -> View Page Source) from my error page and use it in your own site. I would be glad if you could attribute me by linking to this post or blog, though it’s purely optional and I leave it to you.

If you enjoyed this post, make sure you subscribe to my RSS feed!

No related posts.