Summary of how META tags are used

Source: Internet
Author: User


meta tags are used to describe an HTML page document properties, such as the page's author, date, page keywords, refresh, page level settings, etc., is the most basic meta-information in the document, this article is the meta-tag learning summary, the content is mostly from all over the Internet, non-original.

A good meta tag can improve the likelihood of your site being searched, and you need to take advantage of the META tag knowledge in search engine optimization.

Meta tags can be divided into two parts:

    • Http-equiv:http Title Information
    • Name: page description Information

HTTP-EQUIV is similar to the HTTP header protocol, which responds to the browser with some useful information to help correct and accurately display the content of the Web page. Common types of HTTP-EQUIV are: Content-type and content-language (display character set settings).

Here is an example code that describes the details of Http-equiv:

Code Listing 1:

<http-equiv= "Content-type"  Content= "text/html; charset=gb2312"/  >

This code specifies that the HTML page uses the character encoding for gb2312, that is, the national character code, different languages correspond to different charset, the Japanese corresponding character set is: "ISO-2022-JP", Korean corresponding character set: "ks_c_5601"

Code Listing 2:

<http-equiv= "Refresh"  content= "5; url=http:// "/>

This code allows the page to jump to the specified page within the specified 5 seconds, such as the blog home page, or automatically refresh the page.

Code Listing 3:

<http-equiv= "Expires"  content= "Mon,1,may 00:00:00 GMT"/ >

This code can be used to set the expiration time of the page, and once it expires, it must be recalled to the server (GMT time format).

Code Listing 4:

<http-equiv= "Pragma"  content= "No-cache"/> 

This code is used to prevent the browser from accessing the contents of the page from the cache of the local machine, and cannot be recalled from the cache once the page is left.

Code Listing 5:

<http-equiv= "Pics-label"  content= ""/>

This code is used to measure the level of a Web page, and there is a content setting in Internet options in IE that prevents you from browsing some restricted sites, and the site's limit level is set by the meta attribute.

Code Listing 6:

<http-equiv= "Windows-target"  content= "_top"/  >

This code can force the page to appear on a separate page in the current window, preventing its web page from being called by others as a frame. Content options: _blank, _top, _self, _parent

Code Listing 7:

<http-equiv= "Page-enter"  Content= "Revealtrans (duration=0.5, tansition=10 "/>
<http-equiv= "Page-exit"  Content= "Revealtrans (duration=0.5, Transition=12 "/>

Page-enter, page-exit are some special effects when the page is loaded and paged out. The corresponding also: Site-exit and Site-enter leave and enter the website. Content represents the effect settings for a Web page transition, in this case Revealtrans is a dynamic filter that can be used for entry and exit effects, duration represents the duration of the filter effect (in s), Transition: The type of the filter, and the value is 0 to 23.

  Note : These effects I did some of my own tests, in Chrome, FF, under the effects are not shown, the original (HTML page transition effect Daquan) in the test environment is IE5.5 above, but I use IE tester only in IE8 test the effect.

Name, common have keyword,description,robots, and so on, described below.


<name= "description"  content= "This is one of my blogs"/>

Description in the content= "", is the introduction of the page overview, this information may appear in the search results, so as far as possible to avoid and the content of the page is not related to the description.

    • The Web page is described as natural language rather than a list of keywords;
    • Describes the summary information that you want to show in search engine search results.
    • Must have a high degree of relevance to the title content of the page and the content of the Web page theme.
    • Do not exceed 255 characters, the search engine will generally index the first 255 characters in the description,

There is a tip: If you use the page encoding is UTF-8, then the punctuation in the description is best used in English, such as the English comma, period and so on. If it is in Chinese, then use Chinese punctuation.

