Creating User Friendly 404 Pages

Error codes may not be useful for solving the problem, but in general most of the errors that have to fail hard with an error message are those that you couldn’t handle, so it’s doubtful the user could either. It’s so much easier to google for an error code than for a message, especially when you can’t copy-paste the text.

Now on the web that applies less so, but having some sort of “problem ID” in addition to the message is helpful.

Take a look at this one… it doesn’t help at all, but at least the page isn’t boring:
http://www.weebls-stuff.com/404

My 404 page achieves this… I somewhat disagree with the auto-search. Somewhat of a waste of server resources.

http://bmi.com/askjdfhajsdfhalfsdjl

“Unfortunately, I haven’t had time to implement a better 404 page on my own website. Yet.”

Don’t do as I do…

I like this one:
http://www.charleskaufman.com/missing.html

Very nice article. However, there is a very important part of the 404 error code process that the author did not touch upon. Search engines (i.e. Google) view 404 pages very differently than they view normal web pages (200 OK). It is in extremely important with regards to your indexing that all of your 404 page returns a 404 error code and not a 200. If they do not, there is a possibility that you can end up with many pages “404” pages that are indexed causing you severe duplicate content issues (which can result in a severe penalty).

To be safe, I would verify this by checking a server header checking tool like the one at http://www.seoconsultants.com/tools/headers.asp.

Take for example everyone’s favorite 404 page:
http://www.homestarrunner.com/blahblah

Great page… very funny. Unfortunately, it does not return a 404. It returns a “HTTP/1.1 200 OK”. If, for example, I had a bunch of pages that I link to that end up removed, they would all be indexed with this same exact content because Google would see them all as good 200 pages.

Long story short, 404 means page not found. If you customize it, make sure the bots, as well as your users, know that the page is still “not found”.

I disagree with the assertion “drop the 404”. There are two audiences for an error page, first the customer who gets it, and second the tech support guy who has to figure out why the customer got it. The main reason to show users error codes is to help tech support figure out what happened. Customer are notoriously bad at giving an accurate description of a problem, but they can generally pass along an error code verbatim.

Is there an IIS or Apache add-on that goes through server logs and reports 404s (and/or 500s)? Or does one just create a custom dynamic (aspx/jsp/php) 404 that logs stuff to a DB and sends an email if necessary?

Never thought about it, but I admit youre right. Except:

  1. The number 404 should be on the page. It will not disturb the user but help advanced users and crawlers to recognize the error.
  2. The 404 page shouldt be in simple english, but in simple whatever the websites language is. Better: bring it in the language of the user.

How about this 404:

http://www.acromediainc.com/apples

You think IE’s default “friendly” error pages are a good idea? Aside from lumping together completely different errors (like, say, DNS error and connection timeout), they also make it impossible to troubleshoot a transient error.

User calls you to say they can’t access a web app. You ask for the error message. After a few false starts, you figure out “friendly” error pages are on and walk the user through turning them off. User tries again and this time it works. There’s nothing in the application log because the server blew up before hitting the app, and the server admin can’t find any trace of the error in the event log, and thanks to IE’s default “you’re a moron” configuration, you’ve lost your chance to try to figure out what’s happening.

I’ll add my “me too” to the cries for leaving “404” on the error page. It’s not just geeks who understand it – a lot of users have been around long enough to recognize it explicitly, even though they’d be quite confused by some of these attempts at “user-friendly” 404 error pages.

Here are some more inspirational 404 pages and how to customize 404 in Wordpress:
http://www.inspirationbit.com/inspirational-404-error-pages/

there is the classic

Once upon a midnight dreary, while I websurfed, weak and weary,

…Over many a strange and spurious website of ‘hot chicks galore’,
…While I clicked my fav’rite bookmark, suddenly there came a warning,
…And my heart was filled with mourning, mourning for my dear amour.
…"'Tis not possible," I muttered, “give me back my cheap hardcore!” -

Quoth the server, “404”.

I like http://www.greenpeace.org/404/

I like http://carlessinpiter.blogspot.com?404

Including the number 404 on the page serves one useful and important purpose - if a user complains to his local support staff, they can ask “What error did you get back” and 404’s a lot more identifiable than “Oh, it was some page not found or failed or something message”.

Putting the numbers 404 on the page doesn’t necessarily complicate matters for the user - it’s no more intrusive than a chapter or section number next to a heading, for example - but it does help support staff a lot.

maybe you like some more funny 404s

http://fun.drno.de/404/

Brilliant, thank you so much for an article which sorely needed to be written, so much so in face that after reading it, I went and followed ‘most’ of your advice. Check it out:

www.irregularactivity.co.uk/aaa

I’m so much happier now and my users (the one’s that are always getting lost), can have a laugh, but also see what recently happened on the site, so hopefully a few will get pulled back into reading more. Great stuff.

I don’t know…posting this before doing his own seems smart to me. He gets feedback on his suggestions now (such as removing the 404).

I have a personal dislike of rambling “funny” 404’s. Fair enough, add some humour but please don’t make me read a solid paragraph of “Oh you’ve lost your way have you?” to find out the problem was a 404/moved page.

Hey Mark, I didn’t take your comments as harsh, altho they were a bit bluntly stated. Nonetheless, I appreciate the pointers. Sure enough, there were some glaring missteps errors that needed to be tended to:

  • The tabs should look more like tabs now rather.

  • The tooltip that appears when you hover over the Marketplace link has always advised that the link opens in another window. I’m working on a better (in-site) solution…

  • 2Dolphins is purely a personal not-intended-to-turn-a-profit site. I’ve replaced the “Contact Us” tab/page with an “About” tab/page to provide a bit more description regarding the site its purpose.

Comments welcome!