Have you ever encountered the Not Found (404) error on any website? Do you know you have an opportunity of converting those visitors landed on not found pages? This article will help you take advantage of 404 page.

If in case you don’t have setup the Google analytics to track the 404 page. Here is an official blog setting one up for your website.

If you know correctly the web works on HTTP protocol. The web server will return an appropriate HTTP status code for each of your resource request.

There four basic HTTP status code you may need to know and they are 200 – Found, 301 – Moved permanently, 404 – Not found, 500 – internal server error. The 404 – not found and 500 – internal server error are two of the most displayed status codes.

The only difference between 404 and 500 is a web server will display the assigned error page in case of not found 404 error while there is no server generated output displayed in case of 500 as the webserver is experiencing some configuration error.

A 404 can occur for variety of reasons like the visitor is asking for a resource that never existed on your website, request for a page/resource that you have deleted, or request for a resource with error or typo in URI.

There are some cases where you want to delete those outdated pages, posts, and media resources. And having 404 errors in this case is a natural process. There is nothing wrong with it.

If you do a bit of research you will find majority of the websites have a static 404 page in place. In any case of not found error the same page will be displayed. If the designer is experienced enough, he/she might have placed a small navigation to home link/button.

How about running an extra mile with your 404 pages? How if make your 404 page a little bit interactive? Let’s explore the possibilities.

Here are the four ways you can turn your static 404 page into more interactive one:

1. 404 page with most relevant link user searched for
2. 404 page with your best free offers
3. 404 page with link assistants
4. 404 page with links you want to promote

01. 404 page with most relevant link user searched for:

Knowing what your visitors was searching for on your website is the key. Serving the user with the right links to best matching resources would probably the best user experience you can deliver to your visitor.

The question may arise how would you know what user was searching for and how would you suggest the links based on his search?

Well, the solution may look complex at first but it’s not so complex to develop. If you are a developer you would know that you can extract the requested resource string and make a regex check against that resources you have on your website.

For instance you are offering speaker repairing service for all majority of the audio manufacturing brands. Bose X1 speakers for instance is there in your list. But a visitor come to your site with Bose X10 as a requested resource. There are no speaker named as Bose X10, so naturally it must not be in your list.

The possible thing to display on your 404 page is list all the BOSE speakers you repair. And if possible make those BOSE X series speakers listed first.

This might be the best way for a user to navigate to a proper page in spite of being landed on a 404 page. Chances of converting that 404 page is very high. You helped him navigate to actual page.

Additionally this will also help you lower the bounce ratio of your website. If you don’t show the suggested links to best matching page, there are high chances that the visitor will navigate back or go away from your website.

02. 404 page with your best free offers:

Let’s consider that showing the most relevant link is not quite possible for your website. Or you don’t want to go into much of coding stuff. This might be the best option to start with.

When a visitor land to your website’s 404 page, show them a message that you are sorry that the resource he/she is looking is not available.

Just after the apology text show them the best offer running on your website. It might be like offering 5% or 10% discount on your hottest running product, or offering them something valuable for free in exchange of an email.

This might be the best way to keep all those visitors engaged with other product or offerings who landed on 404 page!

03. 404 page with link assistance:

While you can always display the navigation on the 404 pages. But there are very chances that a visitor goes to your navigation panel, identify the page he would want to visit and land on that page! Majority of them just leave.

You can have a 404 page design in such fashion that contains all the important links to various resources of your website along with a clear 404 error message.

This might help a user understand that he landed on the wrong page. It’s 404 but he has a list of links displaying all the important resources on the website which can he can visit.

04. 404 page with links you want to promote:

It’s damn simple, just have the links you want your visitors to visit on 404 pages. I wouldn’t suggest going this path alone. May be mixture of suggestion 03 and 04 can work.

Keeping the links of the pages you really want to promote on 404 page will definitely help you grow number of visits on those pages. The downside is that you are generating more unconcerned visits that might contribute to high bounce rate.

The only suggestion I would make here is that if go along this path please have at least one offering that is either free or very generic in nature. Meaning anyone would be able to relate to the offering you are making. It’s either very affordable or free that will help you improve the engagements.

Popular Examples of Creative 404 Pages

If you are looking for some inspiration while creating a 404 page for your website, here are some of my personal favorite 404 page example.

Wufoo

Wufoo is one of the popular contact form integration service on the internet. Observe the overall theme of the page and the green button differentiating itself from the rest of the page!

The dinosaur represents the not found message, and have look at the CREATE A FORM FOR FREE Call to Action button. It clearly directing the user to press the button and take some action on not found page as well.

Instead of keeping the navigation on top, they used the selected navigation items under the CTA button.

AirBnB

See how AirBnB is representing everything right from a clear 404 message, not found illustration, and the navigation link under the tiny area!

A user who lost his way on AirBnB website would land to this page, this page has all the necessary direction (links) to send the user back to important page(s) and keep him engaged on the website.

Mail Chimp

Mailchimp very popular email marketing platform has a beautiful 404 page in place. They used the Monkey with hulk like styling applied to who seem get lost in a forest.

A user landed to this 404 gets a clear message with an illustration, a clear message followed by the illustration.

The best part is that they know that the use has lost his way, so he may find a search bar right after the not found message. User might be able to search for any resource he was looking for earlier using the search.

If search is not something prefer to find or locate a resource, they included a beautiful navigation right under the search bar!

Bitly

Bitly is one of the most popular URL shortening service with some cool features packed in like custom branding and click analysis.

Apparently they have a beautiful and meaningful 404 page in place! If you spend couple of seconds you will notice that the designer has kept the ocean empty. Meaning there nothing inside the water, which gives clear illustration of there nothing found for the requested resource.

No navigation panel kept on header. The page shows the error message, followed by the three simple and most basic navigation links on bottom.

To make things more interactive the designing team has made the wave effect on the event of mouse move. Visit the page to experience it.

Cooklet

The beautiful illustration of an empty plate at Cooklet makes the thing clear that the stuff you are looking does not exist.

The Oh no! Along with an empty plate convey the not found message. The interesting thing is they made the Get Back (javascript history back) action link and go to home page link available under the not found message.

Additionally, they keep the header with the search bar intact. Meaning a user who want to navigate other than the previous or the home page, would be able to locate resources easily.

Have I tested any of these?

Above is the image of my own website’s 404 page. Initially I had no buttons or links on my 404 page. It was a plain 404 page showing the error message, that it!

I added a button that differentiate from rest of the page’s elements and motivates visitor to press it. Pressing it moves user back to home page. The simple button helped me bring visitors to my website’s home page and keep them engaged on website.

I am planning to add more dynamic stuff soon my page that I’ve discussed in point #1.

Conclusion

Having 404 is a natural thing for any website. But taking proper advantage of the 404 page and convert those 404 visitors into customer is the real smartness. The discussed techniques will help you lower your bounce rate and improve the engagement.