Article
Practical Web Design - Top 15 META Tag Tricks
Refresh and Redirect
Here's a little tag that you'll find useful. The REFRESH subtag can be used to either send page visitors to an entirely different page, or to refresh the page's contents periodically -- say, every 30 seconds or whatever.
An example might be of a small software firm, Our Cool Software, that began marketing its wares via a free Geocities Web page. The firm sells enough software to make buying its own .COM Web page feasible, so they do so. Now, instead of logging on to:
http://www.geocities.com/OurCoolSoftware/,
users will log on to:
http://www.OurCoolSoftware.com/
But what about the users who already know and use the old Geocities address, and have it bookmarked? Well, after you shift your site's content to the new URL, you write a META REFRESH tag for the old page. This forces the old page to "redirect" the user to the new page automatically, with a time delay specified in seconds, like so:
<META HTTP-EQUIV="refresh" CONTENT="10;
url=http://www.ourcoolsoftware.com">
Write a little bit of text to alert the surfer that they're being transported to a new page and voila! You've redirected your site visitors to the new page with very little muss nor fuss:
We've moved to a bigger and better Website! You will be transported to our new site in 10 seconds. When you get there, don't forget to bookmark our new page!
In 10 seconds or so, your site visitors are at your cool new digs, without having to know the new URL. You've done the redirection for them. And if you'd rather send them to the new page in 2 seconds, or 30, or whatever, just change the number in the CONTENT section of the tag to whatever you like.
Personally, I find 10 seconds is a good choice -- long enough for the reader to read your text letting them know what's happening and to bookmark the new site, but not long enough to make them impatient. And some people get annoyed with a 2-3 second redirect -- if for whatever reason they don't want to visit the new page, they don't have the chance to hit the BACK button. Also, if they don't realize that they're being redirected, they may wonder if they're not being hijacked to a site they don't want to go to -- a porn site, perhaps, or a site that threatens their computer's security. It's always best for the site visitor to know what's happening before it happens, and let them have the time to make the decision of whether or not to let the redirect happen. Besides, it's common courtesy, and these days, courtesy counts for a lot.
Note: In a very few cases, the REFRESH tag won't work, for arcane reasons that I won't go into here. So you might add a line such as this:
If your browser doesn't take you to our new site in a few moments, click on the link below to go to our new site. Once there, don't forget to bookmark us!
www.ourcoolsoftware.com/
Of course, the plain-vanilla version of the REFRESH tag has its uses as well -- the idea is to automatically update the page at selected intervals. This is useful for pages featuring stock market information, say, or news feeds, or ad content, or any information that changes in a matter of minutes. Here's the tag:
<META HTTP-EQUIV="refresh" CONTENT="600">
The 600 in the tag indicates the number of seconds between automatic page reloads, which in this case translates into 10 minutes between reloads.
Another, more creative, usage of the REFRESH tag is to take the visitor on a "tour" of a sequence of content. Say that you want to take your visitors through a set of photos of your visit to Uluru (Ayers Rock). You can create separate HTML pages of each photo and its accompanying text, and use the REFRESH tag to take the visitor from page to page without them having to touch their mouse. If you decide to try this, make sure to allow enough time for each image to load and for the visitor to read the text. You'll have to judge how much time is enough -- too little time, and they'll feel yanked through one page to the next, and too much ime will strain their patience.
By the way, don't worry about the meaning of the tag attribute HTTP-EQUIV. You can use the attribute without knowing that it gives the name of a "name/value" pair, and that it tells the server to treat the pair as part of the MIME (Multipurpose Internet Mail Extensions) document header. See, aren't you happier not knowing any of that?
Keep Your Page Out of Other Sites' Frames
Some sites are bad-mannered enough to make other pages appear within their own framesets. Sometimes this is by design, other times it's due to bad coding. You can make your page break out of another site's frames by including the following tag (make sure it's in every page of your site):
<META HTTP-EQUIV="Window-target" CONTENT="_top">t