What is a “http error 404” and how can I fix or customize it on my website?

404 error

You’re looking for something on Google or you come across a post on social networks and when you click on it, you get a “http error 404” or “File Not Found” warning instead of the content you were hoping to see.
Has it ever happened to you, too? The truth is that this is a very annoying thing. But, unfortunately, more common than you think.
For, running into a warning that a page doesn’t exist is one of the most frequent problems we may encounter when searching the Internet on a daily basis.
This error 404 is both annoying for the experience of your users and harmful for your SEO positioning. Since, in addition to giving negative signals to Google, you may be losing your site visitors by not finding what they were looking for.
However, this is something that can be repaired or you can choose to redirect the user to another URL of your convenience, thanks to a well optimized 404 error page (as you will discover later).
I insist, this problem now occurs very frequently on almost any website. Without going any further, on our own blog, we are currently working to try to minimize it as much as possible.
And, to better understand the magnitude of this type of problems, we will start by reviewing the definition of “http error 404”, and later, we will explain how to find and solve them.

What is a 404 error or “file not found”?

An http error 404 or “File not Found” is the status code that returns the server of your Web site to the browser from which users try to access a specific URL of your domain that, because of the problem, could not be found and, therefore, there is no content to show the visitor.
In other words, since the page to which the URL leads does not exist, because of a broken link, because the syntax of the URL is misspelt or because this page does not directly exist.
We must never forget that any item or character of a Web address that does not coincide correctly with the original, will send users to a different one. In this way, if this other one does not exist, this warning will be generated.
This is the main reason why it is so important to personalize this page.
In other more technical terms, this means that the browser has been able to find the server where the domain is hosted, but nevertheless, it has not been able to find the exact Web address or URL you are trying to access.

So, if my Web presents a warning of this type, how can I provide a solution?

Bearing in mind that you have just understood the exact definition of this type of warning, it is obvious that, if you are currently suffering from it or have ever suffered from it, you want to put an end to it, given the damage we will tell you about later.

How to solve an HTTP error 404 and how to customize your “File not Found” page?

As explained to you in the definition, this is an HTTP status code, which indicates that the host has been able to communicate with the server, but that there is no resource that has been requested.
Do you want an example? Here it is: if you try to access the URL “http://wikipedia.org/xyzjk”, you will find Wikipedia, but almost certainly its server will return a warning page with this HTTP code, which we are talking about in this guide.
This problem should not be confused with “Error 500 or Web Server not found” or other similar ones, in which it is indicated that a connection could not be made with the server where the domain of the Website we are looking for is hosted.
In short, the definition is clear, it is an incorrect http state code and must be corrected, ie, if a URL does not exist is because it has been removed by the creator of the Web or because the user enters the URL wrong. But, let’s look at this in more detail:

Why do these 404 errors occur when accessing a page?

Imagine that you intend to enter a physical store during working hours and that when you try to do so you find it closed without a “we’ll be back” sign. That can create frustration, can’t it?
I’ll give you another example: you access that store, but after a while, you see that no one attends to you, … the only option you have left is to go where you came from, thus discarding the idea of buying that product.
This simile is a representation of what happens when a user finds this type of error in a Web that is not personalized and does not offer you navigation alternatives.
This doesn’t have to happen to you, because although these notices are almost inevitable to have them on the page, as you’ll see, they can be solved and reduced to almost 100% in a very simple way.

What if I can’t completely solve this problem?

In that case, you have to have, as I say, a well-customized page so that the user does not do the same as in the example of the physical store I told you earlier.

Reasons why these 404 status codes are produced in Google

These notices occur for a variety of reasons:

  • The owner of the site has removed the URL you want to access, so it no longer exists. This generates that search warning every time the user or Google tries to access that deleted URL.
  • The user, when entering a certain URL in the search engine, writes it incorrectly. And since this address has never been registered, it is impossible to access it.

Consequences of a 404 http error appearing on your site

It is not good to have this type of ads within a Web for several reasons:

  • It generates a lack of professionalism and rejection in the user: if he does not find what he is looking for, it is very probable that he will close the tab and go to the result of the competition if you do not offer him some alternative.
  • Loss of followers or sales: if you do not offer the user, once you access the wrong page, a menu to move through, a button to access another part of the web as an alternative, a search engine or another similar product, you will be losing sales (and even more if it is an eCommerce).
  • Perjudices at SEO level: Google does not like them, because it thinks about the user experience and wants everything to work perfectly.

