前端 Meta 用法大汇总

0.注意

如果本文中某些图片未能正确加载，请移步下面的连接查看。

前端 Meta 用法大汇总

1.前言

---

昨天晚上刷朋友圈，发现有同时分享了这么一篇文章。

这篇文章中将我们 Meta 标签 常用的几种用法分别说明，但是发现关于 Meta 标签的说明有些不完善，所以自己决定从新去书写一篇文章，专门来讲解一下我们的 Meta 标签。

好了，陈述完毕，开始正文。

本文主要分为四个模块，请读者自行选择查看。

• Meta 标签是什么？
• 网页当中的 Meta 标签用法
• 网页当中的 Meta 标签 用于 SEO
• 移动端设置中使用 Meta 标签

2. Meta 标签是什么？

---

Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。

Meta ： 即 元数据（Metadata）是数据的数据信息。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果，它就起作用了，所以我们称之为“ 元数据 ”。

它内部可填写的属性如下：

属性	值	描述
charset (HTML5)	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type、default-style、refresh	把 content 属性关联到 HTTP 头部。
name	application-name、author、description、generator、keywords	把 content 属性关联到一个名称。
scheme	format/URI	HTML5不支持。 定义用于翻译 content 属性值的格式。

那我们现在知道了 Meta 标签是什么东西，那么我们接下来就一起来看看，Meta 标签的用法。

3. 网页当中的 Meta 标签用法

---

3.1 申明文档使用的字符编码

meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。

它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。

当然，你也可以使用gb2312（简体中文），big5（繁体中文）等等其他字符集。

一般来说，我们使用的时候存在两种用法。

第一种：

<meta charset='utf-8'>  

第二种：

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

而目前我们一般推荐使用第一种写法，也是HTML5使用的写法。

3.2 优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

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

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

还有以下几种设置方式：

<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->