HTML meta 标签设置大全介绍

Question

meta 是 文档级元数据元素 ，用来表示那些不能由其它 HTML 元相关元素（ <base> 、 <link> , <script> 、 <style> 或 <title> ）之一表示的任何元数据

常见 meta 元素定义的元数据的类型：

• 如果设置了 name 属性， meta 元素提供的是文档级别的元数据，应用于整个页面。
• 如果设置了 http-equiv 属性， meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
• 如果设置了 charset 属性， meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
• 如果设置了 itemprop 属性， meta 元素提供用户定义的元数据。

name 属性

name 和 content 一起使用，前者表示要表示的元数据的 名称 ，后者是元数据的 值 。

author

用来表示网页的作者的名字，例如某个组织或者机构。

<meta name="author" content="aaa@mail.abc.com">

description

是一段简短而精确的、对页面内容的描述。以头条和 taobao 的 description 标签为例：

<meta name="description" content="今日头条是一个通用信息平台，致力于连接人与信息，让优质丰富的信息得到高效精准的分发，促使信息创造价值。">

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易（先收货后付款) 等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">

keywords

与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。 以头条和 taobao 为例

<meta name="keywords" content="今日头条，头条，头条网，头条新闻，今日头条官网">

<meta name="keyword" content="淘宝，掏宝，网上购物,C2C,在线交易，交易市场，网上交易，交易市场，网上买，网上卖，购物网站，团购，网上贸易，安全购物，电子商务，放心买，供应，买卖信息，网店，一口价，拍卖，网上开店，网络购物，打折，免费开店，网购，频道，店铺">

viewport（移动端有效）

添加视图窗口适配，用于优化移动端的网页，使得 web 端的网页在手机端正常显示，页面布局不会错位。注意 meta 的 viewport 属性只对移动端浏览器有效，对 pc 端浏览器是无效的。

viewport 主要包括如下三种类型:

• 布局视区 ：是指整个网页在移动端浏览器中显示的区域，此布局在大多数移动端浏览器中默认显示的宽度为 980px （也有少部分 1024px 或者其他宽度的），故只要整个网页宽度不超过此默认值，页面就可以正常显示
• 可见视区 ：指的是移动端设备本身的屏幕显示区域，不同的移动设备，可见视区的尺寸也不同
• 理想视区 ：指的是布局视区能完美适配移动设备的可见视区，即布局视区的宽度等于可见视区的宽度，因此不需要缩放和横向滚动条就能正常查看整个网页

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,minimal-ui">

• width ：控制布局视区的宽度，也可指定为固定宽度值，或者设置为 device-width 。如果 width 不设置或者为空，则使用默认宽度，即上述的 980px 或 1024px 。如果设置为 device-width ，则表示设置为理想视区，即布局视区宽度等于可见视区宽度。如果 width 设置为固定宽度，单位为 px ，也可以不带单位，默认单位为 px
• height ：控制布局视区的高度，一般不设置，极少使用
• initial-scale ：设置布局视区初始化缩放比例（即每一次加载页面时的缩放比例），为一个数字，可以是小数。如果设置 initial-scale 为 1 ，则和 width=device-width 一致，表示设置为理想视区。但是两者均有一个小缺陷，即 width=device-width 会导致 iPhone 和 iPad 横竖屏不分， initial=1.0 会导致 IE 横竖屏不分，故两者都使用，可互相弥补缺陷
• maximum-scale ：允许用户缩放的最大比例值，为一个数字，可以带小数。需要大于 minimum-scale
• minimum-scale ：允许用户缩放的最小比例值，为一个数字，可以带小数
• user-scalable ：是否允许用户手动缩放布局视区，非必须参数，其中参数为 no （不允许）、 yes （允许）

robots

表示爬虫、搜索引擎对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。

它的 content 可以为：

1. all :搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索
2. none :搜索引擎讲忽略此网页
3. index :搜索引擎索引此网页
4. noindex ：不索引本页面
5. follow :搜索引擎继续通过此网页的链接索引搜索其它的网页
6. nofollow ：不跟踪本页面上的链接
7. nosnippet ：不在搜索结果中显示说明文字
8. noarchive ：不显示快照
9. noodp ：不使用开放目录中的标题和说明

<meta name="robots" content="noindex,nofollow"/>

其中 content 参数如下。

• index ：搜索引擎可以索引此页面，默认属性，不设置 meta 标签，搜索引擎也会默认索引此页面
• noindex ：搜索引擎不可索引此页面
• noimageindex ：搜索引擎不可索引此页面的图片
• follow ：爬虫可以爬取此页面的链接
• nofollow ：爬虫不可爬取此页面的链接
• all ： index 和 follow 的简写，搜索引擎可以索引此页面，爬虫可以爬取此页面的链接
• none ： noindex 和 nofollow 的简写，搜索引擎不可索引此页面，爬虫不可爬取此页面的链接
• noarchive ：阻止搜索引擎在搜索结果中显示此页面的缓存版本，即网页快照
• nocache ：功能同 noarchive 一致，适用于 MSN/Live 引擎
• nosnippet ：搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容，此属性即搜索引擎不可显示该内容，另外搜索引擎也不会保存该页面的快照
• noodp ：搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容，阻止使用 DMOZ 信息做为此内容
• noydir ：搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容，阻止 Yahoo directory 信息作为此内容

renderer

用来指定双核浏览器的渲染方式 ，比如 360 浏览器，我们可以通过这个设置来指定 360 浏览器的渲染方式

<meta name="renderer" content="webkit"> //默认 webkit 内核
<meta name="renderer" content="ie-comp"> //默认 IE 兼容模式
<meta name="renderer" content="ie-stand"> //默认 IE 标准模式

• webkit （ webkit 内核，极速模式）
• ie-comp （ IE 兼容模式，即 IE6 、 IE7 、 IE8 的渲染模式）
• ie-stand （ IE 标准模式，即以 IE9 及以上版本渲染）。

copyright

标注页面版权信息。

<meta name="copyright" content="Baidu">

generator

标注开发网页的工具或软件。

<meta name="generator" content="VS Code">

format-detection

移动端浏览器中，用于识别电话号码、电子邮箱和地理位置的格式。

其中 content 参数为 yes （开启，默认值）、 no （关闭）。

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

revisit-after

告知搜索引擎每隔多少天访问一次此页面。

  一般情况下，网站不需要此属性来限制搜索引擎的访问频率。只有网站数据量非常大时，被搜索引擎频繁抓取，会占用过多的服务器资源，影响网站的反应速度，这种情况一般设置每隔 5-7 天来访问抓取一次网页即可。

  网站抓取时间取决于此属性和搜索引擎的重访时间，假设 revisit-after 设置为 5 天，若搜索引擎每隔 10 天访问一次， revisit-after 不会生效，而最终搜索引擎按照 10 天访问一次。搜索引擎每隔 3 天访问一次， revisit-after 设置的 5 天则会生效，最终搜索引擎每隔 5 天访问一次页面。

<meta name="revisit-after"  content="5 days">

referrer

referrer 有来源页面的意思，即表示当前页面是由哪个页面跳转过来的，具体则是跳转至当前页面的 http 请求的请求头中的 Referer 字段包含了上一个页面的 URL 地址。

可能会发现拼写少了一个 r ，正确的拼写其实是 Referrer ，但是由于 http 标准发布时没有发现拼写错误，所以就一直沿用至今。

例如，当前页面的 URL 地址为 http://127.0.0.1:5500/ 。

<body>
  <a href="http://www.baidu.com">百度</a>
</body>

点击跳转至百度页面，查看页面请求的请求头。

因此服务端可以统计用户来源，并以此进行统计分析、日志记录以及缓存优化等。

但是注意 Referer 可能会暴露用户的浏览历史 ，并且很多时候当前页面的 URL 是会包含用户的个人信息的（例如 token ），所以某些时候需要移除、禁用或者修改策略。

<meta name="referrer" content="">

content 属性值如下:

• no-referrer ：不发送 Referer 信息
• no-referrer-when-downgrade ：默认值，安全级别下降时不发送 Referer 信息，目前仅一种情况安全级别下降，即 https 网页跳转至 http 网页，其它情况发送 Referer 完整信息
• origin ：会发送 Referer 信息，但是仅发送源信息，包括协议、域名和端口号
• same-origin ：仅同源链接发送 Referer 完整信息
• strict-origin ：即 origin 与 no-referrer-when-downgrade 合并，安全级别下降时不发送 Referer 信息，安全级别未下降时发送 Referer 源信息
• origin-when-cross-origin ：跨域时发送 Referer 源信息，非跨域时即同源情况发送 Referer 完整信息
• strict-origin-when-cross-origin ：同源链接发送 Referer 完整信息，安全级别下降时不发送 Referer 信息，其它情况发送 Referer 源信息
• unsafe-url ：最不安全的策略，无论什么情况都发送 Referer 完整信息

meta 标签指定 content 是修改全局策略。

  单个 a 标签可通过 referrerpolicy 属性修改局部策略，更多 详细参考 。

<a href="http://www.baidu.com" referrerpolicy="no-referrer">百度</a>

http-equiv 属性

http-equiv 也是和 content 一起使用，前者表示元数据的 名称 ，后者是元数据的 值 。

http-equiv 所有允许的值都是特定 HTTP 头部的名称，该属性中 content-type、content-language 和 set-cookie 已经被废除了。

X-UA-Compatible

最常见的 http-equiv 值可能就是 X-UA-Compatible 了，它是用来是做 IE 浏览器适配的：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

• IE=edge 告诉浏览器，以当前浏览器支持的最新版本来渲染，IE9 就以 IE9 版本来渲染。
• chrome=1 告诉浏览器，如果当前 IE 浏览器安装了 Google Chrome Frame 插件，就以 chrome 内核来渲染页面

如果两者都存在的情况：如果有 chrome 插件，就以 chrome 内核渲染，如果没有，就以当前浏览器支持的最高版本渲染。

另外，这个属性支持的范围是 IE8-IE11

<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">