{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
Using meta tags in HTML
Summary
Because of the widespread abuses of the HTML meta tag, certain meta tags are not looked at by the search engines. However, they might help a bit (especially the description part). This article discusses various aspects of the meta tag.
 
Table of Contents

The Meta Element

Examples of the Meta Element

Code Listing 1. Examples of Meta Tags

Attributes of the Meta Element

http-equiv

Code Listing 2. The http-eqiv attribute in the meta element

name

Code Listing 3. Name attribute

content

Code Listing 4. Content attribute

scheme

Code Listing 5. Scheme attribute

Common uses of meta element

http-equiv and ContentType

Code Listing 6. Meta tag for UTF-8

Code Listing 7. Meta tag for ISO-8859-1

name and content

Description

Code Listing 8. Description Meta tag

Figure 1. Description Meta Tag for whitehouse.gov

Code Listing 9. The actual meta tags on whitehouse.gov

Figure 2. Description of White House site on Google (from the description meta tag)

Figure 3. Description of White House site on MSN (from the description meta tag)

Keywords

Code Listing 10. Meta tags on YouTube

Author

Code Listing 11. Author Meta tag

Caching the information

Code Listing 12. Caching the page

Asking Search Engines to do or not do something

Code Listing 13. Instructions to search engines via meta tags

Site Specific Meta Tags

Code Listing 14. Site specific meta tags

Articles on Meta Tags

 

The Meta Element

Meta means data about data or information about information or description of the data. A given web page will present some information to the user. The meta tags provide information about that data/content/information that is being presented to the user.

For example, this meta data will say what the content type is (for example, the content is textual and in HTML format). The user of the web page doesn’t need to know this information about the content that is being presented. However, the web browser might need to know that information; Or, the search engines might be helped by this meta data in understanding and categorizing the web page that is being presented to the user.

For that reason, the meta tags are added to the <head> section of the HTML page, not to the <body> section (The only thing that users see from the <head> section is the <title>).

Examples of the Meta Element

Following are some examples of the meta elements.

Code Listing 1. Examples of Meta Tags

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="description" content="Description of this page" />
<meta name="keywords" content="keyword1, keywords" />
<meta name="author" content="Site Team" />

<meta name="robots" content="index,follow,noarchive" />
<meta name="GOOGLEBOT" content="NOARCHIVE" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="refresh" content="1200;URL=/home/us?refresh=on" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta id="msve_title" content="Live Search Maps" name="title"/>

<meta name="section" content="Home" />
<meta name="subsection" content="Home Page Subscriber" />
<meta name="displayname" content="U.S. Home" />

In the above examples, there are some meta tags that you would find pretty much everywhere (i.e. pretty much every site and web page). It is NOT illegal to NOT have <meta> tags on a page. Without the meta tags, the page would load fine into the browsers. The search engines will index the pages; however, some meta tags would help search engines. Some meta tags would serve as documentation for the page and might be used by custom search engines or utilities.

Attributes of the Meta Element

The meta element can have the following four attributes:

  • http-equiv
  • name
  • content
  • scheme

In addition, you can use the lang and dir attributes with the meta element. The lang attribute is for specifying the language; and the dir attribute is specifying the direction (LTR – Left-To-Right, RTL – Right To Left).

http-equiv

The meta tags defined with http-eqiv comes from the HTTP standard. For example Cache-Control/no-cache means that each time a request is made by the user’s browser, it must be revalidated with server.

Code Listing 2. The http-eqiv attribute in the meta element

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="refresh" content="1200;URL=/home/us?refresh=on" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />

name

The name and content attributes are used together a lot in the meta tags. With the name attribute you are saying that this is the type of information I am providing in the content attribute. No standards are defined for what goes into either name or content.

Code Listing 3. Name attribute

<meta name="description" content="Description of this page" />

content

The content attribute is the second piece of the name-content pair.

Code Listing 4. Content attribute

<meta name="keywords" content="keyword1, keyword2" />

scheme

The scheme attribute provides additional information about the formatting of the data in the content attribute. For example, date can be expressed in several different ways – (ddmmyy, mmddyy, yymmdd, etc.). Without the information about the way this data is arranged, it becomes difficult to understand what’s going on.

The scheme attribute is used with name and content. But you don’t see this attribute much on the Internet.

Code Listing 5. Scheme attribute

<META scheme="USA" name="date" content="01-01-2008">

Common uses of meta element

This section describes a series of common meta tags you would find on the web sites.

http-equiv and ContentType

Specifying the content type of the web page is perhaps the most commonly used meta tag. Typically a web page is in text/html format and it is using utf-8 character set.

In this case, the http-equiv attribute takes Content-Type as the value; and the content attribute takes “text/html; charset=utf-8” as the value. UTF-8 is a popular mechanism for encoding Unicode characters.

Code Listing 6. Meta tag for UTF-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

For the content type you might also see the following line, where the character set used is ISO-8859-1. This is another popular character set.

Code Listing 7. Meta tag for ISO-8859-1

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

name and content

The section below talks about various meta tags using the name and content attributes for the meta element. The examples of what goes into name are description, keywords, author, etc. For these same names you would provide the description of the page, keywords relevant to page, and the writer of the page into the content attribute.

Description

Description is probably the most important meta tag that changes from page to page.

Code Listing 8. Description Meta tag

<meta name="description" content="Description of this page" />

This description meta tag is most definitely used by the search engines, including Google. Let’s see how the description meta tag from whitehouse.gov is used in the search engines.

Figure 1. Description Meta Tag for whitehouse.gov

Figure 1. Description Meta Tag for whitehouse.gov

In the figure above, you can see the description meta tag for whitehouse.gov containing:

  • Words: 43
  • Characters (without spaces): 222
  • Characters (with spaces): 264

That is a fairly succinct description of the main page of the site – it must capture the essence of the entire site. It used two sentences. Following code shows the actual meta tags on whitehouse.gov.

Code Listing 9. The actual meta tags on whitehouse.gov

<meta name="date" content="2001-01-01"/>

<meta name="description" content="Whitehouse.gov is the official web site for the White House and President George W. Bush, the 43rd President of the United States. This site is a source for information about the President, White House news and policies, White House history, the federal government"/>

<meta name="keywords" content="social security, medicare, energy, tax relief, Education, policies, White House history, White House news, news, United States of America, 43rd President, George W., W., George W, President George W. Bush, President Bush, White House, government"/>

Now let’s see how search engines display that information.

Figure 2. Description of White House site on Google (from the description meta tag)

Figure 2. Description of White House site on Google (from the description meta tag)

As you can see from the figure above, Google is getting the information about the whitehouse.gov page from its description meta tag. You won’t see this information on the page itself (and this description would have to be changed in 2009 – as the description above refers to President George W. Bush).

As you can see, Google has just two lines to display the description. So, it won’t be able use all the text provided in the description meta tag.

  • Words: 28
  • Characters (without spaces): 129
  • Characters (with spaces): 156

From the above numbers, the ideal description size would be about 25 words / 150 characters. You can definitely use more text, but you would want to put the essence upfront. Other online directories and tools might display more / all of the description text.

Now let’s look at the way description meta tag is made use of on Microsoft Live (MSN Search).

Figure 3. Description of White House site on MSN (from the description meta tag)

Figure 3. Description of White House site on MSN (from the description meta tag)

The length of description is slightly longer on MSN Search / Microsoft Live compared to Google.

  • Words: 31
  • Characters (without spaces): 148
  • Characters (with spaces): 178

Roughly the same guideline for length of description applies here: 25 words / 150 characters.

Now, it needs to be said here that all search engines / directories / utilities might not use the text contained in the description meta tag. Some might try to make their own description. Some might use custom / human-entered descriptions. And there are no strict rules to the length of description.

Keywords

The Keywords meta tag used to be a great source for search engines in order to get to the page fast. But there were plenty of abuses – people would stuff their web pages with tons of keywords that have nothing to do with the content of the page. So, search engines like Google make up their own keywords from the actual content of the page.

However, if you are a heavily content based site, the tags used for the content of the page can become keywords in the keywords meta tag. Following shows the keywords meta tag on YouTube’s Shakira song.

Code Listing 10. Meta tags on YouTube

<meta name="title" content="Shakira featuring Wyclef Jean - Hips Don’t Lie (featuring Wyclef Jean)">

<meta name="description" content="Shakira featuring Wyclef Jean Hips Don’t Lie (featuring Wyclef Jean)(C) 2006 SONY BMG MUSIC ENTERTAINMENT (Holland) B.V.">

<meta name="keywords" content="Shakira, featuring, Wyclef, Jean, Hips, Don’t, Lie, (featuring, Jean), Pop, Music, Video">

You can see that the keywords used above are very relevant to that page.

Author

The author meta tag is NOT as widely used as Content-Type or Description or Keywords.

Code Listing 11. Author Meta tag

<meta name="author" content="Site Team" />

Lot of sites use just a generic name for the author – most pages might not have a specific set of authors.

Caching the information

If the content of the page changes quickly, you would want to specify no-cache for Cache-Control.

Code Listing 12. Caching the page

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="refresh" content="1200;URL=/home/us?refresh=on" />

Asking Search Engines to do or not do something

Lot of news sites have content that changes on a continual basis. Let’s say, the front page lists the important news stories of the hour – there is no point in search engine indexing that information (you want the actual story with the unique url indexed).

Code Listing 13. Instructions to search engines via meta tags

<meta name="robots" content="index,follow,noarchive" />
<meta name="GOOGLEBOT" content="NOARCHIVE" />

You can give instructions to robots (search engines, bots, web robots, crawlers) using the robots meta tags. In the content attribute you would specify the instructions. Most robots understand index and follow (plus noindex and nofollow). But some search engines understand other options like noarchive.

You can also use googlebot meta tag and provide instructions just to Google’s indexing crawler. For example, Google understands the following NO values in the content:

  • NOINDEX
  • NOFOLLOW
  • NOARCHIVE
  • NOSNIPPET
  • NOODP
  • NONE

Site Specific Meta Tags

And finally, you can include a series of custom, site-specific meta tags. Search engines and crawlers don’t understand this information, but it would serve as documentation for the page (and a utility can use these tags if it has the functionality to understand them)

Code Listing 14. Site specific meta tags

<meta name="section" content="Home" />
<meta name="subsection" content="Home Page Subscriber" />
<meta name="displayname" content="U.S. Home" />

Articles on Meta Tags

Using meta tags in HTML

Use of Meta tags on popular sites

Adding Meta tags programmatically

Bookmark and Share This

More Articles With Similar Tags
icon-meta-google.jpg
Popular sites use the meta tags extensively even though the power and usefulness of this has gone down from the search engine perspective after years of inaccurate and abusive usage of the keywords. This article looks at how the popular sites are using the meta tags.
icon-meta-htmlhead-htmlmeta.jpg
This article discusses adding <meta> tags programmatically into the <head> section of an HTML page via ASP.NET. Two classes in the .Net Framework – HtmlHead and HtmlMeta – are discussed.
About  Contact  Privacy Policy  Site Map