What are HTML meta tags? (Meta tag tutorial)

Source: Internet
Author: User

Meta Tags are hidden HTML tags of an HTML document that are not displayed in a browser but provide a browser or search engine robot with useful information.

Using meta tags?

Meta Tags are HTML tags that are encoded in

Tag along with</B> </span> tag. A meta tag is formatted in the following way, </P>
<P> <span style = "font-family: Arial; font-size: X-small;" mce_style = "font-family: Arial; font-size: X-small; "> <meta <span style =" color: # 0000ff; "mce_style =" color: # 0000ff; "> type </span> =" <span style = "color: #339900; "mce_style =" color: #339900; "> name </span>" content = "<span style =" color: # ff0000; "mce_style =" color: # ff0000; "> value </span>"> </span> </P>
<P> the colored parts of the meta tag shown will change depending on what type of meta tag you are writing. meta tags used by search engines have the <span style = "color: # 0000ff; font-family: Arial; font-size: X-small;" mce_style = "color: # 0000ff; font-family: Arial; font-size: X-small; "> type </span> value of <span style =" color: # 0000ff; font-family: arial; font-size: X-small; "mce_style =" color: # 0000ff; font-family: Arial; font-size: X-small; "> <B> name </B> </span> and meta tags used by browsers have the <span style =" color: # 0000ff; font-family: Arial; font-size: X-small; "mce_style =" color: # 0000ff; font-family: Arial; font-size: X-small; "> type </span> value of <B> <span style =" color: # 0000ff; font-family: Arial; font-size: X-small; "mce_style =" color: # 0000ff; font-family: Arial; font-size: X-small; "> HTTP-equiv </span> </B>. the example below deminstrates where a meta tag is placed in an HTML document. </P>
<Table border = "0" cellspacing = "0" cellpadding = "0" width = "90%" align = "center">
<P> <span style = "font-family: Arial; font-size: X-small;" mce_style = "font-family: Arial; font-size: X-small; "> <HTML> <br/>

Search engine meta tags

In the early days of the Internet, search engines use to visit Web sites and extract

Tag as the title of a Web page along with the first 200 characters as the description of the webpage. the problem which occurred was that the first 200 characters of a webpage didn't really describe the page correctly and most of the descriptions found in the search engines were very hard to read or understand. to solve this problem search engines defined a series of meta tags that they wocould index and use when they crawled websites.

The meta tags defined by search engines that wocould be used when searching through the search engine's index (database) are the meta-description and META keywords. the meta description tag allows webmasters to describe the web page in their own words and this description will be displayed underneath the webpage's title in the search engine listings. the META keywords tag allows webmasters to include key-words and key-phrases (two or more keywords) that describe the content of the webpage as a meta tag indexed by the search engine. below is an example of the meta-Description
And meta-keywords
Found in this HTML document.

Search engines have also defined another meta tag known as the meta robots that will allow website developers to decide whether they want the webpage to be indexed, archived, or crawler. the meta robots tag looks similar to the below,



The value of Value
Will vary depending on what a webmaster wishes the crawler to do. If a webmaster doesnt want the webpage to be indexed, then value
Wocould beNoindex

. If the webpage is not to placed in the search engines cache, then value
Wocould beNoarchive

. If the links on the page are not to be crawled by the search engine, then value
Wocould beNofollow

. To use two or more of these values, each value wocould be separted by a comma (ex.Noarchive, nofollow


To assist in the addition and modification of meta description and META keywords, I have developed a Windows program to insert and replace meta tags in HTML files. This program can be found here

Browser meta tags

Meta tags used by the browser define particle things about the document, like what character set to use when displaying the characters on the page, or what language the HTML document is written it, or how many long shoshould be waited before refreshing the page or redirecting to another webpage. below are examples of these different meta tags.

Setting the page's language

Setting the page's Character Set

Meta Refresh-refreshing the page after 10 seconds

Meta redirect-redirecting the page to hotmail.com after 10 seconds

Meta cache-instruct the browser not to cache the page

There are other browser related meta tags, but the main ones have been encoded ded above.

Search engine placement & ranking

Meta Tags are a useful tool for webmaster who wish to customize their web page listing in the search engines. meta Tags also help improve the placement or ranking of a website in search engines. it shoshould be noted that not all search engines use meta tags, some old search engines still havene' t taken the step forward to include this wonderful feature to their search engines (ex. lycos.com ).

HTML Title Tag


Tag isn't a meta tag, it is normally associated with the meta-description and meta-keywords because search engines display it on search result pages as the title of a webpage. the meta-description tag is normally displayed below the title tag in search engine results and an example is shown below.

Webmaster resources-the Emirates Network

Good collection free webmaster resources, tools, and articles for webmasters to assist them to improve and promote their website...

This article uses b3log solo
From ☆butterfly ice ☆
For synchronous Publishing.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.