3 Ways to Create More Engaging 404 Pages
Your website's 404 page is a valuable piece of real estate. So why waste this golden opportunity to redirect visitors to your best content with a simple "Page not found" message?
Essentially, a 404 page exists on every website with the sole purpose of telling visitors that the content they seek can't be found. This situation can occur for a number of reasons. The visitor may have typed in a URL address incorrectly or could be looking for a page you've moved or deleted.
In most cases, a 404 page contains a stock message stating that the requested content cannot be found. But there are more valuable ways to use this page. Consider the following example of a playful and user-friendly 404 page from web designer Jamie Huskisson's blog:
This 404 page gives users a search box to try to find the page they want and also suggests that they explore other content on the site. Such 404 pages can communicate your brand's personality and minimize the amount of lost traffic.
You don't need to be a graphic designer or web programmer to create a more effective 404 page. Here are some tips for making better use of your 404 page, as well as minimizing its occurrence:
1. Use Google's widget.
One easy way to improve your 404 page is Google's Webmaster Tools 404 widget. To use this feature, copy the code below and place it on your 404 page template:
var GOOG_FIXURL_LANG = 'en';
var GOOG_FIXURL_SITE = 'http://www.example.com'
Once the code is in place, Google will automatically serve up a search box and a list of recommended pages that it believes users may have been seeking.
Graphically, Google's 404 widget isn't much to look at and lacks the personality and brand messaging in the example above. But it is easy to install, making it a solid solution for beginning web masters who want a better 404 page without any hassles.
2. Recommend your site's top posts.
If Google's widget doesn't appeal to you, you can customize your 404 page with your chosen web design software, whether it's Dreamweaver, WordPress or another program. Take this opportunity to include graphics or text that reflect your brand's personality, as well as provide helpful information for lost visitors.
While coding in a custom search box may be beyond your capabilities, an alternative is to include a list of links to the top content on your site. To determine which pages have been viewed most often, use your Google Analytics account or other web data program. Then, put links to your most popular content on your 404 page. Even if your list doesn't include the page your visitor had trouble locating, he or she may find other content intriguing enough to stick around.
3. Reduce 404 page occurrences.
Keep in mind that no matter how much you improve your 404 page, it still represents an error from your frustrated visitor's perspective. Even if the visitor finds the page he or she wants via a 404-page search form or you pull the person into other articles on your site, your visitor might still feel that he or she had to jump through hoops.
The first step to help minimize 404 page occurrences is to find the broken links that trigger 404 page deployment. If your site was built on WordPress, you can monitor broken links with a free plugin, such as the "Broken Link Checker" tool that alerts you whenever bad links are detected. If you didn't use WordPress, you can perform this check with free URL validator tools such as BrokenLinkCheck.com.
But what should you do if your web analytics program shows that some visitors are arriving on your 404 page from a broken link on someone else's website? If possible, contact that site's web master and ask that your link be corrected.
If that isn't possible, you can set up a 301 redirect on your site. This can be done using either a free WordPress 301 redirect plugin if your site runs on that platform, or by adding the appropriate code to your web pages. The redirect can automatically transfer all incoming traffic from the broken link on the referring website to a working link on your site.
Corrections & Amplifications: An earlier version of this story misspelled Jamie Huskisson's first name. It is Jamie.