Create Error 404 Page with .htaccess

How does your website handle missing pages? If a page ever gets renamed, moved to a different folder, or removed altogether; what do visitors of the old website address see? If they're greeted with a generic system message, there is a better way. Let's take a quick look at using .htaccess files and creating an Error 404 page to display a more user-friendly message.

Background

It should be said that it's best to avoid changing your directory structure, page names, etc. since it breaks incoming links from other websites and search engines like Google. However, you can mitigate the confusion caused by broken links by adding a page to handle 404 errors to your website. Otherwise, visitors may see messages like the one shown in Figure 1 which isn't very helpful to the average person.

Google Chrome screenshot of a standard 404 error message
Figure 1. System Message for 404 Errors

Create Error 404 Page

Error 404 pages are like any other page on your website. They can utilize the same template and are built using regular HTML code. For example, we could create a page called "404.php" and add the following code:

<html>
<head>
<title>Page Not Found</title>
</head>
<body>
<h1>Page Not Found</h1>
<p>Sorry, the page you are looking for may have been removed or had its name changed. You could try locating the page using our website navigation or website search feature. If need help locating the page, please don't hesitate to <a href="/contact/">contact us</a>.</p>
</body>
</html>

Activate Error 404 Page

Next, we need to tell the website server where to send requests which result in 404 errors. This can be accomplished with a single line of code in an .htaccess file.

ErrorDocument 404 /errors/404.php

Note that the "/errors/404.php" part needs to point to your Error 404 page.

Conclusion

All that's left to do is upload the .htaccess file to your root directory. If your root directory already contains an .htaccess file, make sure your new version contains the code from the old one. If everything's set up correctly, broken links should redirect to the Error 404 page. You can make sure by typing a website address with your domain that doesn't exists. For example, you could type something like "www.yourwebsite.com/werdis".

If you're interested in seeing what others are doing with their Error 404 pages, check out the Smashing Magazine article titled "404 Error Pages, One More Time."

0 Comments

There are currently no comments.

Leave a Comment