HTML meta 标签详解

简介

元数据不会显示在页面上，但可以机器解析。元数据由浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）或是其他网络服务使用。

下面我们就来看看常用的meta标签。

一、Meta 标签的 charset 属性

想必每一个都开发者都十分熟悉下面这一个meta元素， 它设置文档使用utf-8字符集编码，

如果设置了 charset 属性, meta 元素就是一个字符集声明，用于告诉文档使用哪种字符编码。utf-8字符集包含了人类大部分的文字。意味着该 web 页面可以显示任意的语言。

<meta charset="utf-8">

你也可以设置为 GBK （中国大陆国标字符集）[不推荐]

<meta charset="GBK">

但是！当你设置为 GBK 再使用藏文之类的语言时，那么页面将会会出现乱码。

二、meta 标签的 name 属性

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。如通过keywords, description等属性设置SEO相关内容

meta标签中name属性语法格式是：

1. keywords

keywords 定义了一组关键词，用于搜索引擎优化。

<meta name="keywords" content="HTML, Liu Xing, JavaScript之禅">

在网络和 SEO 刚刚兴起的时候，这个标签是相当有用的，但是到如今，很多搜索引擎都已经不再用keywords标签作排名因素。我们在使用时应该避免关键词堆砌

2. description

description 是一个针对页面的简短描述，用于告诉搜索引擎你网站的主要内容， 此内容可能被用作搜索引擎结果的一部分。

<meta name="description" content="JavaScript之禅专注于Web开发, 汇集HTML, CSS,
JavaScript教程">

3. robots

robots 用于告诉网页爬虫如何索引网页

<meta name="robots" content="none">

它有以下几种参数值：

• all：对索引编制或内容显示无任何限制, 该指令为默认值

• noindex: 告诉搜索引擎不要索引当前页, 等价于noindex，nofollow

• index: 告诉搜索引擎索引当前页

• follow: 即使页面没有被索引，爬虫也应该爬取页面上的所有链接

• nofollow: 告诉爬虫不要跟踪页面上的任何链接以及资源

• noimageindex: 告诉爬虫不要索引页面上的任何图片

• none: 相当于同时使用 noindex 和 nofollow

• noarchive: 不在搜索结果中显示缓存链接。如果您未指定此指令，搜索引擎可能会生成缓存网页，并且用户可能会通过搜索结果访问该网页。

• nosnippet: 不在搜索结果中显示该网页的文本摘要或视频预览

4. viewport

viewport 是用户网页的可视区域。viewport 通常用于设置页面的视口, 这个属性常用于设计移动端网页。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它主要有以下属性值：

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度
• height：和 width 相对应，指定高度
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
• maximum-scale：允许用户缩放到的最大比例
• minimum-scale：允许用户缩放到的最小比例
• user-scalable：用户是否可以手动缩放

5. subject

subject 是关于你的网站主题的简短描述

<meta name="subject" content="你的网站主题">

6. rating

rating 基于网站内容给出一般的年龄分级，通常用于让浏览者知道内容是不是合适的。如果您希望对页面的受众适当性进行评分，请使该标记

<meta name="rating" content="General">

它主要有以下属性值：

• general
• mature
• restricted
• adult
• 14 years
• safe for kids

7. referrer

referrer 允许由客户端指定资源的 URI 来自于哪一个请求地址，它告诉了服务器，用户在访问当前资源时是从哪过来的。此数据可用于分析、日志记录、优化缓存等。与HTTP请求中的referer字段相同。（注：Referer的正确拼写是Referrer，但是在写入标准时写错了，只好将错就错）

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

它主要有以下属性值：

• no-referrer: 整个 referrer 会被移除。访问来源信息不随着请求一起发送。
• no-referrer-when-downgrade: （默认值） 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP)
• origin: 在任何情况下，仅发送文件的源作为引用地址
• origin-when-cross-origin: 对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅发送文件的源
• same-origin: 对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息
• strict-origin: 在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)
• strict-origin-when-cross-origin: 对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此信息 (HTTPS->HTTP)
• unsafe-url: 无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址

8. author

author 用于标明该页面的作者

<meta name="author" content="Liu Xing">

9. generator

generator 用于标明网页又什么工具生成，如使用Hexo生成的静态网站，其值就为Hexo

<meta name="generator" content="Hexo">

10. copyright

copyright 用于标注版权信息

<meta name="copyright" content="Liu Xing">

三、meta 标签的 http-equiv 属性

如果设置了 http-equiv 属性（http-equivalent的简写），meta 元素则是编译指令，提供的信息与类似命名的HTTP header相同，它可用于模拟 HTTP header 响应，通常可以用来控制缓存，刷新等操作。

meta标签中http-equiv属性语法格式是：

1. content-type

该属性与类似，用于设定网页字符集，便于浏览器解析与渲染页面。不推荐使用。

<meta http-equiv="content-Type" content="text/html;charset=utf-8">

上面的示例定义了网页为text/html，字符集为utf-8。推荐使用文章开头介绍的 <meta charset="utf-8">来设置。

2. refresh

refresh 定义文档自动刷新的时间间隔

<meta http-equiv="refresh" content="30">

上面的例子中，页面会间隔30s刷新一次。

4. cache-control

cache-control 用来控制缓存策略

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

主要有以下属性值：

• public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
• private 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）
• no-cache 不使用强缓存，需要与服务器验证协商缓存验证。
• no-store 缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。
• max-age=缓存存储的最大周期，超过这个周期被认为过期
• ...

5. expires

expires 用于设定网页的到期时间，它告诉浏览器在过期时间之前可以直接从浏览器缓存中存取数据。

关于 HTTP 缓存机制, 建议参考阅读笔者写的另一篇文章深入理解 HTTP 缓存机制

结语

至此，我们一共介绍了15种meta标签的用法，分别可以用于SEO，响应式开发，HTTP响应控制等。meta标签对于社交媒体分享，提升SEO以及浏览器/平台的一些兼容性设置也都十分重要。