No website works 100% perfect all the time. It is inevitable, that your visitors will end up clicking on a link that’s broken or expired. When this happens, they will get redirected to the 404 page.
The 404 page does two main things:
- It tells the visitor that they were successful in communicating with the web server, but the web server could not find the requested page.
- It prompts the visitor to go back to the working part of your website.
This is why your website’s 404 page is extremely important.
You might be thinking, why do you need the 404 page instead of simply fixing all the broken links?
The problem is that, as your website grows, you won’t be able to identify all of the broken links right away. So there is a good chance that your visitors will encounter them before you.
When this happens, the 404 page comes in as a backup solution until you fix the broken link.
In order to have a winning 404 page, you should consider having a custom one created.
Why Create a Custom 404 Page?
Why create a custom 404 page when you can get one by default?
Well, because they are often too vague.
In the example above, the default 404 page tells you nothing except that you encountered a 404 error and the URL was not found.
If your website visitor encounters such an error, what do you think they will do? There’s nothing telling them what happened or why, and what they should do next.
After your visitors encounter such a page, they will likely leave your site and might not come back again. According to Econsultancy, 88% of consumers are less likely to return to a site after a bad experience.
On the bright side, if you do create a custom 404 page, here’s what it can do for you:
- Reduce the frustration and confusion your visitors may feel after clicking on a broken link by providing a much clearer explanation.
- Provide different options for your visitors, so they may stay on your website a little longer, including other recommended links, a search bar, etc.
- Improve your website’s bounce rate and, combined with a bit of keyword implementation, improve your site’s SEO as well.
How to Create a Custom 404 Page
Before we start discussing tips on making your 404 page highly effective at retaining visitors, let’s see how to create a custom 404 page first.
In this section, we’ll provide you step by step instructions on how to create a custom 404 page on:
- Website Builders
- Custom Websites i.e. HTML
Creating a Custom 404 Page on WordPress
The easiest way to create a 404 page on WordPress is by installing a plugin. Then you can simply choose any page in your WordPress editor and make it the default 404 page.
Here are two plugins we recommend for this purpose:
- 404page: After installing this plugin, go to Appearance → 404 Error Page and choose any page you want to make it your default 404 page.
- Custom 404 Pro: This plugin will appear on your main WordPress dashboard, where you can simply select any page you want (or even add a URL), and this plugin will turn it into your default 404 page.
All you have to do is create a new page on WordPress and, using your theme’s drag and drop editor, or with the help of a web developer, design it to be a 404 page.
Creating a Custom 404 Page with a Website Builder
Creating a custom 404 error page with website builders is easy. All you have to do is create a new page, design it as a 404 error page and set it as your default 404 page.
Most website builders will have their own instructions for making a custom page the default 404 page, so make sure to check those out before you start.
Creating a Custom 404 Page on a Custom Website (HTML)
If you’ve got a website that does not use a CMS or a website builder, you can still set a custom 404 web page as your default.
- Step 1: Download and install an FTP client on your computer. FileZilla is great if you’re using Windows. Fetch is great if you’re using a Mac.
- Step 2: In your FTP client, enter your hostname i.e. the IP address or domain name for your hosting account, as well as the username and password for that account.
- Step 3: Go to your hosting server’s root directory and find a file called ‘.htaccess’. If there isn’t one, create it. Open it and add the following line:
ErrorDocument 404 /not-found-page.html
This code tells your hosting server to look for this HTML file in case of a 404 error.
- Step 4: Simply create an HTML file called ‘not-found-page.html’ and copy/paste the code for the custom 404 file here.
And that’s it.
Whenever your website will encounter a 404 error, it will redirect your visitor to your custom 404 page.
Making the Most Use of the 404 Error Page
Creating a 404 page isn’t that complicated. However, it does take extra effort to optimize it in order to get visitors to stay on your website.
Here are the three main qualities your 404 page should have.
1. A plain and simple explanation
When a user lands on a 404 error page, they are met with confusion and frustration. A vague and technical explanation involving ‘servers’ and ‘no responses’ doesn’t make it any easier for them to understand what’s going on.
That’s why the best thing you can do with your 404 page is to use simple terminology, like:
“The link you clicked on is broken.”
“The page you’re looking for doesn’t exist.”
“We couldn’t find the page you were looking for.”
This makes it instantly clear to your visitors that the problem is the link they clicked on.
You can go one step further and list a few possible reasons why your visitor got the 404 page. A few examples include:
“You may have mistyped the URL or made a copy/paste error.”
“The website owner may have deleted/moved this page to another URL.”
Using simple language and providing an explanation will make your custom 404 page less likely to scare your visitors away.
Here’s Disney’s 404 page as an example.
It’s simple, straightforward and easy to understand. It fits well with their brand, using one of their characters and copy that rhymes. Plus, it includes just one link—Back to Home.
2. Useful alternative CTAs
Now that you got your custom 404 page to explain the situation to your visitors, it’s time to proceed with more improvements.
After reading the text, they might wonder what to do next. Your 404 page has to provide an answer to that as well.
A call-to-action (CTA) will help your visitors go to another place on your website that they might find useful. These CTA’s can be:
- A link to your website’s homepage.
- A list of your most popular products/posts.
- A search bar where they can try searching for the page they were looking for again.
… and more.
If your 404 page doesn’t have a CTA, your visitors might leave your website. A CTA helps prevent this from happening.
In addition to the CTAs, you might also consider adding your contact information. This will help your website visitors get in touch with you for a potential solution in case they don’t find your CTA’s to be of much use.
Here’s Airbnb’s 404 page. It includes a brief explanation, a search bar, links to the navigation menu, and the whole sitemap at the bottom, so people can quickly take the next course of action.
3. A bit of humor and personality
The last thing your 404 page needs is a bit of humor and personality that goes well with your brand.
It’s up to you what it should be, for example:
- Witty web copy,
- A funny meme/GIF,
- A cute illustration
This will make your 404 page something your visitors smile at instead of frowning. As an example, here’s the Imgur 404 page.
They use witty copy and cute illustrations of animals to infuse their 404 page with humor. And the eyes of the animals follow wherever your cursor goes!
Why Do 404 Error Pages Appear
We have already covered that the 404 error pages appear when a user clicks on a broken link. So what causes a link to be broken?
The three most common reasons include:
- Removing a page from the website;
- Changing the directory in which the page was located previously;
- Changing the URL.
How to Fix 404 Errors
You will need to check your website regularly using webmaster tools which accurately scan the site for 404 errors.
Some of the available options include:
- If your website is on WordPress, you can use the MonsterInsights plugin. It will automatically flag the 404 errors for you, making it easy to fix them as quickly as possible.
- If you aren’t using WordPress or don’t want to pay for a webmaster tool, you can use the Google Search Console instead.
Here’s how to find 404 errors with Google Search Console:
- It will scan your website for possible 404 errors using ‘spider bots’: programs that scan links and pages within your website.
- Open the Google Search Console dashboard and go to Crawl → Crawl Errors to see existing 404 errors on your website.
- Once you find a 404 error, check the link by going there in your browser. If it works, mark it as fixed. If it doesn’t, analyze which page the link is trying to take your visitors to and replace it with a link that works instead.
With these few simple steps, you’ll be able to fix the 404 errors on your website. If you aren’t able to fix them on time, no worries. You’ll have your new awesome custom 404 page as a backup for your website visitors!
Do you have a custom 404 page on your website?