overview
The meta tag is generally placed on the entire htmlpage head. It is an auxiliary tag in the head area and does not contain any content. It is used to provide meta information about the page, such as descriptions and keywords for search engines and update frequency; meta A tag's attributes define the name/value pairs associated with the document. MDN.Define him like this in :
meta is the document-level metadata element used to represent any metadata that cannot be represented by one of the other HTML meta-related elements (
<base>,<link>,<script>,<style>or ).<title>Let's first look at
metathe type of metadata defined by the element:
- If
namethe attribute ,metathe element provides document-level metadata that applies to the entire page.- If
http-equivthe attribute ,metathe element is a pragma, providing the same information as a similarly named HTTP header.- If
charsetthe attribute ,metathe element is a charset declaration telling the document which character encoding to use.- If
itempropthe attribute ,metathe element provides user-defined metadata.
The meta tag in html is used as an auxiliary tag in the head area. It is generally used for page descriptions, keywords and other metadata. These data will serve browsers, search engines, etc. It has 4 attributes: name attribute, http-equiv attribute, content attribute, scheme attribute.
Most of the understanding of meta tags in the process of learning the front end is this sentence. We will see this sentence when we open any website, but we are not very familiar with meta tags. Next, we will introduce this tag in detail in the article, which has a certain The reference role, I hope to help everyone.
Introduction to meta tags
The meta tag is an auxiliary tag in the head area of the HTML language. It is often used to define page descriptions, keywords, last modified dates, and other metadata. This metadata will serve browsers, search engines and other web services.
Composition of meta tags
The meta tag has two attributes, namely the http-equiv attribute and the name attribute.
name attribute
The name attribute is mainly used to describe the webpage, such as keywords and descriptions of the webpage. The corresponding attribute value is content, and the content in content is a specific description of the name filling type, which is convenient for search engines to crawl.
The syntax format of the name attribute in the meta tag is:
<meta name="参数" content="具体的描述">
Among them, the name attribute has the following parameters. (AC is a common attribute)
(1) keywords (keywords)
Description: Used to tell search engines the keywords of your web page. Example:
<meta name="keywords" content="xxx网，xxxx">
(2) description (description of website content)
Description: Used to tell search engines the main content of your website. Example:
<meta name="description" content="xxx是xxxxxx，提供xxxxxxxxx">
(3) viewport (the window on the mobile terminal)
Explanation: This concept is relatively complicated, and will be described in detail in the next blog post. This property is often used in designing mobile web pages. I have used viewport when using frameworks such as bootstrap and AmazeUI.
<meta name="viewport" content="width=device-width, initial-scale=1">
(4) robots (defining the indexing method of search engine crawlers)
Description: robots are used to tell the crawler which pages need to be indexed and which pages do not need to be indexed. The parameter of content has all, none, index, noindex, follow, nofollow. The default is all.
<meta name="robots" content="none">
The specific parameters are as follows:
1. none: The search engine will ignore this page, which is equivalent to noindex, nofollow.
2. noindex: The search engine does not index this webpage.
3. nofollow: The search engine does not continue to search other web pages through the link index of this web page.
4. all: The search engine will index this webpage and the links that continue to pass through this webpage, which is equivalent to index and follow.
5. index: Search engines index this web page.
6. follow: The search engine continues to search other web pages through the link index of this web page.
(5) author (author)
Description: Used to mark the author of the web page Example:
<meta name="author" content="Michical Jackson">
(6) generator (web page production software)
Explanation: An example for indicating which software the web page is made of: (I don’t know if it can be written like this):
<meta name="generator" content="Sublime Text3">
(7) copyright (copyright)
Description: Used to label copyright information Example:
<meta name="copyright" content="xxx公司网">
(8) revisit-after (search engine crawler revisit time)
Note: If the page is not updated frequently, in order to reduce the pressure of search engine crawlers on the server, you can set a crawler revisit time. If the revisit time is too short, crawlers will visit according to their defined default time. Example:
<meta name="revisit-after" content="7 days">
(9) renderer (dual-core browser rendering method)
Description: renderer is prepared for dual-core browsers, and is used to specify how dual-core browsers render pages by default. For example, 360 browser. Example:
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
http-equiv attribute
As the name suggests, http-equiv is equivalent to the role of HTTP.
The syntax format of the http-equiv attribute in the meta tag is:
<meta http-equiv="参数" content="具体的描述">
Among them, the http-equiv attribute mainly has the following parameters:
(1) content-Type (set the character set of the web page) (HTML5 is recommended)
Description: It is used to set the character set of the web page, which is convenient for the browser to parse and render the page. Example:
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐
<meta charset=``"utf-8"``> //HTML5设定网页字符集的方式，推荐使用UTF-8
(2) X-UA-Compatible (what version does the browser use to render the current page)
Description: Used to tell the browser which version to render the page. (It is generally set to the latest mode, and this setting is also very common in major frameworks.)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面
(3) cache-control (specify the caching mechanism that requests and responses follow)
Description: Instructs the browser how to cache a response and for how long
<meta http-equiv="cache-control" content="no-cache">
There are the following usages:
no-cache: Send a request first, confirm with the server whether the resource has been changed, if not, use the cache.
no-store: Caching is not allowed, every time you have to go to the server and download the complete response. (safety measures)
public: Cache all responses, but not required. Because max-age can also achieve the same effect
private : Only cache for a single user, so no relaying is allowed for caching. (For example, CDN does not allow caching of private responses)
maxage: Indicates how long the response can be cached and reused at the beginning of the current request without going to the server to re-request. For example: max-age=60 means that the response can be cached and reused for another 60 seconds.
Disable Baidu automatic transcoding
Description: It is used to prevent the current page from being automatically transcoded by Baidu when browsing on the mobile terminal. Although Baidu's original intention is good, the transcoding effect is often unsatisfactory. So you can add the sentence in the example to the head to avoid Baidu's automatic transcoding.
<meta http-equiv="Cache-Control" content="no-siteapp">
(4) expires (page expiration time)
Description: It is used to set the expiration time of the webpage. After the expiration, the webpage must be retransmitted to the server.
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT">
(5) refresh (automatically refresh and point to a page)
Note: The web page will automatically refresh and transfer to the set URL within the set time.
<meta http-equiv="refresh" content="2；URL=http://www.php.cn/> //意思是2秒后跳转到PHP中文网
(6) Set-Cookie (cookie setting)
Description: If the web page expires. Then the local cookies on this web page will 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"> //具体范例
(7) x-dns-prefetch-control (dns pre-analysis)
Generally speaking, the a tag in the HTML page will automatically enable DNS early resolution to improve the performance of the website, but it is invalid in the website using the https protocol. We can set it to enable dns to enable the early resolution of the a tag
<meta http-equiv=" x-dns-prefetch-control" content="on"> //格式
content attribute
The content attribute provides the value in name/value pairs. The value can be any valid string.
The content attribute should namealways http-equivbe used with the attribute or attribute.
scheme attribute
The scheme attribute is used to specify the scheme to be used to translate the property value. This scheme should be defined in the profile specified by the tag's profile attribute.
Summarize
There are too many custom attributes for meta tags. So I only summarized some commonly used ones, and I hope it will be helpful to everyone.