HTML commonly used meta organization

　 element

　 Summary

tag provides metadata about an HTML document. The metadata is not displayed on the page, but is machine-readable. It can be used by browsers (how content is displayed or pages are reloaded), search engines (keywords), or other web services.

　Required attributes

Attributes         Value                                                                               through Meta-information related to http-equiv or name attributes Optional attributes

Attributes                

Value                                                

Description

http-equiv content-type / expire / refresh / set-cookie Associate the content attribute to the HTTP header. name author / description / keywords / generator / revised / others Associate the content attribute to a name. ​

content ​ some text ​ Defines the format used to translate the value of the content attribute. ​​

　SEO Optimization

　Reference document

Page keywords, each web page should have a unique set of keywords that describe the content of the web page.

Use descriptive and representative keywords and phrases that people are likely to search for, and accurately describe the information provided on the page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters.

<meta name="keywords" content="your tags" />

Page description, each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the web page.

<meta name="description" content="150 words" />

Search engine indexing method, robotterms is a set of values ​​separated by commas (,), usually the following values: none, noindex, nofollow, all, index and follow. Make sure to use the nofollow and noindex attribute values ​​correctly.

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索，但页面上的链接可以被查询；
    nofollow：文件将不被检索，页面上的链接可以被查询。
 -->

Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add a url, it will redirect to the specified web page (search engines can automatically detect it, and it can easily be regarded as misleading by the engine and be punished).

<meta http-equiv="refresh" content="0;url=" />

Others

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

　 Mobile devices

viewport: Can optimize the display of mobile browsers. If the website is not responsive, do not use initial-scale or disable scaling.
The viewport width of most 4.7-5-inch devices is set to 360px; 5.5-inch devices are set to 400px; iphone6 ​​is set to 375px; iphone6 ​​plus is set to 414px.

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

width: width (number/device-width) (range from 200 to 10,000, default is 980 pixels)

height: height (number/device-height) (range from 223 to 10,000)

initial-scale: Initial scaling (ranging from >0 to 10)

minimum-scale: The minimum scale the user is allowed to zoom to

maximum-scale: The maximum scale the user is allowed to zoom to

user-scalable: Whether the user can manually zoom (no,yes)

minimal-ui: You can minimize the upper and lower status bars when the page loads. (Deprecated)

Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width and the user needs to manually move the page or zoom. If user-scalable=no or maximum-scale=1 is used together with initial-scale=1, the user will not be able to zoom in/out the web page to see the entire content.

WebApp full screen mode: disguise app, offline application.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

Hide status bar/set status bar color: only takes effect when WebApp full screen mode is turned on. The value of content is default | black | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

The title added to the home screen

<meta name="apple-mobile-web-app-title" content="标题">

Ignore the number and automatically recognize it as a phone number

<meta content="telephone=no" name="format-detection" />

Ignore the recognition of the email

<meta content="email=no" name="format-detection" />

Add a smart app Smart App Banner: Tell the browser the app corresponding to this website, and Display the download banner on the page (as shown below). Reference documents

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Other reference documents

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

　　网页相关

申明编码

<meta charset=&#39;utf-8&#39; />

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

<meta name="renderer" content="webkit|ie-comp|ie-stand">

　　国内双核浏览器默认内核模式如下：

　　1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）

　　2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

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

Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

站点适配：主要用于PC-手机页的对应关系。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

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