How to Properly Create a Custom 404 Page

How to properly create a custom 404 page

Have you received the dreaded “File Not Found” while searching for information?

We’ve all been there. While searching for information, many of us – if not all of us have clicked on a link to a page that no longer exists and have received a generic 404 page.

It is frustrating, isn’t it?

Generic 404 pagesThis 404 message is what a visitor receives when a page no longer exists on the server and a custom 404 has not been set up. Depending on what browser is used, a generic 404 may state: “The page cannot be found or “File Not Found” when a web page has been removed or had its name changed.

There are times when removing a page from your website is necessary and a 404 cannot be avoided. How do we give our visitors the best overall experience when serving a 404?

When Should You Return a 404 Status Code?

First, you should decide if you are going to repurpose the content first, or if you no longer want the content on your website. According to Google, you should return a 404 status code when you remove a web page from your site.

An example of a page that you may not want on your page is content that is no longer relevant, is outdated, and no longer provides value. Google’s advice is clear:

  • Let the old URL return a 404 (or 410 – Gone) when you don’t intend of replacing the content with new.
  • Google treats 410s (Gone) the same as 404s (Not found).
  • Sending the visitor to another page like the home page instead of serving a 404 or 410 for pages that no longer exists can be problematic. These types of redirects are called soft 404s. As you can imagine, these types of redirects can be confusing to both the user and search engines.

How to Create a Useful 404 Page that Visitors Won’t Dread

A custom 404 is a professional and informative page designed to help visitors locate information on a website in place of the generic 404. In addition, Google’s Webmaster Help Center recommends the use of custom 404 pages to help visitors find the information they are looking for. The following are based on Google’s guidelines with recommendations for the following considerations when creating a custom 404:

  • Create the custom 404 with the same design as the rest of your website.
  • Use a friendly statement to inform your visitors that the page they are seeking cannot be found.
  • Include links to popular web pages, articles or posts and provide a link to the home page.
  • Consider adding contact information for visitors to inform the webmaster of the missing page.
  • Be certain that the HTTP headers of the custom 404 return status code of 404. This is essential for Google Sitemaps. If the web server does not return the HTTP status code of 404, the sitemap.xml will be rejected through Google’s Webmaster Tools. To test the HTTP header, use an online header checker like: Check Server Headers Tool

How do you create a custom 404?

First, let’s review how to create a proper custom 404 page on different servers and on WordPress.

Apache Web Servers

Create the custom 404 page and then edit the .htaccess (hypertext access) file to include the following line:

ErrorDocument 404 /errorpage.html

You may name the custom 404 any name you would like (errorpage.html, 404.html, etc.).

Tip: You may need a FTP program that shows .htaccess files on the server such as Smart FTP.

Upload your custom 404 page and test it. For example, enter your url with a non existent file such as: http://www.yourwebsite.com/testing123. The custom 404 should be served.

Windows IIS Web Servers

ASP Custom 404

Create a custom 404 ASP file. For example: errorpage.asp

Add the following line to the top of the file before anything else:

<%
Response.Status = "404 Not Found"
%>

The above code will ensure that the HTTP status code will return a 404.

Custom 404s on Windows servers may be approached in several ways. Some web hosts must be contacted by the Web site owner to set the 404 error doc to the specific 404. Other Windows web hosting companies allow the customer to set their own custom 404 file through a control panel. Contact your web host to determine how to set the custom 404.

ColdFusion Custom 404

For ColdFusion, add the following line to the top of the custom 404 page:

<cfheader statuscode="404" statustext="Not Found">

After you have uploaded the custom 404 (either ASP or ColdFusion file) and have the server set to the custom 404, check the page by using a HTTP status code tool.

WordPress

