LBi London

Posted by Manley February 11th, 2008

So you have decided that you need to redirect a page. Maybe this is to avoid duplicate content, a page has become obsolete or you just don’t like it any more.

What redirect options are there and which is best for you?

Last week I discussed possible reasons why one might want to implement redirects. This week I am going to discuss what type of redirect to use. I shall start with an overview of the various redirects available:

Meta refresh

A meta refresh is a meta tag which tells the user’s web browser to refresh the page after a set time has passed. When using a meta refresh as a redirect that time is generally set to 0 seconds. A meta refresh appears in the head of an HTML document and looks something like this:

 <meta http-equiv="refresh" content="0;url=http://www.manley-widgets.co.uk/medium-grade/alexander/"> 

 This page has moved, please <a href="http://www.manley-widgets.co.uk/medium-grade/alexander/">click here to visit the new page</a>. 

This example tells the browser to refresh after 0 seconds and to refresh to a new URL, in this instance http://www.manley-widgets.co.uk/medium-grade/alexander/.

HTTP refresh header

Essentially the same as a meta refresh, an HTTP refresh header is included in the response headers returned by the server and allows a time and a URI to be set, as so:

 HTTP/1.1 200 ok Refresh: 0; url=ttp://www.manley-widgets.co.uk/medium-grade/alexander/ Content-type: text/html 

 This page has moved, please <a href="http://www.manley-widgets.co.uk/medium-grade/alexander/">click here to visit the new page</a>. 

This example tells the browser to refresh after 0 seconds and to refresh to a new URL, in this instance http://www.manley-widgets.co.uk/medium-grade/alexander/.

JavaScript redirect

There are many ways to use JavaScript to redirect a page, but the most simple is window.location:

 <script type="text/javascript"> <!-- window.location = "http://www.manley-widgets.co.uk/medium-grade/alexander/" //--> </script> 

 <noscript>This page has moved, please <a href="http://www.manley-widgets.co.uk/medium-grade/alexander/">click here to visit the new page</a>.</noscript> 

JavaScript code can run in a run time environment (that is locally in a user’s browser, as opposed to server side processing) and therefore can have almost limitless triggers for redirecting.

Frames

Not strictly redirecting, a single frame displaying the target page can essentially deliver the new page to a user. The HTML might look something like this:

 <frameset rows="100%"> <frame src="http://www.manley-widgets.co.uk/medium-grade/alexander/"> </frameset> 

 <noframes> This page has moved, please <a href="http://www.manley-widgets.co.uk/medium-grade/alexander/">click here to visit the new page</a>. </noframes> 

The old URL will still be displayed if frames are used in this manner, even when the user navigates on from the target page, by default.

302 redirect

With a 302(found) redirect the requested resource resides temporarily under a different URI. Since the redirection might be altered on occasion, the client SHOULD continue to use the Request-URI for future requests.

 HTTP/1.1 302 found Location: http://www.manley-widgets.co.uk/medium-grade/alexander/ Content-type: text/html 

 This page has moved, please <a href="http://www.manley-widgets.co.uk/medium-grade/alexander/">click here to visit the new page</a>. 

Basically, this means that the page has been found, but that the resource, or content of that page, is temporarily hosted elsewhere.

301 redirect

A 301(permanent) redirect is precisely that, permanent. A 301 indicates to visitors that they should update their URL data for that resource and tells them that it will not be at this URI again, but rather that it should be looked for at the target location.

 HTTP/1.1 30 Moved Permanently Location: http://www.manley-widgets.co.uk/medium-grade/alexander/ 

A page which has been 301 redirected is now obsolete and the new page is to be considered the resource.

---

So those are the main redirects used. There are others such as 307(temporary) redirects or a variety of other JavaScript and Flash redirects, but these are the 6 most common redirect types used.

I intended to move on to discussing their relevant merits and pitfalls, but I think that this post is long enough to be going on with, so I shall cover that next time.

Cheers,

Manley

Tags: redirects

1 comments Add This