28 January 2015 | Team Tamar

What Makes a Good 404 Error Page?

Despite a constant effort by most webmasters to reduce the number of technical errors that occur on their site; it is impossible to eliminate them all. Every now and then broken links will slip through the cracks or 301 re-directs will have problems and an error page will be presented to the user. What should be done is that if users do find themselves on a broken page, it is user friendly and gets them back to where they want to be within as few clicks as possible.

Personalisation is everything

A boring, bog standard page with “404 error” presented in massive letters with no customisation isn’t going to show your brand in the best light. Not only does it show a lack of ownership over the entire website, even when things go wrong, it focuses completely on the fact there is an error.

Don’t go crazy with making it creative

Keeping the above in mind, remember that you need to be smart about it. Filling the page with irrelevant animation or imagery, that has nothing to do with your brand and is only there to distract from the fact the page you’re looking for doesn’t exist defeats the point.

Call to actions

A creative and funny 404 is completely useless if there is no clear path to the rest of the site. If the user has to click ‘back’ to get away then you’ve likely lost them to a competitors site. It’s often advised to include the site’s main navigation bar into the 404, this way all the most useful links are there for the user to find the right page.

This isn’t only important from a user perspective, but from an SEO one too. If you can show search engines that there is always a clear path for visitors to take and any error is being directed away from, then your site won’t be looked at quite as harshly for having those errors in the first place.

Don’t blame the user

A common mistake many 404 error pages make is to suggest the error occurred due to the user typing in a broken link. The only time this is acceptable is when it’s done in a funny way, otherwise users will become frustrated with your site. The main aim of a 404 page is direct the user to a more relevant, existing page, which they may be reluctant to do if you put the blame on them.

Ensure the correct header response code

Sometimes a 404 page is presented but the header response code has been set as 200 (saying everything is ok) by the Webmaster; we call this a soft 404. Google will index these pages and can make assessing the actual number of site errors tricky. Always ensure the right response code is being presented to Google; you can test it using the “Fetch as Google” feature in Google Webmaster Tools.

Here are just a few great examples of 404 error pages that take into account the above:

 

www.benefitcosmetics.co.uk

Benefit Cosmetics 404

Benefit Cosmetics has made its 404 page match their branding and their unique style exquisitely. Not only have they customised the imagery and the message, they provide clear direction for the users to further explore the site.

www.eHarmony.com

eHarmony 404

 

Sweet but simple. This may not be the most impressive of pages but they’ve made it their own, it’s relevant, and there is a clear next step; login or sign up.

 

www.modcloth.com

ModCloth 404

Humour is definitely ModCloth’s strength when it comes to their error page. The imagery is funny and there is clear direction for the user; as a dog-loving office it definitely gets our approval!

 

www.titleist.com

Titleist 404

We absolutely love this 404 page on titleist.com. The brand specialise in gold equipment and think the background image is perfect; it’s funny, not overly complicated and perfectly relevant to their products.

 

www.lego.com

Lego 404

Anyone who knows us is aware of our passion for lego. It’s not the most creative 404 page, and it’s not particularly funny but it incorporates it fits perfectly with the brand and there is no confusion over the message of the page.

Team Tamar