In addition, if Google spiders detect these “drawbacks”, they will lower your domain in the SERP results and, if the user accesses and leaves, there will be a rebound, so it will produce a double damage at SEO level.
In these cases, assuming you work with WordPress, having a quality template installed and that by default has a warning page of this type, configured and explaining to the user what has happened, is very important.
In this way, it is enough for the user to understand why he has not been able to access the information he was looking for.
Otherwise, you have to take measures and above all, you have to ensure that your website has as few errors as possible.
Do we see how to achieve this?

How can I put a solution to 404 errors inside my website?

To detect this type of pages not found, there are several tools like Screaming Frog or the Google Search Console tool itself. I recommend both of them, as they offer very accurate data.
Screaming Frog is a free tool (up to 500 URL’s), which will analyze your site internally, showing the status codes 200 (correct) and 404 that, for some reason, are not correct pages.
One of the main reasons why a Web can generate these so-called “File not Found” from the beginning is not to remember to check the option in WordPress settings to discourage search engines from indexing content.
When a person creates a site, they can make URL changes or remove pages they originally thought they wanted, if that box is unchecked, Google will have indexed those pages.
So you, when you remove them later, already have problems of this type.
What do we do with these errors? There are several ways to fix them, something I’ll tell you about below:

How do I remove a 404 error from the Google Search Console?

Using the URL’s removal option of the Google Search Console tool has a drawback: doing so by this method, these non-existent pages reappear after 3 months.
In addition, until Google gives the order to unindex, these status messages will continue to appear in search engines.
You can see in a short time using the command “site:tuweb.com” if those URL’s you have given the order to unindex have disappeared or not.

To perform this process, you have it very easy:

  1. Go to the Google Search Console option “Tracking > Crawl Errors”, in that option you will see these ads that your website is generating.
  2. To remove them, you will have to copy each URL one by one and simultaneously access the other option “Google Index > Delete urls”, once you insert it in the field, click on hide temporarily.
  3. Now you will be able to select the URL’s of the previous option and mark “how solved”.

Don’t mark it as fixed without removing that URL first. My advice is to mark it as deleted and it will only make it disappear from the warning box.
When you have all of them removed, it is normal that some time passes and that most of the bugs of this typology appear again.

What happens if you access Search Console and you have thousands of 404 errors?

Imagine now that you have to carry out this process one by one when a site has thousands of problems of this type.
To avoid this, I leave you this video where you can see how to remove these “http error 404” massively and automatically and, this way, you will understand the process of removing URLs in Search Console.
Google Search Console is a fantastic tool that you should check periodically, to see if there are new problems of this type.
I leave you another alternative to deal with “happy” notices or problems:

Perform a 301 redirection

This solution is quite used and Google likes it, but you must study if you want to do it and keep in mind that the information of the new URL to which the content will link is related and fits well in the context of the “destination page”.
Imagine that a URL no longer exists and it talked about “the best places to go on summer holidays”. At the same time, in your blog you have a post about “the best places on the beach”.
Making a redirection to this other content does make sense.

When in doubt whether to remove or redirect, you have to see if the old URL has links, visits, is moderately well positioned in Google and is interested in applying that redirection.

It is not about redirecting for redirecting. This action has to have its logic. Don’t link everything to the “home”, if you don’t have a similar page; or don’t redirect a post to a product category, for example, by transferring authority.
Do it in a way that makes sense.

In cases like this, how can I do this kind of redirects?

The 301 redirects, for examples like the previous ones, in which you want to avoid a 404, can be done in two ways:

  • Manually within the htaccess of your hosting panel, using the piece of code:
    Redirect 301 /best places-vacations https://tuweb.com/mejores-lugares-playa
  • Using a plugin such as “Redirection” for WordPress. It detects the redirection automatically since you only have to take care of including in the assigned field the new address to which it will point and ready: the old URL will already have a destination.

As you can see, it is not good to have 404 errors in your Web, but I have already told you that having them is almost inevitable, so if in addition to having that problem, your site is designed so that the user does not leave it and perform some kind of positive action, much better.
If you have already taken the decision to clean up this type of negative ads, you have to prevent more appear, and if they occur, you have to have a well-designed custom page.
This is fundamental and you have to be clear about it.

Why is it important to have a 404 error page design?

If the user comes to your site somehow hoping to find information or a product and accesses an unaddressed URL that doesn’t even show any warning and instead accesses a blank page (File not Found) without a “sad” search engine, you’ve let that user or customer slip away (probably forever).
not found
There are templates that by default show this error to the user and offer alternatives so that the user does not abandon, as is the case of including a search engine. In certain cases, this may be more than enough, but sometimes you need something more.
In this URL you can include actions that can be very interesting, such as showing your most popular content, the latest articles published in the blog of your online business, a product information, videos, contact form, subscription bulletins, etc..
But watch out, don’t abuse by putting sales products if it doesn’t proceed, or the result could be the opposite to the one you are looking for…

