Smart 404 Error Page Redirect

Don’t loose website visitors and potential customers because of a poorly implemented 404 error page. Even a “Page not found” page can become a conversion funnel if it’s done properly. It might even become your most visited landing page (if the site is not built properly).

custom 404 error page

You can have a funny and clever 404 error page. In this article I’m going to present the solution I’ve implemented on this website. I made a small page that simply redirects to the home page with the help of JavaScript after a couple miliseconds. To see it in action just type a non existing url on this website, such as https://html-online.com/adfasdfasdfasdf/.

The main benefit of this solution is that visitors served this way will visit at least two pages on the site: the 404 page and the one where it’s redirecting. This will lower the bounce rate statistics and search engines will reward that for sure.

The Code

Create a 404.html file in your root directory and copy the contents below:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirecting</title>
  </head>
  <body onload="redirect()">
	<h1 style="text-align: center; padding-top: 50px; display: block;">Redirecting...</h1>
	<script>
	  function redirect() {
		setTimeout(function(){ 
				window.location.replace("/");
			}
			, 100);	
		}
	</script>
  </body>
</html>

This will redirect to the home page but you can replace the value of the window.location.replace function to any page on your site, even for an external link.

And finally set up the new error document adding or adjusting the line below in your .htaccess file:

ErrorDocument 404 /404.html