Introduction to HTML META tag usage

Brief introduction

In the lookup W3school, the first sentence of "meta-data" Let me start the Google trip. And then very smoothly in the English version of the W3school found the desired results. (Chinese w3school is the meta-information, Google and Baidu have no relevant terms.) But metadata is explained in detail in Google. So here's an English version of W3school's explanation. ）

The <meta> tag provides metadata about the HTML document. Metadata is not being displayed on the page, but would be a machine parsable.

It is not difficult to see, the key is metadata, Chinese name metadata, is used to describe the data. It will not appear on the page, but the machine will recognize it. This way the META tag works well.

Use

Meta elements is typically used to specify page description, keywords, author of the document, last modified, and other m Etadata.

The metadata can used by browsers (how to display content or reload page), search engines (keywords), or other web serv Ices

This statement is simple and concise about the usefulness of meta tags. Meta is often used to define page descriptions, keywords, last modified dates, and other meta-data. These metadata will serve the browser (how to layout or reload pages), search engines and other Web services.

Composition

The META tag has two properties, namely the Http-equiv property and the Name property.

1. Name property

The name attribute is primarily used to describe web pages, such as keywords, narratives, and so on. The corresponding property value for Content,content is the description of the name fill type, which is convenient for search engine crawling. The syntax format for the name attribute in the META tag is:

<meta name="参数" content="具体的描述">。

There are several parameters for the Name property. (A-c is a common attribute)

A. Keywords (keywords)

Description: Used to tell the search engine the keywords of your webpage. Example:

<meta name="keywords" content="Lxxyx,博客，文科生，前端">

B. Description (Description of website content)

Description: Used to tell the search engine the main content of your site. Example:

<meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">

C. Viewport (mobile window)

Description: This concept is more complex and will be described in the next blog post. This property is often used to design mobile Web pages. In the use of Bootstrap,amazeui and other frameworks have been useful viewport.

Example (common example):

<meta name="viewport" content="width=device-width, initial-scale=1">

D. Robots (definition of search engine crawler indexing method)

Description: Robots is used to tell the crawler which pages need to be indexed and which pages do not. The content parameters are all,none,index,noindex,follow,nofollow. The default is all.

Example:

<meta name="robots" content="none">

The specific parameters are as follows:

1.none: Search engine will ignore this page, equivalent to Noindex,nofollow.
2.noindex: Search engines do not index this page.
3.nofollow: The search engine does not continue to search for other pages through the link index of this page.
4.all: The search engine will index this page with a link to continue through this page, equivalent to Index,follow.
5.index: Search engine Index this page.
6.follow: The search engine continues to search for other pages through the link index of this page.

E. Author (author)

Description: Used to annotate Web page author examples:

<meta name="author" content="Lxxyx,[email protected]">

F. Generator (Web authoring software)

Description: Used to indicate what the Web page is for example: (I don't know if I can write this):

<meta name="generator" content="Sublime Text3">

G. Copyright (Copyrights)

Description: Examples for labeling copyright information:

<meta name="copyright" content="Lxxyx"> //代表该网站为Lxxyx个人版权所有。

H. revisit-after (search engine crawler re-visit time)

Note: If the page is not updated frequently, in order to alleviate the search engine crawler to the server pressure, can set a crawler's revisit time. If the revisit time is too short, the crawler will be accessed by the default time they define. Example:

<meta name="revisit-after" content="7 days" >

I. Renderer (Dual-core browser rendering mode)

Description: Renderer is intended for dual-core browsers to specify how the dual-core browser renders the page by default. For example, browsers. Example:

<meta name="renderer" content="webkit"> //默认webkit内核<meta name="renderer" content="ie-comp"> //默认IE兼容模式<meta name="renderer" content="ie-stand"> //默认IE标准模式

2. HTTP-EQUIV Properties

Before the introduction, let's say a little episode. Read the documentation and blogs about HTTP-EQUIV's introduction, there is this sentence.

Http-equiv, as the name implies, corresponds to the file header of HTTP.

I was confused when I first saw this sentence. Because I look at all kinds of technical terms, will be habitual to remember its English name. The full name of EQUIV is "equivalent", meaning equal, equivalent. Then I got a big puzzle in my head: "http equals?" ”

And then I was going to ask segmentfault questions. As a result, when writing a problem, the sudden reaction of equivalent and the equivalent meaning. It means the equivalent of the HTTP function. As for where the head of the file comes out, it is estimated that it is analyzed from its role. I do not think that the name implies that "the equivalent of HTTP file header effect" this assertion.

This is an introduction to what I think is http-equiv meaning.
相当于HTTP的作用，比如说定义些HTTP参数啥的。

The HTTP-EQUIV attribute syntax format in the META tag is:

<meta http-equiv="参数" content="具体的描述">

Where the Http-equiv property mainly has the following kinds of parameters:

A. Content-type (set page character set) (recommended for use with HTML5)

Description: Used to set the page character set, easy browser parsing and rendering page example:

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

B. X-ua-compatible (what version of the browser to render the current page)

Description: Used to tell the browser which version to render the page in. (typically set to the latest mode, this setting is also common in various frameworks.) For example

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

C. Cache-control (Specify the caching mechanism that requests and responses follow) Usage 1.

Description: Instructs the browser how to cache a response and how long it is cached. This section of the content I found on the internet for a long time, but have not found satisfactory. Finally, I found the answer I wanted in Google developers.

Example:

<meta http-equiv="cache-control" content="no-cache">

There are several uses:

1. No-cache: Sends the request first, verifies with the server whether the resource has been changed, and uses the cache if it has not been changed.

2. No-store: Do not allow caching, go to the server every time, download the full response. Security measures

3. Public: Caches all responses, but not necessarily. Because Max-age can achieve the same effect

4. Private: Caches only for individual users and therefore does not allow any trunks to be cached. (e.g. CDN does not allow caching of private responses)

5. MaxAge: Represents the start of the current request, how long the response will be cached and reused without the server being re-requested. For example, max-age=60 indicates that the response can be cached and reused for 60 seconds.

Reference Link: HTTP cache

Usage 2. (Prohibit Baidu automatic transcoding)

Description: Used to prohibit the current page in the mobile browsing, by Baidu automatic transcoding. Although Baidu's intention is good, but the transcoding effect is often unsatisfactory. So you can add the example in the head of the sentence, you can avoid Baidu automatic transcoding. Example:

<meta http-equiv="Cache-Control" content="no-siteapp" />

D. Expires (page expiry time)

Description: Used to set the expiration time of the Web page and the page must be retransmitted to the server after it expires. Example:

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

E. Refresh (automatically refreshes and points to a page)

Description: The webpage will automatically refresh and adjust to the set URL within the set time. Example:

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客

F. Set-cookie (Cookie setting)

Description: If the page expires. The local cookies on this page will also be deleted automatically.

<meta http-equiv="Set-Cookie" content="name, date"> //格式<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

At last

So much for the time being, there are too many custom attributes for meta tags. So only to find some of the commonly used, and likeWindow-targetthis has been basically discarded properties, I did not add.
At first thought that one or two hours can study finished, the result did not think unexpectedly spent five or six hours, all over the data, the elaboration of text. When you hit the text, you also feel that you have learned a lot. such as the basic Seo,http agreement of the re-understanding and so on.

Because the experience is still shallow, so if there is a mistake, I hope you can help me correct. Finally attached to my blog address and the original link, I hope to communicate with you more.

Ext.: http://www.cnblogs.com/wangyang108/p/5995379.html

Introduction to HTML META tag usage