How to Re-Direct to your own 404.html page

It can be a mis-typed URL or a broken link that triggers a 404 error page which is server’s response to a page that does not exist. For those who aren’t familiar of how it looks, have you seen a page like this before?

Image for post

Looking at this, you can imagine how cringeworthy it would feel like as a user to suddenly drop on an empty page like this. Let’s break this down into pieces real quick before creating our page.

Scenario/problem: User is attempting to look for a page that does not exist.

Known context: 404 page not found.

Solution: A friendly page informing the user of what happened in simple language and tell them what to do next.

Therefore, to ice the great UX that you’ve been iterating upon for your website, make sure that you take of the 404 case.

Let’s dive right in.

If yes, then it should already have a 404 error page setting which you can use directly to upload an image and add buttons. You’re pretty much done here.

In my case, I had my website running locally. If you’re like me, move on!

Once you have created the page continue to the next step.

Step 3: Look for “.htaccess” file in the root directory of your server

FTP into your server and find this file in the root directory. You’ll need to edit it. If you can’t find it, then you will have to create it. Name it “.htaccess”. Nothing before and after. Just “.htaccess”.

Open it and add the following line:

ErrorDocument 404 /not-found-page.html

…where /not-found-page.html is the full path to the new custom 404 page that you’ve created.

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

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.

  • 0 کاربر این را مفید یافتند
آیا این پاسخ به شما کمک کرد؟

مقالات مربوطه

How do I add a Favicon to my site?

A favicon is a good way to add some life to your site. This icon will display in the tab the site...