meta 元素往往不会引起用户的注意，但是meta对整个网页有影响，会对网页能否被搜索引擎检索，和在搜索中的排名起着关键性的作用。但最终还是要用seo优化。
meta有个必须的属性content用于表示需要设置的项的值。
meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。
比如<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests
1.charset属性
这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的"utf-8"。常单独放在head标签第一个：
<meta charset="UTF-8">
2.content属性
此属性包含http-equiv或name属性的值，具体取决于所使用的值。
3. http-equiv 属性
http-equiv一般设置的都是与http请求头相关的信息，设置的值会关联到http头部。也就是说浏览器在请求服务器获取html的时候，服务器会将html中设置的meta放在响应头中返回给浏览器。常见的类型比如content-type, expires, refresh, set-cookie, window-target, charset， pragma等等。
- content-type
比如：<meta http-equiv="content-type" content="text/html charset=utf8">可以用来声明文档类型，设置字符集，content-type几乎所有的属性都可以在meta中进行设置。
这样设置浏览器的头信息就会包含:
content-type: text/html charset=utf8
4. name 属性
name属性主要用于描述网页，与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与http-equiv相同，name设置属性名，content设置属性值。
1. author
author用来标注网页的作者
<meta name="author" content="aaa@mail.abc.com">
2. description
description用来告诉搜素引擎当前网页的主要内容，是关于网站的一段描述信息。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
<meta name="description" content="这是我的HTML">
3. keywords
keywords与页面内容相关的关键词，使用逗号分隔。设置网页的关键字，来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="keywords" content="Hello world">
4. generator
表示当前html是用什么工具编写生成的，并没有实际作用，一般是编辑器自动创建的。
<meta name="generator" content="vscode">
5. revised
指定页面的最新版本
<meta name="revised" content="V2，2015/10/1">
6. robots
爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表，简单来说就是告诉搜索引擎机器人抓取哪些页面，all / none / index / noindex / follow / nofollow。
<meta name="robots" content="all">
all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询；index：文件将被检索；follow：页面上的链接可以被查询；noindex：文件将不被检索，但页面上的链接可以被查询；nofollow：文件将不被检索，页面上的链接可以被查询
| 值 | 描述 | 被用于 |
|---|---|---|
index | 允许机器人索引此页面（默认）。 | 所有爬虫 |
noindex | 要求机器人不索引此页面。 | 所有爬虫 |
follow | 允许机器人跟随此页面上的链接（默认）。 | 所有爬虫 |
nofollow | 要求机器人不跟随此页面上的链接。 | 所有爬虫 |
all | 与 index, follow 等价 | |
none | 与 noindex, nofollow 等价 | |
noarchive | 要求搜索引擎不缓存页面内容。 | Google、Yahoo、Bing |
nosnippet | Prevents displaying any description of the page in search engine results. | Google、Bing |
noimageindex | Requests this page not to appear as the referring page of an indexed image. | |
nocache | noarchive 的替代名称。 | Bing |
更多属性请看MDN
关于本文