Every theme shipped with WordPress comes with a 404.php file. If you have a custom WordPress theme and it did not come with the 404.php file, you can create one to match the same look, feel and navigation as the rest of your website or blog. According to WordPress.org,

  • Copy the index.php file of your current theme and create a new file called 404.php.
  • Open your newly created 404.php file in an editor or notepad and delete all the sections of code dealing with posts or comments.
  • Include a custom 404 error message and save.
  • Upload your new custom 404.php file to your theme’s folder.

Finally, if you WordPress installation is on a Apache server, to make sure that WordPress finds your new 404.php file, add the following line to your .htaccess file:

ErrorDocument 404 /index.php?error=404

Taking 404s a Step Further

There are a number of ways to make your custom 404 more useful and user friendly. You can seize the opportunity and create a positive and memorable experience for your visitors who come across a web page that has been removed. Here are a few:

Add a image. An image can enhance your custom 404 page. Here are a few examples:

Mashable:

404 error Mashable

Bitly:
404 Error Bitly

Quicksprout:
404 error Quicksprout

Add random posts for users to visit with the following code. This will not only enhance your visitor’s experience, but it may also lead to more page views.

<ul>
<?php
$posts = get_posts('orderby=rand&numberposts=5');
foreach($posts as $post) { ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php } ?>
</ul>

Summary

Custom 404 pages can offer important information to website visitors to replace default “404 Status Code – Not Found” pages. With the same design and navigation as the rest of your website and proper coding, a custom 404 provides a user friendly page to enhance your visitor’s experience when they reach a web page that has been removed from your website.

Your Turn

Would you rather see a custom 404 page when landing on a page that has been removed? Have you set up your custom 404 page on your website? Please let me know what you think in the comments section below.

Need help setting up your custom 404?
We’re here to help. Please contact us:

Contact us

 

Fascinated with the growing potential and power of the Internet, Robin founded R & R Web Design LLC in the Chicago area in 2000. As creative director, she is passionate about helping others reach their Internet objectives through a strategic online presence with results driven custom web design, ethical SEO, and social media marketing.

This article was published on: April 6, 2015 and was last modified June 21, 2017
8 comments on “How to Properly Create a Custom 404 Page
  1. This is incredible information, thank you for sharing. As wonderful as it is, I would MUCH prefer to continue hiring R&R Webdesign to create all of my client websites, my business website and my passion project website. Robin is, without a doubt, the finest most knowledgeable webmaster on the planet. So, thank you for sharing this article YET it only makes me want to work with you even more thanks to your depth of knowledge! So, ready to start another website? I’m ready to hire you again today to start another one. Thanks Robin for all that you do!!!!!

    • Heidi, I’m glad that you found this helpful… and I do understand that you would rather R & R Web Design LLC take care of things like this for you. Thank you! Yes, I am ready to start another project 🙂

  2. I’d love to create an amusing and helpful 404 page BUT the thought of ferreting around in those htaccess files leaves me quite weak at the knees 🙁

  3. Veronica Solorzano Athanasiou says:

    This is bookmarkable information for when we must delete a page. I’ll try it and let you know how it goes.

    Thanks so much for the lesson. It’s very useful. The examples help to make it a lot clearer.

    Keep them coming!

    • Hi Veronica,
      Thank you for you kind words! I’m happy to hear that you found this helpful and that you the examples made it a lot clearer. No one likes to land on a generic 404 page – or get redirected to another page like the home page that doesn’t have anything to do with the original page. With a little creativity, we can offer our visitors a more pleasant experience when we have to delete a page.

      Thank you again!

  4. Adrienne says:

    Hey Robin,

    I have mine all set up although I probably could add more to it. I do mention that they might have taken a wrong turn and point them back in the right direction. It’s also recognized by Google but I did it probably two years ago so I don’t exactly remember what I did. LOL!!!

    I’m proud though that I did it myself.

    Thanks Robin for the tips.

    ~Adrienne

Leave a Reply

You have to agree to the comment policy.

*

By signing up or submitting a comment you are agreeing to our Privacy Policy.