Examples of well customized “error 404” pages

A detailed error page can tell a lot about your Web site. Look at these examples of a “HTTP error 404”.
Would you abandon the page or browse it? That is, do everything possible so that the customer never leaves the domain he is browsing.
These are some of the best examples:

“Vueling”

404 vueling
Vueling personalized page 404

Vueling takes it humorously and uses the error page 404 to show different destination options such as home, look for a flight or go to the contact page.

“Angry birds”

404 angry birds
Angry Birds Personalized Page 404

 
The web of games for the mobile angry birds shows a funny image with a simple button of access to the Home.
The Amazon website makes the same option of access to the home page, is not the case of Coca Cola for example that for some reason makes the mistake of redirecting directly to the Home.

“Lego”

404 lego
Lego personalized page 404

The toy company makes clear to the visitor the error that has happened on its website.
In this case, it uses its own toys to indicate that it has not been able to find what you were looking for. The less original!

“Pixar”

404 pixar
Pixar personalized page 404

The Pixar guys also use the commented technique quite well, since they have totally personalized this URL, through an image where you can see their character, which symbolizes what happened.
They give you the ability to navigate through their main menu.

How to create a personalized 404 error page?

To do this process there are several ways to do it: technically or through a plugin. The last is the easiest option and the one recommended for speed and results.
If you don’t have some coding knowledge, the best thing is to opt for the plugin and you’re done. Here’s how to design this type of pages and adapt them to your website.

How to design the 404 error page using your hosting control panel?

If your template does not include by default the “404.php error page”, it is necessary that at least it offers a warning to the user and not the “File not Found” error, which we have talked about before and which causes such a bad image in the reader.
To do this you can create a simple warning design from the control panel of your usual hosting service.
This, unless you know a little bit of HTML or CSS code, you are going to find it difficult to give it a very attractive look, but at least you will avoid that blank page that can confuse the user.
To perform this process, access your server, take as an example the cpanel administrator (depending on the server may be another) and access the option “Advanced > error pages”.
Choose in the tab the domain that you are going to work that personalized page and, in the simple HTML format, you will be able to create it.
Simply click on save and that’s it, an error page will have been created on your website and you can test it by entering the wrong URL in your site’s search engine.
For example: https://yourweb.com/jsjdbcbdhd
When you access the result of the new page created, you will see that the design is very basic, but you can customize it a little more at user level if you access the file manager option.
To do this, select the folder in question created and, if you click on “edit in HTML”, you can customize it a little more through colours, fonts, buttons, etc..
With this function, you will give it a better look.

► What do I do if my template already includes a “404.php” file?

If your theme includes this folder, maybe more than enough to be calm since the user will usually see a warning that the destination does not exist and will have navigation alternatives.
404.php
Also, make a test with an erroneous URL, to see what shows your Web so you can check if you really have this folder.
To customize it, from the WordPress administrator, go to “Appearance > Editor” and locate that folder. You can edit it to make it look better all you want.
Performing this task is complex, as you need to have knowledge of “php” language, but in some templates you can modify the text simply by changing the line.

Whenever you make these kinds of changes in the editor, you should make a backup first, especially if you don’t have advanced knowledge.

► How to customize the “error 404 not found” page with a plugin?

If the other two methods seem complicated and you want to get a very attractive design in a simple way, a WordPress plugin such as “404 page” could be the solution.
This is undoubtedly the easiest and most customizable option for any user who does not have advanced knowledge or wants to save time and work.
The best thing about this software is that it doesn’t have additional requests to the server, so it won’t hurt the loading speed of your site.
This will allow you to create a page with the WordPress editor. Or, better yet, it allows you that once you have designed the page you like with a Web builder, you can assign it as the destination when the problem we are dealing with today happens.
plugin 404
As you can see, this gives you a lot of possibilities, since you will be able to do whatever comes to your mind in a simple and intuitive way.
Once you have your page created, the operation is very simple.
Install and activate the plugin and you will simply have to assign the newly created page in the options tab. If you try it and enter the wrong URL now, you will see the design created and goodbye to the problem!

Conclusion

What did you think of this guide on this type of problems in a Web?
As you have seen, creating a page of this type, configuring it or designing it is a task that must be done “almost by obligation”.
If your site has an error of the type “404 Not Found” with all the more reason you have to find a solution using the tips in this tutorial.
In addition, it is a very good opportunity to offer the user other alternatives when he accesses your site and does not find what he is looking for, move through your Web so that he does not leave it without doing something.
You already know how to configure your page, design it in a simple way or give it imagination!

Have you noticed if you have created this 404 error page on your website or blog?

Do you have it very personalized? Leave us a comment and show us yours, so that other users can be inspired.