How to automatically redirect the browser to another page

It is a fairly common requirement to be able to redirect the browser to another page. A frequent need for this is when reorganising a site and moving pages around - if someone visits an old link it is preferable for them to be referred to the new location rather than to be presented with an error because the page can no longer be found.

Redirecting like this can be done either using JavaScript or with an "HTTP-EQUIV Refresh" meta tag. Both of these approaches are covered below.

Redirecting with JavaScript

The following is the complete HTML for an example of redirecting using JavaScript:

<html>
<body>
<p align="center">The page you are looking for is not here. Try:</p>
<p align="center">
<a href= "http://www.cryer.co.uk/resources/htmljavascript.htm">
www.cryer.co.uk/resources/htmljavascript.htm</a></p>
<p align="center">If you are not redirected automatically within a few
seconds then please click on the link above.</p>
<script type="text/javascript"><!--
setTimeout('Redirect()',4000);
function Redirect()
{
  location.href = '../htmljavascript.htm';
}
// --></script>
</body>
</html>

The following frame demonstrates this in action. Please click the the 'Start' button to load (or reload) the following example:

Redirecting with HTTP-EQUIV Refresh

The "Refresh" http-equiv meta-tag (see this page for follow this link for a full list of HTTP-EQUIV tags and descriptions of their roles) allows you to specify a timeout and a new page to load once that timeout has expired. To use it add the following to the HTML of the page line between the <head> and </head> tags:

<meta http-equiv="refresh" content="5; url=http://www.cryer.co.uk">

Note:

The timeout (shown here as 5) is in seconds.
Be sure to change the URL to that of the desired page.
Insert double quotes exactly as shown.

So the JavaScript example above could be rewritten using this tag as:

<html>
<head>
<meta http-equiv="refresh" content="4; url=http://www.cryer.co.uk/resources/htmljavascript.htm">
</head>
<body>
<p align="center">The page you are looking for is not here. Try:</p>
<p align="center">
<a href="http://www.cryer.co.uk/resources/htmljavascript.htm">
www.cryer.co.uk/resources/htmljavascript.htm</a></p>
<p align="center">If you are not redirected automatically within a few
seconds then please click on the link above.</p>
</body>
</html>

Other Considerations

Which style of redirect you choose to use is up to you. There is no reason why these two approaches could not both be used on the same page. This would have the advantage that whilst some browsers might have JavaScript disabled and others might not respond to the HTTP-EQUIV tag, it is most likely that one or the other approach will be successful.

If you use this technique because you have moved a page then it is probably wise to leave a message to search engines that they should no longer index the page. The easiest way of doing this is to use the following meta tag:

<meta name="robots" content="noindex">

Which should be included between the opening <HEAD> and closing </HEAD> tags in the HTML, for example:

<html>
<head>
<meta name="robots" content="noindex">
</head>
.
.

For more information on meta-tags please click here: Meta tags - What meta tags are available?