DailyDev: Custom 404 Error Page

June 11, 2010

DailyDev blog series thumbnail logo -- day 7It’s Friday, and apparently there’s some kind of big sports tournament going on, so, I kept today’s DailyDev simple. I made a custom Page Not Found 404 error page for my portfolio site — something I should have done a long time ago.

Here are the steps:

  1. Create the HTML page and save it in your site root as “notfound.html.”
  2. Add a line reading “ErrorDocument 404 /notfound.html” to your  site’s .htaccess file. (Error pages on non-Apache servers are configured differently, according to this tutorial. Site owners should contact their Web host.)

Here is the

Finished Product

Screengrab of custom Page Not Found 404 error page

Pros

  • Design one page, cover an infinite amount of potential broken links/typos/misspellings.
  • Make the error a little less jarring for users, provide guidance that may help them find a relevant page, maybe even make them laugh a bit.
  • Encourage (or automate [No. 6]) feedback so you know when your site’s not working properly.

Cons

  • You’re spending time making a page you never want anyone to see!
  • Many who do see it are probably just going to instantly hit the back button anyway.
  • If your Web server gets lots of requests for invalid files, a larger custom error page rather than the generic one can start nipping away at your bandwidth quota.

Tip

  • If your Web host has you edit your .htaccess file through a form interface, like mine does, you still need to make sure you precede the custom 404 page’s filename with a slash to indicate it’s in the root: “/notfound.html”.

Recommend?

  • Yes.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: