声明编码
- 声明文档的字符编码类型
<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标签