31

How to Create a Custom 404 Page

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

If you’ve spent any time on the internet chances are you’ve seen silly, funny, or just plain insane custom 404 error pages. However this article isn’t about creating one of those types of custom 404 pages, this is about creating a better 404 page that is not only helpful to your users, but solves technical problems you might not even know you had.

Make Your 404 Page Informative

Technically a 404 is an “invisible” code that is sent by your webserver to the computer or search engine that requests your page, and it tells them the page they were looking for isn’t there. There are lots of reasons why that could happen, maybe you moved the page, maybe the person made a mistake linking, and we’ll deal with those issues later on, but for now lets focus on the user. Some people will know what a “404 error” is others won’t, so my recommendation is tell them it’s a 404 error, but also include some information that tells them what happened, and that the page they were trying to get to isn’t there.

That’s where a lot sites stop and in my opinion they drop the ball. If you leave a customer at a dead end they will leave, if you give them an information scent to put them back on track, you have a better chance of keeping them on your website and doing what you want them to do. Every website is different but here are some suggestions of what kind of links/information to put on your 404 page:

  • Links to popular pages
  • Links to popular products
  • Links to important company, customer service or contact information
  • Links to important FAQ’s
  • Links for technical support or contact

Getting Data from Your 404 Page

Now that you’ve made your 404 page useful for the users, how about making it useful for you and your IT team. One of the easiest ways to do this is gather information every time the 404 page is visited and write it to log or database. If your website is in bad shape and has a lot of errors, this could actually backfire and become a huge resource hog, so be careful when you implement this solution. If you can try to capture what page/file they where looking for, where they came from (referrer), IP address, and user agent. Once you have had this in place for a while you want to start aggregating the data and looking for trends or patterns.

  • Are there files/page that are being requested often
  • Are there websites that might have a bad link to you that you can ask them to fix
  • Are you getting lots of 404′s from one IP … this usually indicates scraping or bot behavior

Making Your 404 Page Work Smarter

Any website that has been around for a few years has likely seen some architecture changes, had pages come and go, and maybe even changed serving technology from HTML to JSP to ASP to PHP. The more changes the more likely you are to have 404 errors. You can play with your server technology to have JSP pages really run as PHP, but that can get tricky. You can use server tools like ISAPI or HTACCESS to handles these redirections, but if there are hundreds of them, there will likely be a negative performance impact.

A better solution is to use the 404 page to handle redirections. When the 404 page gets called before a single line of code is served back, check the file requested in a redirect table, if there is a match, then issue a 301 redirect, if not then serve the normal 404 page. It’s really important to not serve code back and then try to redirect, that creates what’s called a “soft 404″ and actually makes things worse. There are a few advantages to using your 404 page to handle redirects:

  • You can prevent chaining multiple 301 redirects together
  • Usually this method uses less resources than ISAPI or HTACCESS
  • You have one central point of maintenance
  • It’s a lot easier to migrate this solution if you change hosting companies or serving technologies

So what are the takeaways from this post:

  • Funny or entertaining 404 pages are good, but 404 pages that help the end user are better
  • Use your 404 to to give customers the information they need to get back on track to complete a sale, fill out a form, or other mission critical goals
  • Be helpful with customer service, FAQ, technical or support information
  • Use your 404 page to gather information about problems on your website
  • Use this information to fix broken links, and set up redirects

prajapat