How to Add a Custom 404 Error Page on Your Website?

Howdy readers, Have you added a custom 404 page on your website? I know your answer will be ‘no’. No need to worry at all. Today in this article I will tell you how can you set up a custom 404 error page for your website. The process looks tough to set up but it is not the case as you think. This is just a 4 step process.

We will see it how this can be done easily using .htaccess file. You might know there is .htaccess file in your website root folder. We will just edit them to fulfil our purpose.

Some of you might hesitate to look into your .htaccess, In that case, you can contact your hosting provider or you can just drop me a mail at admin@okeyravi.com. I will do the set up for you.

Here is the list of hosting providers which I recommend to my blog readers, clients and YouTube Subscribers.

Why a 404 page not found error occurs on a Website?

Have you ever thought what will happen when you share your blog link to somebody with a spelling mistake? Which page will open when they open the shared link.? What if you visitor search something on your site which is not there? What pages will you show them at the moment?

So, we can take this in a scenario

Scenario 1 – Visitor looks for page on your website which is not there

They will get 404 Page Not found Error Page

Scenario 2 – When a user tries to open a broken link of yours

The user will get 404 Page Not found Error Page

Scenario 3 – When somebody tries to open a incorrect URL

They will get 404 Page Not found Error Page

Scenario 4 – When somebody search a wrong product on your website

Sorry, but nothing matched your search terms. Please try again with some different keywords.

Looking at the above scenario you can imagine how cringeworthy it would feel when they found an empty page with ‘404 page not found’ tag. This doesn’t left a good impression of yours.

This is the prime reason for writing this post. I hate “the page you are looking is not existed” like errors. This will help you to create and set up a custom 404 Error page for your website.

How to create a Custom 404 Error Page on your website?

There are some simple steps which you need to follow to set up a custom 404 error page. Let’s have a look at that.

1. Create a custom 404 page

This is the first thing you need to do if you want to set up a custom 404 page for your website or blog. You have a create a page which you want to use for 404 error page. For this, you can use page builders like beaver builder or Elementor.

If you know Html, CSS or PHP very well then you can develop a custom 404 error page by itself.

If you are looking for somebody to develop a custom 404 page for yourself then you can contact me at admin@okeyravi.com

Let’s suppose you have created a custom error page named page-not-found.html. I will use this page later in this article.

2. Look for .htaccess file in your root directory

You can easily find a .htaccess file in your root directory. A root directory is normally a public.html folder inside File Manage in cPanel.

So, to access your root directory. Follow these simple steps –

1. Open cPanel (https:domainname.com/cpanel)
2. Login to Cpanel
3. Navigate to File Manager
4. Open the public.html folder in case of single website hosting or open the relevant folder in case of multi-site hosting.
5. Look for the .htaccess file
6. If you can’t find the .htaccess file. You need to turn on the hidden files option. To enable it, follow the steps given below.
8. If there are no .htaccesss then create a file in the root directory and name it as .htaccess.

Turning on hidden files settings in cPanel

Sometimes it will happen that the .htaccess files will not appear in your root directory. In this case you need to turn on hidden files settings in cPanel. To turn it on follow the steps provided below.

1. Login to your website cPanel
2. Navigate to File Manager
3. You can easily find a settings icon on the top right corner. Click on that
4. Now find the Show Hidden Files (dotfiles) option and check it
5. Click on Save button
6. Now you can easily find the .htaccess file inside your root directory

3. Finally Editing the .htaccess file to setup the custom 404 page

This is the final step. After performing this you can take a power nap. As you would have performed an important task which is beneficial for your website in many aspects. I will try to describe it later.

So, now to finish the custom 404 error page set up, edit your website .htaccess file and write the codes given below at the last.

ErrorDocument 404 /page-not-found.html

Here /page-not-found.html is the full path to the new custom 404 page that you’ve created in step 1.

With this line, we’re sending guidelines to the server that in case of 404 error scenario, return this file to the browser.

You are done with the settings here.

4. Test your custom 404 page set up

To test it try to look for a page that does not exist on your website. You should get your custom 404 page that you denoted in the .htaccess file.

Or, simply search for an incorrect URL of your website. This should return the custom 404 page created by you. If it doesn’t then double check the path at .htaccess file.

Benefits of creating a custom 404 page

benefits of a custom 404 page depends on person to person. yet, i am defining some of them to open your mind about this.

1. You can increase your pageviews just by adding some good post links on custom 404 error page
2. You can increase the number of sales by adding some product on your newly created custom 404 page
3. Even you can use custom 404 pages as a lead generation page
4. You can use this page a vote page to know more about your visitor’s interest
5. Promote your videos and products through this page
6. A custom 404 error page will help you to reduce bounce rate and increase website engagements which is beneficial for website SEO and SERPs ranking.

What you shouldn’t do with 404 pages?

• Never redirect 404 errors to your home page. That’s confusing to your visitors. They have clicked a link thinking they’d get to their relevant content and you are sending them to irrelevant content with no explanation.
• Redirect 404 errors to another web site. Augh! Why do people even think? Is that’s OK?!
• Never send 404 errors to a Flash page.
• Send 404 errors to a page with a registration form that has 25 fields. I’m not making this up…Lol, What do you think people are a fool out there?

Conclusion

The story and the flow of your website will not be completed if you lead your website visitor to a dead end like 404. There are so many creative examples for you to get inspired from.

So, create a simple and interesting custom 404 page for your website and enjoy it s benefits. as, having a great custom 404 error page means keeping more visitors on your site, and selling more stuff, getting more leads, etc..

If you have any query or suggestions feel free to comment below.

Thanks for reading.

Have a good day!

Read Next – How to add a custom featured Image in Blogger?