How to optimize a 404 page

796 views
How to optimize a 404 page

“404 page” is an error page that every internet User might have visited at some point. This error page appears when the requested page does not exist. Nobody loves to see such a page, so web users naturally tend to leave as soon as they land on it. However, there are 404 page best practices that can help you to handle 404 error pages. In this article, we will  explain in details how to make a custom 404 error page to turn your lost visitors into loyal customers. You’ll find that creative web design can do miracles with professional web design services.

Grumpy Cat, the face of thousands of internet memes uses on 404 page

 

What is 404 page?

When the server cannot find the data requested by the browser, it sends the standard HTTP response code – 404 (Not Found). At the same time, “4” indicates problems from the web browser, for example, an incorrectly written URL, and “04” is a specific error from the 4xx group (in this case, “not found”). The server can also send response codes such as 400 Bad Request (“BadRequest”), 403 Forbidden (“Access Denied”), 410 Gone (“Page Deleted”), etc.

The most common 404 error appears when the user enters the wrong web page address. It also occurs when the URL changes, or when click on a link that has been deleted.

The appearance of the 404 error is almost inevitable for multi-pages, and in general, it is not reflected in any way on the ranking of the site. However, it is recommended to monitor the number and causes of its occurrence. This error might indicate some techical issues on your website. From our experience we faced CMS issues, bugs in WordPress plugins and bugs in Magento extensions which generated wrong URLs.

 

What is SOFT 404 error?

There are cases when the server returns 2xx (“successful request processing”) instead of the HTTP 404 response code. The page for the user may look different: with an error, with a small amount of content or completely empty. At the same time, its search engines will scan and index it, but in the future, this will not have the best effect on the ranking of the site.

How to solve problems with soft 404 errors:

  • for non-existent pages, as recommended by Google, the code should be 404 or 410
  • for migrated pages or those on which similar content is posted, set 301-redirect
  • don’t redirect a lot of non-existent pages to home or to any web page on your website

What you shouldn’t do is redirect the deleted or not found pages to the custom one, which will return the response code 200. Mostly they do it in the hope of retaining the link mass, however search engines disagree with this trick and mark it as soft 404 error. We recommend to contact our tech SEO specialists to solve soft 404 errors and to set up 301 redirects in the proper way.

 

How to prevent 404 page

When a web user encounters a 404 error, they become confused and since they have no idea of what to do, they naturally close the page and move to a different website. In order to keep the users on the site, here are some good practices to apply:

  • Say no to the default error. Come up with an original design in the style of your brand. The standard page looks grey and boring, it is uninformative and does not cause any emotions, except for the desire to leave the site.
  • Be polite to your visitors. Express regret that they did not find the information they need. (“We’re sorry you didn’t find what you were looking for”). Offer help in solving the problem.
  • Do not focus on technical details. A detailed description of the cause of the error will scare the user. A short explanation of what happened is more than enough. (ie: This page does not exist.) Just explain what happens instead.
  • Do not add extra content. In order not to confuse the user, design a page with as less information as possible.
  • You can leave the menu in the header of the site, or you can make it simple in the form of a list with links, leaving the most important (information about the company, catalogue with products, contacts, etc.). Offer in exchange similar or popular pages or it will be great to place an extra link to the main one.
  • Add a search string. A great way to keep a visitor who knows exactly what they are looking for.
  • Use relevant humour. Page 404 has long been a place for designers to experiment. Of course, creativity is encouraged, but with humorous ideas, so you need to be careful.
  • Do not forget about SEO. Reduce the number of internal links to 404 pages, and also eliminate the reason for the formation of incorrect URLs. You can track them in the webmaster’s panel of Google or by scanning the site with desktop programs Screaming Frog SEO Spider Tool or Netpeak Spider.
  • Give the user the opportunity to submit an error report. Make a feedback form or leave email support. So you can additionally track the appearance of broken links.

In general, the 404 error page should be convenient, with useful links to help the user quickly navigate and understand what to do next.

Interesting: there are online stores that prefer creative advertising. Instead of a beautiful illustration on the page, they rather placed discounted products. Lost visitors are offered free advice and even services.

Examples of 404 pages

The standard error display depends on the browser you are using. For example, it might look like this:

Default 404 page is the white page with big caption Not Found

On this page, there is nothing that would help the user to find the necessary information, or at least go to the main page. If you do not want to lose the next potential client, be sure to work on the design of this error page.

Here are ten inspiring examples of error pages that keep the users:

  1. Blizzard 404 page from Blizzard website. The broken glass symbolize page issue

  2. Pixar Pixar use a blue cartoon girl who is cring as a 404 page design. Aww... Don't Cry.

  3. GitHub GitHub use cartoon boy in a bear costume with text this is not the web page you are looking for.

  4. MailChimp MailChimp design their 404 page with animated horse who looks into a hole. We lost this page

  5. Amazon Amazon use the image of a small dog that looks funny

  6. ETSY Example of 404 page ETSY includes cartoon women who knitted sweater with three steeves

  7. Otterbox.com Example of 404 page Otterbox. Unicorns don't exist. Neither does this page.

  8. Paws Express Example of 404 page Paws Express with kitty who pushed a supermarket trolley that looks funny

  9. Good Dog Design Example of 404 page Good Dog Design

Final thoughts

So you can create the right way to make a custom 404 error page for your website. Don’t be funny, it’s not necessary. The first rule of good design for 404 error page is to be helpful for visitors.
Do you have no idea how to handle 404 error pages? Contact our experts.