Redirect Users using Meta Tags or JavaScript

Join GeekyClown's Fan Page on Facebook | Follow me on Twitter
Over the last couple of years I have found that a good portion of Web design work comes from redoing existing sites. Unfortunately, often times the original site is problematic from head-to-toe, usually because it was created by someone who wasn't an actual Web designer but a friend/relative, etc. that did it on the cheap.

One of the things that is a sure sign of that is inconsistent or inproper file structure on the site. That always leads me to a personal dilemna, do I leave an inproper file structure in tact or do I put in a more fitting file structure for the future. Usually, I go with the latter and correct inconsistent file names, etc. and deal with the consequences of links breaking etc.

Redirects are one of the main tools that I can use to take a user and bring them to the proper page from an existing hyperlink or a bookmark/favorite. For example, if a site has been around for a few years and their page is: http://www.mysite.com/everything_you_will_ever_need_to_know_about_my%20site-can_be_found_here.htm and I decide to create a page http://www.mysite.com/about.htm I can redirect the user to the correct page without having to delete the old one and creating a 404 error.

I will just show ways to do this through the browser (ColdFusion and PHP both have easy methods of doing this as well).

Way 1: Use a Meta Refresh. A meta tag is a common HTML tag for SEO but also can be used to refresh the page after a certain amount of time to a new page. The tag looks like this (and for this example placed in the everything_you_will_ever_need_to_know_about_my%20site-can_be_found_here.htm file):

<meta http-equiv="refresh" content="0;url=about.htm">

What the tag is saying is to refresh the page after 0 seconds to the URL about.htm. If you want a screen that alerts the user that they are being redirected/refreshed, you can change the 0 to something else, 5, 10, etc. If that is the case, you can put in a "This page has been moved, please update your bookmarks/favorites" splash screen so that you may be able to delete the old page after enough time when you no longer see it popping up in your traffic logs.

Way 2: User JavaScript. You can use a self.location.href command and simply redirect that way. There are two downsides to using JavaScript, 1.) if the user has JavaScript turned off the browser will ignore the command; 2.) if you would like to time the command from running, (like you can do easily in the meta tag) you will need to build in more JavaScript to do that. However, since I am coding JavaScript constantly, I always find the JavaScript easier to remember for me.

Here is an example of the JavaScript in action (again placed in the everything_you_will_ever_need_to_know_about_my%20site-can_be_found_here.htm file):

<script language="javascript">
self.location.href="about.htm";
</script>

While it is self explanatory, what the command is doing is saying self.location (the current window) href (a standard used through your anchor tags <a href>) new page.

That is all you will need to do and your users then can move from an outdated (and ridiculously named) page to the new and improved page.