Weekend Projects: 404 Pages

Published on Apr 18, 2009   //  Weekend Projects

Weekend Project

Last week we added a favorite icon to our site which will make it easier for people to remember our site once it is bookmarked. This week we focus on redirecting traffic instead of loosing them with a 404 error. A 404 error comes up when someone visits a page on your site and that page is unavailable.

A standard 404 error page is not very helpful for the person looking for something on your site. Those with an updated Google Toolbar are starting to see a new 404 page that could drive traffic away from your site.

So to avoid that you should have your own custom 404 page setup on your website. There are 2 ways to go about this. You can make a 404 page that looks like your site and says 404 error, which is very common to do.  Instead of doing that I would suggest making a 404 page that directs users to your first page. That way even if they do get a 404 the user ends up at your first page.

To get started open up your favorite site editor and create a file named 404.shtml. In that file place the following code:

<html>
<head>
<META http-equiv=”refresh” content=”0; URL=http://www.yoursite.ca/”>
</head>
<body>
</body>
</html>

Replace yoursite.ca with your domain and upload the 404.shtml page to your public_html folder. Now anytime that someone goes to a page that does not exist on your site instead of getting a 404 error they will be directed to your main page.

You can do the same thing for other error messages such a 400, 401, 403 and 500.

If you get stuck let me know in the comments.

3 Comments to “Weekend Projects: 404 Pages”

  • I’d say it’s better to do the redirect using PHP rather than HTML.

    <?php header(“Location: http://example.com/“); ?>

    Since with the meta tag, the whole page has to download first before your browser redirects you… If you do it with PHP, you’ll have to use a .php file, so you’ll need to put this into your .htaccess:

    ErrorDocument 404 /404.php

    Or, you could just do the redirect with .htaccess:

    ErrorDocument 404 /index.php

    In WordPress, if you want to redirect to your homepage, go into your theme’s directory (wp-content/themes/theme-name) and edit (or create if it doesn’t exist) 404.php. Clear out anything in there now, and put in the redirect. Then save and upload.

  • This is a personal preference, but I sure don’t like it when a site redirects me to the front page of a site instead of giving me an actual 404 error page. When a site does a redirect, it’s not obvious that you’ve received an error. More than one, I started reading the page a bit before realizing that I had been redirected against my will.

    This is especially annoying when you open a set of pages in extra tabs: once you get around to read them, you might have 3 proper pages and a wrong one. However, since you were redirected, you have no idea which URL you tried to reach: all you see is the URL of the front page. That’s why, on my own site, I use a real 404 page offering a few possible destinations instead of a mere redirect.

  • I agree that a redirect can be confusing to some visitors when they don’t realize there was an error. I too believe in showing the error page with destination options.