Customize Your 404 Not Found Page with JavaScript

Like every other webmaster, at some point you'll want to move content to new folders within your site's directory structure. Doing so results in links followed to transplanted content returning a 404 "Not Found" page.

Most webmasters customize their 404 page with a link to the home page, or another page which will help the user find the page they're looking for. But since surfers don't want to spend that much time hunting around, many will end up leaving your site altogether.

Since search engines don't like duplicate content or automatic redirects, it's JavaScript to the rescue again. This quick and easy solution places a direct link to the page's new home within your customized 404 page.
var newLocation = location.href.replace('Old_Folder_Name/','New_Folder_Name/');
//this variable replaces the old folder name with the new folder name within the URL (customize it to match your folder names)
var message

if(location.href.indexOf('Old_Folder_Name/') > -1){
//if the old folder name was found in the browser's address field, write the following message:
message = 'The page, <em>' + location.href + '</em> has moved.'
message += <h3>Click '<a href="' + newLocation + '"> here</a> to be taken to it\'s new location. </h3>'
otherwise, if it is a misspelling or just doesn't exist, write this message instead:
message = 'The page you\'ve requested cannot be found. Please visit my <a href="/index.html">home page</a> to find it\'s new location.'
Of course, your host must allow customization of your 404 page. If it doesn't, maybe you need a new host.

Home | Contact