声明编码
- 声明文档的字符编码类型
<meta charset="utf-8">
<!-- 声明文档的字符编码类型 -->
浏览器渲染方式
- 声明浏览器将采用何种版本渲染当前页面
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- IE浏览器使用最新的版本渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 优先使用 IE 最新版本和 Chrome -->
移动设备,视口属性
- 用于优化移动浏览器的显示，必须注意的是，不是响应式的网站，不要使用initial-scale或者禁用缩放。
- 大部分4.7-5寸设备的viewport宽设为360px；
- 5.5寸设备设为400px；
- iphone6设为375px；ipone6 plus设为414px。
<!-- content值用逗号分隔 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以设备100%宽度，1:1缩放，最后一个属性为不希望被缩放-->
<!--
width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） device-width 表示宽度为设备宽度
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
PS:需要注意的是上述三种meta元素必须排在head元素中最前面的部分。其他head元素中的元素必须排在后面。
页面描述
<meta name="description" content="A description of the page" >
<!-- content最多允许150个字符-->
<!-- 某些情况下，description被用于搜索结果片段的展示-->
<meta name="application-name" content="Application Name">
<!-- web应用的名称，只有当网页在app使用时采用 -->
<meta name="subject" content="your website's subject">
<!-- 简短的站点题目描述 -->
SEO 优化
- 关键字
<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">
<!-- google和bing会忽视这些关键字信息，并将其作为垃圾信息-->
- 搜索引擎索引方式
<meta name="robots" content="index,follow" />
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
URL
<meta name="url" content="https://example.com/">
<!-- 完整的域名或地址-->
cookie
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->
禁用本地缓存
<meta http-equiv="Pragma" content="no-cache">
浏览器内核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 按照webkit、ie-comp、ie-stand的顺序选择渲染内核 -->
参考：
A list of everything that could go in the <head> of your document
常用meta标签
网友评论