Custom 404 Page? What is it and why you need one… like yesterday!

Filed under:
Tips & Tricks, Web Development/Design

Ever clicked on a link or mistyped a web address and suddenly you’re faced with “404 Error – Page Not Found?” Accompanied by a complicated message explaining the error or just a blank space?

It’s enough to make your eyes glaze over, fall asleep and next minute you’ve exited the page and turned on Netflix… or something along those lines!

What many people don’t realise is that a 404 page is prime real estate! It’s an opportunity to turn website deserters into potential leads.

Continue reading to find out what exactly a 404 page is and why without a custom 404 page you are missing out on this opportunity!

What exactly is a 404 page?

A 404 page is also know as an error page, it’s the page that lets a user know that the page they requested does not exist. That could be due to a broken link, a deleted web page or just a typo.

The message only appears when the browser was able to connect with the server, but the server could not find what it was looking for.

“If it was able to connect to a server how come it couldn’t find what it was looking for?” I hear you say.

First let’s look at basic URL structure…I’ll use my domain as an example www.shannonpayne.com.au/contact There are 2 components to this

  • the Domain Name
  • the Path

The Domain Name is “www.shannonpayne.com.au” and the Path is “/contact”
The Domain Name is how a browser connects to the server, it is your unique address.
The Path is what leads a visitor to a certain page stored within the server.

For example if you were to mistype the Path: www.shannonpayne.com.au/conact this would connect to the server however as the page “conact” does not exist this is when you would get a 404 Error Page Not Found message.

On the other hand if you were to mistype the domain name: www.shannonayne.com.au/contact you would get a broken link or you might even end up on a completely different website.

Mistyped Domain Name = broken link or different website
Mistyped Path = 404 page

Asides from accidental typos when trying to visit a website, sometimes you can unintentionally click on a broken link. This could be due to a typo on the website itself, or a discontinued product or a page that was once deleted.

By clicking on these broken links, again you will be redirected to the 404 page for that website.

Now I know what you’re thinking, “why don’t you remove all broken links” or “just be careful when typing in a URL”, and yes I agree 100% that should be done, and it’s something that most good web developers should be doing. However at times there can be links that are missed, another website might be linking to a blog post on your website that is now deleted and sometimes it just comes down to human error.

The point is, a 404 page is important and that’s why you should be taking advantage of the prime real estate it offers.

Enter “Custom 404 Page”

A Custom 404 Page is just that, it’s a 404 page that has been customised for your website.Instead of visitors getting a generic 404 page they can get an on brand page with a clear call-to-action (CTA) and reduce the chance of a lost client/customer.Must haves for a custom 404 page

  • “404” message – well duh, just because you can add a CTA doesn’t mean you should forget the reason people have ended up here. Let them know they have ended up on the wrong page, but not to worry you’ll help them find their way.
  • a search bar, ‘return to home’ button or sitemap – give visitors the chance to be able to search for what they were looking for, return to home or use the sitemap for guidance to continue on their way.
  • and last but not least… a CALL-TO-ACTION! …pretty self explanatory

I also want to make the point that this isn’t an opportunity for you to throw ten thousand products into a site visitors face, no – don’t do that! A 404 page still needs to send a message that the site visitor did not end up on their intended page, but you can definitely give them encouragement to head towards your latest blog post, or a new product you are trying to sell.

Ideas for CTAs you can put on your custom 404 page.

  • Direct visitors to your latest product or store.
  • A link to your services page.
  • Links to your latest blog post, if you want more traffic on the latest blog post.
  • An email opt-in to sign up for your newsletter.
  • A free download.

Whatever it is limit it to 1 (maybe 2) you don’t need to overwhelm your visitors. Imagine it… a 404 message, a search bar and a clear CTA all wrapped up in your awesome branding and you’re guaranteed to keep visitors on your website.

Have fun with it!

The best part about having a custom 404 page is that you can have a bit of fun with it!

Check out some of these companies’ custom 404 pages here.

Disney

Disney’s 404 page is simple and to the point, but it stays on brand with a bit of humour.

View it here: https://www.disney.com.au/404

BluePath

BluePath is a Data Strategy Company, they are on brand and showcase what they do by showing a map of reported crimes in Atlanta but then they also inflict humour at the end.

View it here: https://path.blue/404/

Marvel

Marvel keeps their 404 page theme as well, they have multiple screens so that each time you visit the page it will generate a new character. Head to their site and see what you get!

View it here: https://www.marvel.com/404

Steve Lambert

I love Steve Lambert’s, it’s so uncomfortable and awkward – but it works for his brand. Along with the big headline announcing it is the “most awkward 404 not found page on the internet” there is a video that goes for a few minutes (I think I tapped out at about 30 seconds), just telling you how awkward this is for you.

View it here: https://visitsteve.com/404

Omelet

Omelet is a creative company and it shows on their 404 page. I had to give them a mention for their egg pun… I love puns and you should too! Keeping on brand there is another effect that happens when you scroll on the page… go check it out!

View it here: https://www.omelet.com/error

Pixar

Like Disney, the Pixar website delivers a clear message but they stay on brand.

View it here: https://www.pixar.com/404

Twitter

Added 3 Sep 2022

A new addition! I stumbled across this fun 404 page this week and knew I had to add it to this list.

Car Wow

The last one I’ll share is from a car buying website in the UK. In addition to delivering a call to action they also have a fun interactive game for you to play! You can give it a go here.

View it here: https://www.carwow.co.uk/404page

As you can see, you can have a lot of fun with a custom 404 page, gone are the days of boring 404: Page Not Found messages. It’s time to win back site visitors and keep them on your website.

Have you come across a cool custom 404 page while browsing the internet, I’d love to check it out so share it in the comments.

Or if you’re interested in having your own custom 404 page, head to my contact page and send me a message!