How to make a custom 404 error page for your website
…and why
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.
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.
Step 6: Did it work? If not, update the settings of your server
In my case, since I am running my website locally on Mac, Apache does not allow for custom .htaccess file. I had to go into Apache configuration and edit the settings.
Here is how I did it for anyone who is interested and following the same way:
Voilah! That’s pretty much it for creating a custom 404 page. It should be running perfectly for your website. If you’re still running into issues, mess around with how you can change configurations of your server to allow for custom 404 pages.
The story and the flow of your website is incomplete if you lead the user to a dead end like 404. There are so many creative examples for you to get inspired from. Remember to keep it simple, yet interesting. :-)
Let me know if you guys have any questions or need more help regarding this. I hunted around trying to solve this for a day until I got it working and thought I’ll share.
