Day3： 2022-07-03
主题： 为 SEO 而来，终于知道所谓的 meta 响应页是个什么东东了
前言
一直很疑惑，项目里的 metaPage 到底是什么？meta，元数据，元数据页面？今天突然就开窍了，元数据的页面，基础数据的页面，这应该就是会被 SEO 调用的页面。SEO 的具体机制暂且不谈，既然提到 meta, 就整理一波 meta 标签的常见使用吧。
是什么 & 为什么
meta 标签提供了 HTML 文档的元数据，即 HTML 文档的数据信息。
元数据不会展示在客户端，但是可以被使用浏览器、搜索引擎、或其他 Web 服务调用。
怎么用
charset 属性
charset 属性可以用来规定 HTML 文档的字符编码，常用的值为 UFT-8（Unicode 字符编码）。
理论上，可以规定文档的字符集是任何一种字符编码，但不是所有浏览器都能支持特殊的字符编码。所有可用的字符编码可以在 IANA 字符集 查看。
<meta charset="UTF-8">
name 属性
name 属性提供的是文档级别的元数据，应用于整个页面。name 属性和 content 属性可以一起使用，以名/值对的方式提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
可以在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。
规定页面所代表的 Web 应用程序的名称
<meta name="application-name" content="TEST APP">
规定文档的作者的名字
<meta name="author" content="James">
规定页面的描述
<meta name="description" content="Free Web tutorials on HTML and CSS">
搜索引擎会把这个描述显示在搜索结果中。
规定用于生成文档的一个软件包
<meta name="generator" content="FrontPage 4.0">
规定一个逗号分隔的关键词列表
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
搜索引擎会通过关键词对页面进行分类。
规定爬虫（搜索引擎）应当遵守的规则
<meta name="robots" content="noindex,nofollow,nosnippet,noarchive,noodp">
个人的爬虫并不一定会遵守此类规则，但谷歌、必应等搜索引擎一般会根据 robots 属性设置搜索引擎的相应操作。
| 属性 | 值 |
|---|---|
| all | 索引本页面，并通过本页面的链接索引搜索其它的页面 |
| index | 索引本页面 |
| follow | 通过本页面的链接索引搜索其它的页面 |
| none | 忽略本页面 |
| noindex | 不索引本页面 |
| nofollow | 不跟踪本页面上的链接 |
| nosnippet | 不在搜索结果中显示说明文字 |
| noarchive | 不显示快照 |
| noodp | 不使用开放目录中的标题和说明 |
viewport 属性
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
viewport 属性首先是 safari 浏览器中引入的，目的是解决移动设备的 viewport 问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对 viewport 属性的支持。
viewort 属性主要有 6 个属性和对应的值，可以单独使用，也可以用逗号隔开混合使用。
| 属性 | 值 |
|---|---|
| width | 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置 layout viewport 的高度，这个属性一般很少使用 |
| user-scalable | 是否允许用户进行缩放，值为 no 或 yes，no 表示不允许 |
http-equiv 属性
http-equiv 属性是编译指令，可用于模拟一个 HTTP 响应头，所有允许的值都是特定 HTTP 头部的名称。
规定页面的内容安全策略
<meta http-equiv="Content-Security-Policy" content="default-src https:">
内容安全策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
规定页面的字符编码
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
在 HTML5 中，可以直接指定 charset 属性来规定页面的字符集。
规定要使用的预定义的样式表
<meta http-equiv="default-style" content="stylesheet title">
content 属性的值必须是同一文档中的一个 link 元素上的 title 属性的值，或者同一文档中的一个 style 元素上的 title 属性的值。
规定页面自动刷新的时间间隔（秒）
<meta http-equiv="refresh" content="30">
refresh 属性应该谨慎使用，它会导致页面不受用户控制。
如果 content 的值包含一个正整数，并且后面跟着字符串 ;url= 和一个合法的 URL，则是重定向到指定链接的时间间隔。
scheme 属性
规定用于翻译 content 属性的值的方案，HTML5 不再支持该属性。
全局属性
meta 标签支持 HTML 中的全局属性。
总结
除了上述整理的这些，不同的浏览器还有各自支持的 meta 属性，用来设置页面在该浏览器内部的展示逻辑和交互等。meta 标签一般被放在 head 中，也往往不需要进行很多额外的设置，作为业务向的前端开发者常常会忽视它（比如我），但是简单地了解它还是很有必要。
