Useractive Tutorial

The Meta Tag - HTML Lab 10

The Meta Tag

The meta tag is used primarily for three reasons:

1.) To give origin and creation information about your web page

2.) To give information to search engine robots about your page

3.) To give HTTP header codes to browsers for special purposes

In this lesson, we will only discuss the last two uses. I will give you a resource to find out more information about the meta tag at the end of the lesson.
Using the HTTP-EQUIV attribute
Suppose you have a web page that you update every day or every week. There may be a problem viewing these changes as web browsers cache web pages so that they can be displayed in your browser more quickly. If you have visited a web page and you want to go back and look at it again, your computer will retrieve this page from your hard drive instead of from the server on which the web page resides. See the problem? If you make a change on your page, people who have visited before may only see the old version of the page. This cache is usually kept for 30 days by default, although users can change how long cached pages are kept by changing the preferences on their browser.

Here is where the meta tag comes in! We can use the meta tag to tell the browser not to cache the web page at all. We can also tell it how long to cache the web page before reloading it from the server.

To prevent web pages from caching your web page, simply put the following code into the head of your document like this:
In HTML mode, type the following into the Editor below:
<head>
<title>Meta Tags</title>
<META HTTP-EQUIV="pragma" CONTENT="nocache">
</head>
You can Preview this code if you would like, but you will not see any results on the screen. I can assure you that there is something happening behind the scenes!

Notice that we used the HTTP-EQUIV attribute. This attribute is used to specify the name of the HTTP response header field, which conveys information to the browser about what to do with the file. In this case we set the value of the attribute equal to pragma, thereby instructing the browser not to store a copy of the page in the cache.
In HTML mode, type the following into the Editor below:
<head>
<title>Meta Tags</title>
<META HTTP-EQUIV="expires" CONTENT="Sun, 28 Dec 2001 09:32:45 GMT">
</head>
This time we set the value of the HTTP-EQUIV attribute equal to expires. This is similar to pragma, except that with this one you can tell the browser when to consider the page out-of-date (in other words, when it should retrieve a new copy from the server). For example, if you update a page every month, you would want to set the page to expire a month after you first posted it. The time is expressed in Greenwich Mean Time (GMT), which is the time at 0 degrees longitude. Eastern Standard Time is five hours behind GMT, and Eastern Daylight Savings Time is four hours behind. For the expiration to work, you must put the day and time exactly in the format shown above.

Another value we can use for the HTTP-EQUIV attribute is refresh. This will load a page after a set amount of time. You can reload the same page you are viewing or load a completely different page. This be used to create a temporary splash screen, a slide show, or to refresh web chat pages.
In HTML mode, type the following into the Editor below:
<head>
<title>Meta Tags</title>
<META HTTP-EQUIV="refresh" CONTENT="10;URL=http://www.useractive.com/seeit.html">
</head>

<body bgcolor=darkblue text=white>
This page will change in 10 seconds 
</body>
Save this file with the name meta.html. Then view it in a regular browser window. Be sure to wait 10 seconds to see what happens!

NOTE: The meta tag will not work using the Preview function of CodeRunner.

Notice that we set the CONTENT attribute equal to 10;URL=http://www.useractive.com/seeit.html. The number is used to indicate the number of seconds that should pass before the new page is loaded. The URL of the page you wish to load is then specified.

You can also use refresh to load a sound file that will play in the background.
in HTML mode, type the following into the Editor below:
<head>
<title>Meta Tags</title>
<META HTTP-EQUIV="refresh" CONTENT="10;URL=http://www.useractive.com/sound.wav">
</head>

<body bgcolor=darkblue text=white>
A sound should begin to play in 10 seconds 
</body>
Again save this file and view the page on a regular browser window.
The NAME attribute
The NAME attribute in the meta tag is used to specify a name for the metadocument information contained on the web page. Different programs that access metadocument information expect different values for this attribute. Some search engines use programs called robots that will use this information when conducting searches and display what they find on their query results.

Suppose, for example that you have a web page where you sell quilts. When people went to altavista.com to search for "quilt," or "blanket," or even "sale", you would want them to find your site, right? One way to increase your odds of being found is to use the keywords value for the name attribute.
In HTML mode, type the following into the Editor below:
<head>
<title>Meta Tags</title>
<META NAME="keywords" CONTENT="quilt, quilts, blanket, blankets, for sale"> 
</head>

<body bgcolor=white>
This would be a web page about quilts. 
</body>
If the search engine robots use keywords to rank your site in their searches, your chances of being found will improve!

Some search engines use description to rank your site as well.
In HTML mode, type the following into the Editor below:
<head>
<title>Meta Tags</title>
<META NAME="keywords" CONTENT="quilt, quilts, blanket, blankets, for sale"> 
<META NAME="description" CONTENT="We sell the highest quality quilts on the web!">
</head>

<body bgcolor=white>
This would be a web page about quilts. 
</body>
Notice that we can use as many meta tags as we wish.

As a final example of using the meta tag, suppose you have some pages that are usually displayed in a frameset. Normally, you wouldn't want someone visiting that page by itself. It is possible that search on a search engine, they may actually find a page of yours that's intended to go into a frameset. To prevent this from happening, you can set the NAME attribute equal to robots the CONTENT attribute equal to noindex.
In HTML mode, type the following into the Editor below:
<head>>
<title>showing refresh</title>
<META NAME="robots" CONTENT="noindex">
</head>

<body bgcolor=white>
This would be a web page about quilts. 
</body>
Take some time to experiment with the meta tag! For more information, check out this page.