The <META> Tag

Part One: Introduction 

The <META> tag is a feature that helps out designers and search engines alike. The <META> tag allows the author(s) to say who they are and where to find more information. It can also help get you a higher ranking in a search engine.

In this tutorial we will discuss how to use the <META> tag and why you should use it. Of course, this tutorial assumes that you know some HTML (it does not take a lot). If you do not, then head on to our Basic HTML Tutorial. Now, on to the world of the <META> tag

The <Meta> Tag
Part Two: Labeling Your Pages 

With the <META> tag you can place notes in your code that explain who did the authoring and even what program you used to create your site with. This is important if you have a page that has little or no text based content. For example, if you use frames then you have a control page that has nothing more then links to the pages that are going to be in the frames. Another example would be an image-heavy page. Whatever the reason the <META> tag can help.

First off is the 'name' attribute. This allows you to set up interesting system settings for the web page. It allows you to set a properties' name. For example:

<META name="author">

Now you need to set the value for the <META name> with the content attribute.

<META name="author"
            content="John Doe">

The <META> tag has now declared the author to be John Doe.

You can also set the language of the name with a special attribute called 'lang'. This tells the computer how to pronounce the name. This helps anybody who uses a language synthesizer attached to his or her computer that may read back this information. The tag would be written like so:

<META name="author"
            lang="de"
            content="Johann Bach">

Now the synthesizer knows that the name should be pronounced using German. Another feature of the <META> tag is the ability to declare what program you used to create your code.

<META name="generator"
            content="notepad">

So, go ahead and brag about what text editor you used to generate the code. :-) However, the most important thing that a <META> tag can do is help you out with your search engine rankings.

The <META> Tag
Part Three: Keywords and Descriptions 

Using the <META> tag you can point out the keywords and description that you wish to use. Many search engines use this code instead of the first few words on your page or they use them to compliment the words on your page.

In order to use the <META> Tag in this way you will need to define the name attribute as a keyword or description. Then, you will use the content attribute to declare what keywords or what description you want to use. The example below is based off of someone who runs an on-line auto service.

<META name="keywords"
                    content="cars, automobiles, GM, Ford, Chrysler, Honda,
                                    Toyota, Daimler, trucks, vehicles">

<META name="description"
              content="Sells cars of all makes and models with lots of
                               options that other auto sites do not have. Get the
                                best prices on new and used trucks as well.">

By putting in both keywords and descriptions you have the best chance of getting a decent rating on a search engine. For more on search engine submission and the keyword/description aspect of the tag, take a look at this article on our Webmaster section. Now, on to another part of the <META> tag: The HTTP-EQUIV attribute.

The <Meta> Tag
Part Four: The HTTP-EQUIV Attribute 

The HTTP-EQUIV attribute can be used in the place of the name attribute. The major difference between the two is that unlike the name attribute, HTTP servers can read http-equiv. As a result there are more commands associated with the http-equiv attribute then with the name attribute.

One command that can be used is the page expires command. This will let your server know when to grab a newer version of your page.

<META http-equiv = "expires"
            content="Sat, 1 Jan 2000 1:00:00 GMT">

Another way to use the http-equiv tag is as a "re-direct". If you have moved your site from location to another, this is very helpful. Using the <META> tag, you will tell the browser to refresh in however many seconds you want them to wait. When it refreshes it will send them to a new page.

<META http-equiv = "refresh"
            content="10;
            URL=http://geocities.datacellar.net/dalpha2">

While both Netscape and Internet Explorer both support this feature, there are some browsers that do not. Keeping that in mind, you should always have a link to your new page on your jump page just in case.

You can also use this feature to refresh your page after a certain amount of time. Just leave off the URL.

<META http-equiv = "refresh"
            content="15">

Now your page will refresh every 15 seconds.

Basic HTML  Tutorial | Table Tutorial | Frames Tutorial | Forms Tutorial | Style Sheet Tutorial |