Importance of Meta Tags

The < meta > tag, live in the < head > rather than the < body > of a document and contain information about a document (rather than information that is part of the document that you would see in the browser window). The information can be used for a number of purposes including helping search engines index your site, specifying the author of a document, and, if the document is time - sensitive, specifying when the page should expire.

The < meta > element is an empty element and so does not have a closing tag. Instead, < meta > elements carry information within attributes, so you need a forward slash character at the end of the element.

For example, here is a < meta > element that provides a description of a online tutorial web site:

< meta name=”description” content=”read a online tutorial for html” / >

The < meta > element can take eight attributes, four are universal attributes

dir
lang
xml:lang
title

The other four < meta > element are:

schema
name
content
http – equiv

The name and content attributes tend to be used together, as do the http - equiv and content
attributes. These pairings will be addressed next.

Name and Content Attributes

The name and content attributes specify properties of the entire page. The value of the name attribute is the property you are setting, and the value of the content attribute is the setting that you want to give this property.
Here you can see a < meta > element where the name attribute indicates that you are going to specify a description for the page, and the content attribute is where this description of the page goes:

< meta name=”description” content=”read online tutorial of html” / >

The value of the name attribute can be anything; no restrictions are published in any standards.
Therefore, if you need to add your own information about a document and its content, you can use this element. Some predefined values for this attribute that are commonly used are:

description : Specifies a description of the page

keywords : Contains a list of comma - separated keywords that a user might search on to find
the page

robots

Indicates how search engines should index the page The description and keywords properties can be used by programs called crawlers, bots, or spiders, which most search engines use to help index web sites. Therefore, they ’ re worth adding to any web page. These programs go through web sites, adding information to the databases used by the search engines, following links as they come across them, indexing those pages, and so on — this is how search engines manage to index so many sites.

Using name with a Value of description

You have already seen an example of giving the name attribute a value of description , and using the content property to specify a sentence that describes the site. Some search engines display the value of the description property in their search results.
A description should be a maximum of 200 characters long, although some search engines, such as Google, display only the first 100 characters. Therefore, you should try to get across the main content in the first 100 characters.

For example, here is the < meta > tag showing the description of the www.tutorial4us.com homepage (at the time this site is design):

< meta name=”description” content=”this site is free for every one” / >

And here is the description that you will see if you type tutorial4us:

“we find all the tutorials related to this site”.

Using name with a Value of keywords

The keywords property was created to supply a list of words that a search engine could use to index the site. In practice, search engines take very little (if any) notice of this anymore, although many sites will still provide keywords in this manner. For example, an online tutorial might use keywords, such as this:

< meta name=”keywords” content=”online tutorial for java, c, c++, html, CSS” / >

A rough guideline to the limit of the text should be around 200 characters. You should never use words that do not directly relate to the content of the site. Ideally, the same keywords should also appear in the text for that page.
You could also use the lang attribute in conjunction with the description and keywords to indicate the language they are using, or to offer keywords in multiple languages. For example, here are the keywords in U.S. English:

< meta name=”keywords” content=”online tutorial java, c, c++, html, CSS” lang=”en-us” / >

And again in French:

< meta name=”keywords” content=” online tutorial java, c, c++, html, CSS” lang=”fr” / >

And finally in German:

< meta name=”keywords” content=” online tutorial java, c, c++, html, CSS” lang=”de” />

Using name with a Value of robots

As I mentioned earlier, many search engines use programs to index web pages on their behalf. You can use the name attribute with a value of robots to prevent one of these programs from indexing a page or from following links on the page (because many of these programs follow the links they find on your site and index those, too). For example, you probably would not want a search engine to index any pages that you are still developing, or which you use to administer the site.

Here you can see that the < meta > element tells search engines not to index the current page or to follow any of the links on it to index those.

< meta name=”robots” content=”noindex, nofollow” / >

The content attribute can have the values shown in the table that follows.

Value	Meaning
all	Index all pages
None	Index no pages
Index	Index this pages
noIndex	Do not Index this page
follow	Follow link from this page
Nofollow	Do not Follow link from this page

By default the values would be all , index , and follow , allowing web crawlers to follow any link and index all pages.

If you want to prevent pages from being indexed you should use this technique in conjunction with a file called robots.txt , which is discussed in the “ robots.txt ” section later in this chapter.

http - equiv and content

The http - equiv and content attributes are paired together to set HTTP header values. Every time a web browser requests a page, HTTP headers are sent with the request, and each time the server responds sending a page back to the client, it adds HTTP headers back to the client: The headers sent from a browser to a server when it requests a page contain information such as the type of browser, the operating system, the screen resolution, the date, the formats the browser will accept, and other information about the user ’ s configuration. The headers returned from a server to a web browser contain information such as the type of web server, the date and time the page was sent, and the date and time the page was last modified. Of course, the headers can contain much more information, and using the < meta > tags is one way of adding new headers to be sent with the document. For example, you might want to add a header to indicate when the page should expire (no longer be valid) — which is especially helpful if the document contains things such as special offer prices which you know will expire on a certain date — or to refresh a page after a period of time.

Expiring Pages

It can be important to expire pages because browsers have something known as a cache , a space on the hard drive where they store pages of web sites you have visited. If you go back to a site you have already visited, the browser can load some (or all) of the page from the cache rather than having to retrieve the whole page again. This is done because it can make the page load quicker (since the browser does not have to collect as much data).

Here you can see a < meta > tag that will cause the page to expire on Friday, April 16, 2011, at 11:59 (and 59 seconds) p.m. Note that the date must follow the format shown.

< meta http-equiv=”expires” content=”Fri, 16 April 2011 23:59:59 GMT” / >

If this were included in a document and the user tried to load the page after the expiry date, then the browser would not use the cached version; rather it would try to find a fresh copy from the server. This helps ensure that users get the latest copies of documents and thereby prevents people from using out -of - date information.

Preventing a Browser from Caching a Page

You can prevent some browsers from caching a page altogether using the value pragma for the http - equiv attribute and a value of no - cache for the content attribute like so:

< meta http-equiv=”pragma” content=”no-cache” / >

Refreshing and Redirecting Pages

You can set a page to refresh after a certain number of seconds using the following < meta > tag, which gives the http - equiv attribute a value of refresh :

< meta http-equiv=”refresh” content=”10;URL=http://www.tutorialguru.in” / >

This will cause the page to refresh itself after 10 seconds. You can see the number of seconds given as the first part of the value for the content attribute, which is followed by a semicolon, the keyword URL, an equal sign, and the address of the page to be refreshed. You can even refresh to a different page. For example, if your site moves from one domain to another, you can leave a page up for visitors who go to the old domain saying that you have moved and that the user will be redirected automatically in five seconds. When you use this technique to reload the same page it is referred to as refreshing the page, while sending the user to a new page or site is called redirecting the user. It is generally considered bad practice to refresh entire pages, in particular because someone might be in the middle of reading the page when you refresh it. It is important to bear in mind that some people will not read a page at the same speed as others (especially if they have a screen reader to read the page to them, in which case the page ’ s automatically refreshing would be very frustrating). The one exception to this rule would be sites such as sports results, online chat applications, or auction sites where parts of the page refresh so that the user has the latest information — although this kind of refresh is done using very different techniques.