Tag provides metadata about the HTML document. It will not appear on the page, but for a machine-readable. It can be used browsers (how to display content or reload page), search engines (keywords), or other web services.
2, the role of
meta data is available in the machine interpretation, tells the machine how to parse this page, there is a purpose that can be added to the sending server http header content browser, for example, we add the following meta tag for the page:
1 |
<meta http-equiv="charset" content="iso-8859-1"> |
Browser header will include these:
1 |
charset:iso-8859-1 |
Only the browser can accept these additional header fields, and can use them in an appropriate manner, these fields makes sense.
3, meta required and optional attributes
meta content attribute is required, of course, does not mean that meta tag must have content, but when there are http-equiv or name attributes, content attributes must be directed. E.g:
Required attributes
1 |
<meta name="keywords" content="HTML,ASP,PHP,SQL"> |
There is content in the description of the property is carried out keywords, so it can also be understood as a key to it, is {keywords: "HTML, ASP, PHP, SQL"}.
Optional attributes
In W3school, for the optional attributes meta Speaking of the three, namely, http-equiv, name and scheme. Considering the scheme is not very common, so just say it before the next two properties.
http-equiv
http-equiv attribute is to add the http header content of some custom, or need to add additional content http head, and needs to be sent to the browser, we can use this property. In the meta effect the above there are simple instructions, so now give you an example. For example, we do not want to use js to redirect http header content control, it can be controlled such that:
1 |
<meta http-equiv="Refresh" content="5;url=https://netlover.cn" /> |
After this was added in the page, it will jump to a specified page 5 seconds, to see the effect of the example W3school
name
The second optional attribute name, this property is for the browser to parse, for some browser compatibility issues, the name attribute is the most common, of course, there is a premise that your browser can resolve the name written into the property before they can , otherwise it is meaningless. Or give you an example:
1 |
<meta name="renderer" content="webkit"> |
This meta tag tells the browser means that, when analyzed by webkit core, of course, provided there is webkit browser kernel can, or else it does not make sense. Of course, you may have seen this question, this renderer is where to come out, I want to know how it? This is the corresponding development of the document in the browser will be demonstrated, for example, the renderer 360 is described browser. 360 browser kernel documentation control Meta Tags
Common large sum meta tags
Then there is the usual large sum of meta tags you, I will do as much as possible of the whole
charset
charset declaration is a document using character encoding, mainly used to solve the garbage problem is that it is worth mentioning that this charset must write the first line , otherwise it may cause garbled.
There are two ways for writing charset
1 |
<meta charset="utf-8"> |
Two are equivalent.
Baidu prohibited transcoding
Baidu will automatically be transcoded pages, this label is prohibited Baidu transcoding
1 |
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
SEO optimization section
1 |
|
viewport
viewport mainly affect the movement of end page layout, such as:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
content parameters:
- width viewport width (Numerical / device-width)
- height viewport height (value / device-height)
- initial-scale initial scale
- maximum-scale maximum zoom ratio
- minimum-scale minimum scale
- user-scalable whether to allow the user zooms (yes / no)
Each browser platform
Microsoft Internet Explorer
1 |
<-! Ie priority to use the latest version -> |
Google Chrome
1 |
<! - priority latest chrome version -> |
360 browser
1 |
<-! Browser parses choose to use the kernel -> |
QQ mobile browser
1 |
<! - lock the screen in a specific direction -> |
Apple iOS
1 |
<!-- Smart App Banner --> |
Google Android
1 |
<meta name="theme-color" content="#E64545"> |
App Links
1 |
<!-- iOS --> |
最后——移动端常用的meta
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> |
This link: https://netlover.cn/2018/08/15/meta-all.html
Original: Big Box effect commonly used meta tags and comprehensive finishing