How to Configure a Custom 404 Error Page — Apache Server Edition

A 404 File Not Found page — also known as a 404 error page — is a web page that lets a user know when the page they are trying to access cannot be located. A custom 404 error page is a 404 error page that is crafted thoughtfully with user experience in mind. Custom 404 error pages are put into place to fend off confusion, explain the situation, and offer thoughtful next steps that keep the ball rolling.

To get a custom 404 error page up and running on your website, you’ll need to do some communicating with your server.

How you go about getting a custom 404 error page setup on your server will vary greatly depending on your server type. This article addresses how to set up a custom 404 error page on an Apache server.  

Getting a custom 404 error page up and running on the Apache Server is a five-part process:

1. Design an on-brand custom 404 error page.
2. Publish your custom 404 error page.
3. Determine what type of server you are using, or if you are using a CMS like WordPress.
4. Use your public_html folder and .htaccess file to tell your server to deliver the 404 error page anytime a request is made for a web page that doesn’t exist.
5. Test it! Make sure your 404 error page is live and working as expected.

In this post we cover parts 3, 4 and 5 of this process; you should already have parts 1 and 2 done. If you haven’t designed your custom 404 error page yet, read How to Design a 404 Error Page That Saves a Sale for strategic inspiration.

How to Determine Your Server Type

Your website is hosted on a server that dishes out web pages when people navigate to URLs within your domain. There are several types of servers.

First, the easiest one: If you are using WordPress, then you know you’re using WordPress and you should read about WordPress 404 error page setup; this Apache server article will not help you. Similarly, if you happen to be using Microsoft IIS, then you should read our How to Configure a Custom 404 Error Page in Microsoft IIS Server post.

If you aren’t using WordPress and you don’t know what kind of server you are using, call your server provider (the people you pay to host your website every month – like BlueHost, for instance), and ask them. While you have them on the line, make sure to also ask them if it is possible to set up a custom 404 error page; most server providers allow you to do this, but not all.

If your server provider tells you your website is hosted on the most widely used Web server — the Apache server — then read on!

Proceed with Caution!

If you are reading this blog post, I am assuming that you don’t have the luxury of asking an IT department to set your custom 404 error page up for you. If you do have an IT/systems department to refer to, by all means, ask for help! IT folks love servers and lines of code that talk to servers, and they effectively know how to handle both.

If you’re going in on your own, it’s smart to make sure you have your entire website backed up before you make any changes to code at the server level. The amendments we’ll be making to add a custom 404 error page are minimal, but it’s always better to be safe than sorry when it comes to tinkering with server-side code.

How to Tell Your Server to Deliver the 404 Error Page

This blog post is written to help folks using the Apache server add a custom 404 error page to their website. Like most processes, there’s inherently more than one way to do this. The following five-step process is the most universal method, as it only requires FTP access to your server and a text editor, like Notepad++ (on a PC) or TextEdit (on a Mac). (It’s worth mentioning here that Notepad [the default text editor in Windows] and Notepad++ are not the same thing. If you’re using a PC, we recommend downloading the free Notepad++ text editor; using the standard release version of Notepad may cause errors if the server is running Linux.)

Step 1: Locate or create your .htaccess file

After identifying that you are using the Apache server, the first step is to locate your .htaccess file.

A .htaccess file is a file that communicates how and when your server should deliver specific information to your end user. In this case, specifically, when your server should deliver a fancy, custom-made 404 error page. Your .htaccess file should already be in the root directory of your website.

To access your .htaccess file:

• Connect to your server using an FTP editor like CyberDuck or Filezilla.
• Find the folder that contains your public website files. Public_html is a common name for this folder. While your folder may or may not be named public_html, we will refer to this folder as the public_html folder throughout the rest of this tutorial.
• Locate the .htaccess file inside the public_html folder.

If you see a .htaccess file, move on to step three.

If you don’t see a .htaccess file, make sure that your FTP is set to show hidden files (notice that period in front of the .htaccess file? That period means your .htaccess file it is a hidden file.). To show hidden files using Cyberduck, go to the View dropdown, then choose Show Hidden Files. To show hidden files using Filezilla, go to the Server dropdown, then choose Force Showing Hidden Files.

If you force your FTP to show hidden files and you still don’t see a .htaccess file, it means you don’t have one and you will have to make one. In that case, move on to step two.

Step 2: Create your .htaccess file (if you don’t already have one)

