At some point in the life of your website, a visitor is going to stumble onto a 404 error page. Perhaps the visitor adds a strange extension to the end of the web address, or maybe she has bookmarked an old page and your organizational structure has changed. Whatever the reason, when the visitor hits that 404 page, you want it to be a funnel back into your site or you risk losing your visitor to your competition.
The Goal of the 404 Page
The goal of the 404 page is to keep a visitor on your site even if she hits a page that doesn't exist.
When done creatively and with purpose, a 404 page can not only retain the visitor but make her hang around and check out what else is going on around your dot com. Some things to keep in mind for your 404 page:
- Should be free of advertising
- Should let the user know she's reached the page in error but how you let her know can reflect the personality of the site
- Should funnel the visitor to other pages or the home page
- Should be static HTML and not contain complex scripts that might create additional errors for some users
- Should load as quickly as possible
What NOT to Do
Before we talk about some creative uses of the 404 error page, let's look at some examples of generic 404 pages and why you shouldn't use them. As a web savvy person, you automatically understand why a 404 error was returned. However, your site visitors might be new to the Internet or not fully understand how websites work. A generic 404 page can frustrate these newbies and make them leave your site never to return.
Let's look at a common error message on a site without a customized 404.
In the above example, the site visitor may wonder why there is a 404 error and what the even is. This message also doesn't give the visitor any options to stay on the site. More than likely, the unsavvy non-tech user will simply leave your site at this point. This is a shame as the only problem might be a mistyped word or misplaced letter.
Samples of Good 404 Pages
Take the time to customize your 404 message and you are less likely to lose those visitors who stumble across an error. Below is a screenshot of the 404 message from my own site. It funnels the site visitor to other choices on the site. Hopefully, the visitor will stay and check out other offerings.
Lori Soard (my site)
In the example above, I've done a couple of things to funnel site visitors to the rest of my site. First, the look of the 404 page is just like the rest of my pages. My header is there and so is the navigational structure. If your site is extremely graphics heavy, you may want to use something a bit different to help this page load more quickly.
I have also changed the wording to let the visitor know that the page can't be found on the site but offered them the ability to search for what they need. Finally, further down on the page is my most recent posts and under this (you can't see it in the screenshot) is categories and popular topics.
This offers the site visitor a lot of options, but you can also narrow the choices to funnel them to a specific page. I do that on other sites where the purpose of the site is narrower.
Web Hosting Secret Revealed
It's little surprise that WHSR does their 404 page well.
Here at WHSR, there is a 404 error page that offers the similar benefit of having the same navigational structure as the rest of the site. The grumpy cat image adds a whimsical touch and the text jokingly says “the cat ate our file”.
Adding a bit of humor can keep visitors on your site. The visitor assumes if the error page is funny and well written that the articles might be as well.
Blue Fountain Media
Blue Fountain Media is a site that does a 404 page really well. While it breaks the rule of no scripts, it is effective in getting the visitor to stay on the site for a bit. It is also original and thus memorable.
Blue Fountain Media invites the visitor who can't find the page he is seeking to hang around and play a game of Pac Man. Who could resist? Of course, the navigational structure and contact info is located at the top of the page in case the visitor wants more info on Blue Fountain Media.
Since people love games, the visitor may even bookmark this 404 error page for future visits.
Wikipedia
Wikipedia is another site that breaks some of the basic rules of 404s, but does it so well that you have to offer a bit of applause at the brilliance.
Wikipedia takes the 404 one step further and assumes that the site visitor is planning to go to a page with a similar extension name. Wikipedia then automatically redirects the site visitor to the page it thinks the visitor wanted.
While the assumption may or may not be correct, the visitor is still taken to an interesting page, which may keep him on the site or invite him to explore some more. There are also links provided to the main page.
Tips to Revamp Your Page
- Throw out the techie terms. Your site visitors don't care why the page isn't there or what caused the error as much as they care about getting to the page they want.
- Include a link to the home page.
- Don't point your finger at your visitors. No one likes being told he is wrong. Instead of saying “you typed a wrong url” simply state that the page can't be found.
- Creativity is good, but insanity is not. WHSR's 404 page (screenshot above) is a good example because it offers humor, but doesn't have flying monkeys zooming in and out.
Google also offers some specific tips for creating a useful 404 page.
How to Add a Custom 404 Page
Since most of our readers are likely on hosting platforms that offer cPanel, I'm going to provide directions and screenshots for uploading your custom 404 page via cPanel. You can also set up custom parameters in your .htaccess files. If you do not have access to the backend of your website, talk to your hosting provider about how you can upload a custom 404 error page.
1. Customize Errors via cPanel
Navigate to the control panel of your site. The address is probably something along these lines:
http://yoursite.com/controlpanel
or
http://yoursite.com:2082
Once you've logged into your control panel, scroll down to the section titled “Advanced” and click on “Error Pages”.
3. Edit Error Pages
A list of error pages will pull up, such as in the image below. Click on 404 (Not found).
The page that pulls up is a place where you can insert the codes you want for this page.
WordPress Custom 404s
WordPress probably offers the easiest way to customize your 404 page. Simply use a plugin such as:
- Google 404
- Useful 404s
- Dunstan-style Error Page
If you are comfortable with coding, you can pull up your theme's 404.php file and add some custom coding to force the page to do what you want. WordPress offers detailed instructions on how to accomplish this.
Now that you have some ideas for customizing your 404 errors and how to do so, you'll want to take the time to check your site for broken links. The best 404 page, after all, is one that never happens. If you fix broken links, visitors are less likely to run into the dreaded 404 in the first place.
