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

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

  Untitled

• viewport（供移动设备使用）

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

  可选值为：

  Untitled

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

二、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://www.cnblogs.com/fzz9/p/10783692.html

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

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