Fair warning: While any novice can create a .htaccess file (we’re going to show you how right here!), if you have an IT department this is a really, really good time to bring them in the loop. If you don’t have an IT department, now would be a great time to create that website backup if you haven’t already!  Your .htaccess file is going to communicate critical information to every page of your website, so it’s smart to have a backup plan in case things get a little haywire.

To create an .htaccess file, use a text editor like Notepad++ on a PC, or TextEdit on a Mac. Name the file .htaccess — and don’t forget the “.” It needs to be named .htaccess (periodhtaccess), not just htaccess. To keep your .htaccess file clean, make sure your text editor has word wrap disabled, and that it is using UNIX-style line endings. Also, make sure there aren’t any file extensions added to your .htaccess file when you save it. You want to choose All Files (not Text or any other file type) from the Save As Type dropdown menu and save to the Desktop.

That’s it! After you save you’re done creating your .htaccess file. The file won’t do anything until you’ve uploaded it to the public_html folder of your server via FTP but, to streamline the process, we’ll wait until after we amend the file (as outlined in step three) to upload it to the server.

Step 3: Use a text editor to edit the .htaccess file

Using your text editor, add this one line of code to your .htaccess file, followed by a blank line:

ErrorDocument 404 /custom-404.html

There’s four parts to this line of code: [the phrase ErrorDocument] [the error number] [the absolute URL of the web page where custom 404 content lives] [the blank line that follows the line of code]. Make sure you carefully include all four elements (No typos! No exclusions!) and make sure you replace the placeholder “custom-404.html” with the actual URL extension where your custom 404 error page lives.

The URL that you put in the ErrorDocument directive needs to be a:

1. Relative URL — no http and no domain name.

2. Static file — meaning Apache can serve it directly (no proxy, no application server, etc.); otherwise, Apache will assume the file is on another server and issue a redirect to the browser to go there.

It’s this one line of code that tells your .htaccess file to deliver a custom 404 page when someone asks for a web page that cannot be located.

Step 4: Use FTP to upload your amended .htaccess file to your server

Make your .htaccess file alliiivvvveeee (like Frankenstein) by using your FTP to upload your amended file to your server.

Once it’s uploaded to the root directory of your server, it’s live and your 404 error page should be working (assuming you’ve made your 404 error URL live, as well).

Step 5: Test it! Make sure your 404 error page is working

The final step in every optimization process needs to be testing. We never set it and forget it in our industry. To test if everything is in working order with your .htaccess file and your new custom 404 error page, use your web browser to navigate to a page on your website that you know doesn’t exist. For example: www.YourWebsite.com/chelsea-is-awesome.

If you see your custom 404 error page, everything is working! You have succeeded!

If you don’t see your custom 404 error page, something is wrong. Try to isolate the problem with these troubleshooting tips:

• Do all the other pages on your website work? If yes, that means the problem has to be with your 404 error page URL or your .htaccess file. If no, you have created a bigger issue and may want to revert back to a backup version of your .htaccess file.
• Can you spot any typos in your ErrorDocument line of code?
• Did you add a blank line after your ErrorDocument line of code?
• Did you disable word wrap when you created your .htaccess file? Is your ErrorDocument code on one single line? If you are using Windows, is the document using UNIX-style line endings?
• Is your .htaccess file saved as .htaccess.txt? It shouldn’t be. It should just be .htaccess with no file extension. (The trick is to choose All Files from the Save as Type dropdown when you save the file in your text editor; make sure no extra file extensions get added on.)
• If you navigate directly to your 404 error page using the absolute URL, does it work?

If none of these troubleshooting tips uncover your problem… now might be a good time to seriously consider hiring that contract IT guy or gal.

You Can Do This!

Even if you are a UX minimalist — no matter how big or small your company is — you need to consider a properly configured 404 error page a technical SEO essential. You absolutely can do all the steps outlined in this post, from locating your hidden .htaccess file or creating a new one, to writing a line of code that works. Think of it like baking a cake: you have the recipe, now you just need to put all the ingredients together.

Just follow this five-step process:

1. Get confirmation that you’re using the Apache server and the thumbs up to proceed with a custom 404 from your server host.

2. Work with your web designer to create a custom 404 error page.

3. Make your 404 error page live.

4. Use your public_html folder and .htaccess file to tell your server to deliver the 404 error page anytime a request is made for a web page that doesn’t exist.

5. Test, test, test.

Have questions? Ask in the comments section below.

Chelsea Adams Brooks is a long-distance cyclist, aspiring cob house builder, schema/analytics/algorithm obsessor, and a former senior content writer at Bruce Clay Inc.

See Chelsea's author page for links to connect on social media.