meta标签

标签可提供页面数据的元信息（meta information）。

标签位于文档头部，不包含内容，其属性定义了与文档关联的键值对。

简单来说，就是文档信息描述的标签。我们从以下几个方面来看看的实际用途。比如：

• 搜索引擎优化（SEO）
• 定义页面使用语言
• 自动刷新并指向新的页面
• 实现网页转换时的动态效果
• 控制页面缓冲
• 网页定级评价
• 控制网页显示的窗口

一、meta标签的属性

1、charset属性

该特性申明文档的字符编码但，该声明可以被任何一个元素的 lang 特性的值覆盖。推荐使用utf-8国际通用编码。如：

2、content属性

此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

3、http-equiv属性

这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义，如下：

• content-language（过时）

  指定页面的默认语言，推荐使用设置全局lang属性来代替。

• content-security-policy：内容安全策略

  它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

• content-type（过时）

  设置文档字符编码，推荐使用meat的charset属性代替。

• default-style：默认样式（首选样式）

  该属性指定了文档首选的默认样式。content的值必须包含link元素的标题、href属性链接到CSS样式表或包含CSS样式表的``元素的标题。

• refresh：页面刷新时间

  如果content值为正整数，则设置为指定时间间隔刷新当前页面，值为正整数后跟字符串的形式则指定时间间隔内跳转到指定页面。以上时间单位为秒。

• set-cookie（过时）

  为页面设置cookie，请改用HTTP的Set-Cookie头部。

4、name属性

该属性定义文档级元数据的名称。如果以下其中一个属性设置了itemprop, http-equiv or charset ，就不能再设置这个属性了。

name属性可包含以下值（不完整）：

• application-name

  定义正运行在该网页上的网络应用名称。

• author

  文档的作者名称，自由格式。

• description

  其中包含页面内容的简短和精确的描述。 一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。

• generator

  包含生成页面的软件的标示符。

• keywords

  包含与逗号分隔的页面内容相关的单词。

• referrer（实验中的属性）

  控制所有从该文档发出的 HTTP 请求中HTTP Referer首部的内容。

• creator

  定义文档创建者的名称，与author类似。

• googlebot

  属性robots的同义词，该属性只有googleBot(谷歌索引抓取工具)才会使用。

• publisher

  自由格式定义文档发布者的名称。

• robots

  定义搜索引擎爬虫与页面应具有的行为。 它是以逗号分隔的值列表，可选值：

  Value(可选值)	Description（描述）	Used by（可支持使用的搜索引擎）
  index	Allows the robot to index the page（允许机器人索引页面）	All
  noindex	Prevents the robot from indexing the page	All
  follow	Allows the robot to follow the links on the page（允许机器人跟随页面上的链接）	All
  nofollow	Prevents the robot from following the links on the page	All
  noodp	Prevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page	Google ,Yahoo , Bing
  noarchive	Prevents the search engine from caching the content of the page（阻止搜索引擎缓存页面内容）	Google,Yahoo,Bing
  nosnippet	Prevents the display of any description of the page in the search engine results page（阻止在搜索引擎结果页面中显示页面的任何描述）	Google
  noimageindex	Prevents this page from appearing as the referring page of an indexed image	Google
  noydir	Prevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page	Yahoo
  nocache	Synonym of noarchive	Bing

• viewport（供移动设备使用）

  该属性提供有关视口初始大小的提示，仅供移动设备使用。

  可选值为：

  Value	可能值	描述
  width	一个正整数或者字符串 device-width(以设备宽度作为视口宽度)	以pixels（像素）为单位， 定义viewport（视口）的宽度。
  height	一个正整数或者字符串 device-height(以设备高度作为视口g高度)	以pixels（像素）为单位， 定义viewport（视口）的高度。
  initial-scale	一个0.0 到10.0之间的正数	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
  maximum-scale	一个0.0 到10.0之间的正数	定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
  minimum-scale	一个0.0 到10.0之间的正数	定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
  user-scalable	一个布尔值（yes 或者no）	如果设置为no，用户将不能放大或缩小网页。默认值为yes。

  我们常使用下面这个设置来适配移动端页面：

二、meta标签的实际使用

1、各大网站首页的meta

我们可以从各大网站的页面查看他们对meta的使用，比如：

• 淘宝首页

• 微博首页

• github首页

• stackoverflow首页

2、meta一些的具体作用

• 浏览器兼容性设置

  当指定的content值为IE=edge,chrome=1时，优先使用 IE 最新版本和 Chrome。

  假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

  还能这样设置：

• 浏览器内核控制

  很多浏览器是双核的，比如webkit内核高速浏览，IE内核兼容网页和旧版网站。除了浏览器的默认设置外，我们还可通过设置meta标签的属性来设置当前页面的内核渲染模式。

• 站点适配

  主要是移动端手机协议选择，主要用于PC-手机页的对应关系：

• SEO（搜索引擎优化）

  根据搜索引擎爬取网页内容的特点，我们可以对页面信息进行定义，以便更好地让搜索引擎识别到，以此来提高网站或页面的识别度，增加搜索时的排名等。

  • 页面关键字：keyword

    这是name属性的属性值，我们可以使用该属性值对页面进行关键字描述，以便于搜索引擎的准确抓取。

  • 页面描述：description

    同keyword类似，该属性值可对页面进行总结性描述。

  • 搜索引擎的搜素方式相关设置：robots

3、总结

meta标签规定了文档的属性信息，浏览器在处理该页面时就会先读取meta中的信息再进行处理，不同的浏览器或设备有不同的属性键值对，根据具体使用查询文档或使用案例进行设置。

参考地址

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

https://huanghui8030.github.io/html/meta-sydq.html