Meta tag usage summary, meta tag usage
MetaTags are used to describe the attributes of an HTML webpage document. For example, the author of the webpage, date, keyword of the webpage, refresh, and page level setting are the most basic metadata in the document, this article is a summary of meta tags, most of which come from different places on the Internet and are not original.
A good meta tag can improve the possibility of your website being searched. You need to make good use 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
Similar to the http header protocol, http-equiv responds to some useful information from the browser to help correctly and accurately display webpage content. Common http-equiv types include Content-Type and Content-Language ).
The following sample code describes the details of http-equiv:
Code 1:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
This Code specifies the character encoding for the HTML page to gb2312, that is, the national standard Chinese character code, different languages correspond to different charset, the Japanese character set is: "iso-2022-jp ", character Set corresponding to Korean: "ks_c_5601"
Code 2:
<meta http-equiv="Refresh" content="5; url=http://www.cnblogs.com" />
This Code enables the webpage to jump to the specified page within the specified 5 seconds, such as the homepage of the blog garden or automatic page refreshing.
Code 3:
<meta http-equiv="Expires" content="Mon,1,May 2015 00:00:00 GMT" />
This code can be used to set the expiration time of a webpage. Once it expires, it must be re-called on the server (in GMT format ).
Code 4:
<meta http-equiv="Pragma" content="no-cache" />
This code is used to disable the browser from accessing the page content from the Cache on the local machine. Once the page is set, it cannot be called out from the Cache.
Code 5:
<meta http-equiv="Pics-label" content="" />
This code is used to evaluate the web page level. There is a content setting in the internet option of IE to prevent browsing of some restricted websites. The website's restricted level is set through the meta attribute.
Code 6:
<meta http-equiv="windows-Target" content="_top" />
This code forces the page to be displayed on an independent page in the current window to prevent its webpage from being called as a frame. Content options: _ blank, _ top, _ self, and _ parent
Code 7:
<Meta http-equiv="Page-Enter" Content="revealTrans(Duration=0.5,tansition=10" />
<Meta http-equiv="Page-Exit" Content="revealTrans(Duration=0.5,transition=12" />
Page-Enter and Page-Exit are some special effects when the Page is loaded and called up. Site-Exit and Site-Enter also Exit and Enter the website. Content indicates the effect settings of the webpage transition. In this example, RevealTrans is a kind of dynamic filter that can be used to enter and exit the effect. Duration indicates the Duration of the filter effect (unit: s), Transition: indicates the filter type. The value ranges from 0 to 23.
Note:: I did some tests on these special effects. The special effects cannot be displayed in Chrome, FF, or lower versions. In the original article (HTML), the test environment is IE5.5, however, I used IE tester to test the effect only in IE8.
Name, common Keyword, Description, and Robots.
Description:
<Meta name = "description" content = "this is my blog"/>
Content = "" in description is an overview of the Web page. This information may appear in the search results. Therefore, avoid irrelevant descriptions of the web page content as much as possible.
- Web pages are described as natural languages rather than listing many keywords;
- The description is the abstract information that you want to display in the search engine search results.
- It must be highly relevant to the webpage title content and the webpage topic content.
- It must not exceed 255 characters. Search Engines generally index the first 255 characters in Description,
TIPS: if you are using a Web code is UTF-8, it is best to use English Punctuation in the Description, such as English commas, periods and so on. If it is Chinese, use Chinese punctuation.
In Google's website administrator tool, there is a very useful tool-web content analysis. It can make an accurate judgment and Suggestion on all the descriptions on your website, such as which descriptions are repeated and which ones are too short or too long, which descriptions are irrelevant to the webpage content. (Google website administrator tool: http://www.google.com/webmasters/tools? Hl = zh_CN)
Keywords:
<Meta name = "keywords" content = "blog, meta tag"/>
Similar to description, Keywords are used to describe the attributes of a webpage, but only Keywords rather than summaries of webpages are listed. Keywords are separated by commas.
- You need to select the appropriate keywords Based on the subject and content of the webpage. The more core the keywords are, the more advanced the keywords are.
- When selecting keywords, you must consider the core content of the web page, and make it easy for users to search by search engine. Avoid using uncommon words as keywords.
- Do not pile up too many keywords. listing a large number of keywords does not make much sense for search engines. For N multiple websites of the same type, there may be side effects.
Let's take a look at the description and Keywords of the blog Park:
<! DOCTYPE html> <Meta name = "description" content = "blog is a knowledge sharing community for developers. Since its creation, the blog Park has been dedicated to creating a pure technical exchange community for developers, promoting and helping developers share knowledge through the Internet, so that more developers can benefit from it. The mission of the blog Park is to help developers use code to change the world. "/>
For the <meta> section in the source code of the above webpage from the blog homepage, refer.
Robots:
<meta name="Robots" content="All" />
Many search engines release robot/spider search websites, and robot/spider will automatically search on www. After a new website is found, these robot/spider will search for keywords and descript on the page, then join the database. Robots is used to tell Robots which pages require indexes and which pages are not required. The content parameters include all, none, index, noindex, follow, and nofollow. The default value is all.
- All: The file will be retrieved, and the page link can be queried.
- None: the page is not retrieved, and the link of the page cannot be queried.
- Index: the file will be retrieved to log on to the robot/spider.
- Follow: page links can be queried.
- Noindex: prevents the page from being indexed, And the link of the page can be queried (do not allow robot/spider to log on ).
- Nofollow: prevents indexing of any link on the page (note, this is different from the nofollow attribute on the hyperlink, which is only a separate link for organizing the index.
META information is a description of the page itself to the search engine. To restrict some permissions. This document will not be detailed. You can search for relevant content by yourself.
Author:
<meta name="Author" content="guihailiuli" />
This code shows the author of The webpage. The content can be the producer or contact information.
Copyright:
<meta name="Coptright" content="Created By guihailiuli" />
Copyright of the page.
Revisit-after:
<meta name="revisit-after" content="7 days" />
Set the re-access time of the robot/spiser. Generally, a large website crawls frequently, causing heavy load on the server. Therefore, the restriction is to allow the spider to re-access within a specified period of time. For example, 7 days is the same as 7 days.
Distribubtion:
<meta name="Distribution" content="Global" />
This code is used to indicate the regions in which the website is located. Generally, if it is set to Global, it indicates the Global scope.
Supplement:
The following code is displayed in the meta tag of Baidu and zhihu homepage:
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
What is the role of adding X-UA-Compatible and IE = Edge to HTML Meta, chrome = 1?
X-UA-Compatible is a new location added by IE8, which is not recognized by the IE 8 browser. By setting the X-UA-Compatible value in meta, you can specify the webpage compatibility mode settings.
The mode specified in the webpage takes precedence over the mode specified by the server through HTTP Header.
Common examples:
<Meta http-equiv = "X-UA-Compatible" content = "IE = 7"> # the above Code tells IE that whether or not to declare document standards with DTD, IE8/9 uses IE7 engine to render pages. <Meta http-equiv = "X-UA-Compatible" content = "IE = 8"> # the above Code tells IE that IE8/9 will render the page with the IE8 engine. <Meta http-equiv = "X-UA-Compatible" content = "IE = edge"> # Tell IE, IE8/9 and later versions will use the highest version of IE to render the page. <Meta http-equiv = "X-UA-Compatible" content = "IE = 7, IE = 9 "> <meta http-equiv =" X-UA-Compatible "content =" IE = 7,9 "> <meta http-equiv =" X-UA-Compatible "content = "IE = Edge, chrome = 1 "> # the above Code IE = edge tells IE to use the latest engine to render Web pages. chrome = 1 can activate Chrome Frame.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Edge tells IE to render documents in the highest mode, that is, any IE version is rendered in the highest standard mode supported by the current version, to avoid the impact of version upgrade, that is: what version of IE is rendered in standard mode?
<Meta http-equiv = "X-UA-Compatible" content = "chrome = 1">
Use this code to force IE to use Chrome Frame rendering. For Chrome Frame information, go to the Encyclopedia: Google Chrome Frame
Other notes:
- "IE = Edge, chrome = 1", the drawback is that the Code cannot pass W3C verification, but only this "error" will basically have no adverse impact.
- The X-UA-compatible header is case-insensitive according to the definition on the official website. However, it must be displayed before the title and other meta elements on the webpage. If not, it does not work.
For more information about the above Code, see http://www.tuicool.com/articles/ra6fjuj.