In Google Webmaster tools, there is a very useful tool-web content analysis. It can make an accurate judgment and suggestion to all the description on your website, such as which description is duplicated, which description is too short or too long, which description is irrelevant to the content of the webpage and so on. (Google Webmaster tools: Http://


<name= "keywords"  content= "blog, meta tag"/>

Keywords and description are similar, but also used to describe the properties of a Web page, but the list is a keyword, not a summary of the page. Each keyword is separated by a comma (comma).

    • To choose the right keywords based on the theme and content of the Web page, the more core keywords are placed in front
    • Select keywords to consider both the core content of the Web page related, but also users easily through search engine retrieval, as far as possible to avoid the use of uncommon words to do the keyword.
    • Do not pile up too many keywords, listing a large number of keywords for the search engine does not have much meaning, for n many of the same type of site may also have side effects.

Look at the description and keywords of the blog park:

<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "Utf-8"><title>Blog Park-Developer's online home</title><Metaname= "keywords"content= "Developer, blog Park, developer, program Ape, Cheng, geek, programming, code, open source, it website, Developer,programmer,coder,geek, technology community"/>
<Metaname= "description"content= "Blog Park is a knowledge-sharing community for developers. Since its inception, the blog Park has been dedicated and focused on creating a pure technology exchange community for developers, driving and helping developers to share knowledge through the Internet, which will benefit more developers. The mission of the blog Park is to help developers change the world with code. " />

The above from the blog home page source code in the <meta> section, refer to.


<name= "Robots"  content= "All"/>

Many search engines are through the release of Robot/spider search site, Robot/spider automatically search the WWW, when the discovery of new sites, these robot/spider will retrieve the page keywords and descript, Then add it to your own database. Robots is used to tell the robot which pages need to be indexed, which pages are not, and the content parameters are: All, none, Index, NOINDEX, follow, nofollow. By default, all is the case.

    • All: The file will be retrieved, and the link to the page can be queried.
    • None: The page is not retrieved and the link to the page cannot be queried.
    • Index: The file will be retrieved and let Robot/spider log in.
    • Follow: The link to the page can be queried.
    • NOINDEX: Prevents the page from being indexed, the link to the page can be queried (do not let Robot/spider log in).
    • Nofollow: Prevents any links in the page from being indexed (note that this differs from the Nofollow property on the hyperlink, which is just a separate link to the organization index.)

Meta information is a description of the page itself to the search engine. Sometimes, we may need to reject a search engine to access a folder on our site (such as a background folder), or to block the index of some search engines, we can use the robots.txt file to restrict some permissions. This article is no longer detailed, you can search the relevant content.


<name= "Author"  content= "Guihailiuli"/>

This code can explain the author of the page, content can be the creator or contact information.


<name= "Coptright"  content= "Created by Guihailiuli"/> 

The copyright of the description page.


<name= "Revisit-after"  content= "7 Days"/> 

Set the Robot/spiser time, General large web site, spider crawling frequency is very frequent, causing the server pressure. So the limit is to allow spiders to revisit within a limited date, for example, 7 days is a seven-day visit


<name= "Distribution"  content= "Global"/>

This code refers to the areas in which the site appears, and is generally set to global.


In Baidu, the home page of the META tag see the following code:

<http-equivcontent= "ie=edge,chrome=1"> 

What is the role of adding x-ua-compatible and ie=edge,chrome=1 in HTML meta?

X-ua-compatible is since IE8 new add a location, to IE8 the browser is not the other, by setting the value of x-ua-compatible in meta, you can specify the compatibility mode settings of the Web page.

The pattern specified in the Web page takes precedence over the mode specified by the server through the HTTP header.

Examples of common use:

<Metahttp-equiv= "X-ua-compatible"content= "Ie=7">#以上代码告诉IE浏览器, IE8/9 will render the page with the IE7 engine, regardless of whether the document standard is declared with a DTD. <Metahttp-equiv= "X-ua-compatible"content= "Ie=8">#以上代码告诉IE浏览器, IE8/9 will render the page with the IE8 engine. <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">#以上代码告诉IE浏览器, IE8/9 and later versions will render pages with the highest version of IE. <Metahttp-equiv= "X-ua-compatible"content= "Ie=7,ie=9">  <Metahttp-equiv= "X-ua-compatible"content= "ie=7,9">  <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1">#以上代码IE =edge tells IE to render the page using the latest engine, chrome=1 can activate the chrome Frame.
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

The edge tells IE to render the document in the highest mode, that is, any IE version is rendered in the highest level standard mode supported by the current version, avoiding the effect of the version upgrade, that is, what version of IE is used to render in the standard mode.

<meta http-equiv= "x-ua-compatible" content= "chrome=1" >

Use this code to force IE to use chrome Frame rendering. About Chrome frame can be viewed on Wikipedia: Google Chrome Frame

Other Notes:

    • "Ie=edge,chrome=1", the drawback is that the code can not pass the certification, but if only this one "error" basically will not have any adverse effect.
    • The x-ua-compatible header is not case sensitive according to the official website, however, it must appear in the Web page before all other elements except the title element and other meta elements. If not, it doesn't work.

See the above code in more detail here: Http://

Summary of how META tags are used

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: 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.