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?
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.
Step 1: Are you using a website builder like Squarespace or Weebly?
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!
Step 2: Create your custom 404 page in HTML.
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”.
Step 4: Edit .htaccess file
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.
Step 5: Make sure the path is correct and 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.