Home » Blogs » sandip's blog

Web page redirection...

Thu, 09/04/2003 - 09:21 — sandip

Want a way to automatically redirect your visitors to a new location? It's easier than you think if you use the META tag.

META tags are a powerful but often poorly understand part of HTML. The tag was created to allow webmasters to specify important "meta data" about their document. What's meta data? Literally, it's data about data. A META tag contains information about your overall Web page that's important for indexing, archiving, or otherwise managing the page. Think of it as the librarian's favorite tag.

By far the most frequent use of META tags is to help search engines index your page. By using a META tag with keywords or a document description, you can dramatically boost your ranking in the major search engines. Description and keyword versions of the META tag look like this:

<META NAME="Description" CONTENT="Daily Web Journal !">
<META NAME="Keywords" CONTENT="web log journal blog">

But the META tag can have other uses as well. One of the most powerful of these is to automatically redirect your visitors to a different page. This can come in handy when:

  • You change the domain name or location of your Web site.
  • You change the structure of your site.

You'll need to use the META tag's HTTP-EQUIV and CONTENT attributes. The HTTP-EQUIV attribute tells the browser that this page should redirect the visitor to another page; the CONTENT attribute tells the browser where it should go to find the new page.

The HTTP-EQUIV attribute can be used for several different purposes. The attribute was originally developed as a way to let Web page authors have more control over the HTTP response headers used by their Web server. HTTP response headers are part of the dialogue between your Web server and the visiting browser. The HTTP-EQUIV attribute was intended to let you name an HTTP header, assign a value to that header, and let that value override the server's normal response. In practice, though, not all Web servers support this and many webmasters report problems when the attribute is used this way.

The HTTP-EQUIV attribute can also be used by the Web browser, which is how we'll use it for redirecting visitors. To use it for redirection, its value should be set to HTTP-EQUIV="refresh".

Next we need to set the value of the CONTENT attribute. Be careful here, because the structure of the CONTENT attribute is unusual. It should contain two parts separated by a semi-colon. These parts are:

The number of seconds to wait before redirecting the visitor
The URL to which the visitor should be sent.

For example, the META tag below redirects the visitor to our home page after 10 seconds:

<HTML>
<HEAD>
<!-- Send users to the new location. -->
<TITLE>Redirect
<META HTTP-EQUIV="refresh" CONTENT="10;URL=http://www.0h1.com">
</HEAD>
<BODY>
This page has moved. You will be 
automatically redirected 
to its new location in 10 seconds. 
If you aren't forwarded 
to the new page, 
<a href="http://www.0h1.com">
click here</a>. 
</BODY>
</HTML>

Since META tags aren't displayed by the browser, this tag should be put inside the HEAD section of your page. If the META tag is place inside the document BODY, it may not work correctly.

You may also want to link to the new page in the body of the document, since a few browsers don't support the META HTTP-EQUIV. For example, the UNIX browser Lynx doesn't support the tag.

There's a downside to doing this though: it makes the redirection noticeable to your visitors. If the body of the document contains any visible text, that text will be displayed before the redirect occurs. As a result, many webmasters prefer to leave the body of the page blank so as to make the redirect invisible. That's a decision you'll have to make based on the types of browsers coming to your site.

Note that the META tag isn't the only way for you to redirect visitors. You can also do this using a CGI script or some JavaScript code placed inside the page. Overall, though, using a META tag is the easiest and most flexible way to route your visitors to the new location.

Bookmark/Search this post with
  • del.icio.us
  • Digg
  • Facebook
  • identi.ca
  • LinkedIn
  • SlashDot
  • StumbleUpon
  • Technorati
  • Twitter
Comment