Meta用法总结

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

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

1. 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 标签的用法。

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

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

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

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

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

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

第一种：

<meta charset='utf-8'>

第二种：

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

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

2.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 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

2.3 浏览器内核控制

国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。

而添加meta标签的网站可以控制浏览器选择何种内核渲染。

<meta name="renderer" content="webkit|ie-comp|ie-stand">

国内双核浏览器默认内核模式如下：

搜狗高速浏览器、QQ浏览器：IE内核（兼容模式） 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

2.4 禁止浏览器从本地计算机的缓存中访问页面内容

一旦我们设置该条属性，访问者将无法脱机浏览。

<meta http-equiv="Pragma" content="no-cache">

2.5 站点适配

主要用于PC-手机页的对应关系。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
-->

2.6 转码申明

用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。

<meta http-equiv="Cache-Control" content="no-siteapp" />

2.7 Windows 8

<meta name="msapplication-TileColor" content="#000"/>
 <!-- Windows 8 磁贴颜色 -->

<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->

3. 网页当中的 Meta 标签用于 SEO

SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”。

说白了就是让我们花更少的钱，获得更多的推广机会，提升搜索时的排名等等。

实际上我们的 Meta 标签当中，也存在这么几条属性，可以进行我们的搜索引擎优化。

3.1 页面关键词

每个网页应具有描述该网页内容的一组唯一的关键字。

使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。

标记内容太短，则搜索引擎可能不会认为这些内容相关。

一般这个东西，推荐大家设置 5 ~ 10 组词，当然这些词必须要有代表性，而且不能太长。一般来说不应超过 874 个字符。

3.2 页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

关于页面描述一般来说，都是写 120 字 ~ 150 字，这段话尽量要流畅完整，并且能体现出当前网页的作用。

3.3 搜索引擎索引方式

robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：

none noindex nofollow all index follow 具体使用方法如下：

<meta name="robots" content="index,follow" />
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
 -->

3.4 页面重定向和刷新

content内的数字代表时间（秒），既多少时间后刷新。

如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

所以我们要谨慎使用。

<meta http-equiv="refresh" content="0;url=/html/meta-sydq.html" />

3.5 Expires网页过期时间

设定网页的到期时间，一旦过期则必须到服务器上重新调用。

需要注意的是必须使用GMT时间格式，或直接设为0(不缓存)。

使用方法如下：

<meta http-equiv="Expires" content="Mon,12 May 2016 00:20:00 GMT" />

3.6 定义网页作者等内容（非必要填写）

下面这些东西都是看自己的情况去填写。

当然，如果不写也是没关系的啦。

<!-- 定义网页作者 -->
<meta name="author" content="李先生/MR_LP" />

<meta name="google" content="index,follow" />

<meta name="googlebot" content="index,follow" />

<meta name="verify" content="index,follow" />

4. 移动端设置中使用 Meta 标签

4.1 viewport

能优化移动浏览器的显示。

如果不是响应式网站，不要使用initial-scale或者禁用缩放。

除此之外，还需要注意不同设备之间的尺寸问题。

大部分4.7-5寸设备的viewport宽设为360px； 5.5寸设备设为400px；iphone6设为375px； ipone6 plus设为414px。

<meta name="viewport" content="width=device-width,
                               initial-scale=1.0,
                               maximum-scale=1.0,
                               user-scalable=no"/>
<!--
若设置宽度为屏幕宽度 width=device-width

会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

需要注意
-->

具体参数以及详细内容用法请参考： HTML5之viewport使用参数

对于已经比较熟练的读者，可以直接看这里。

属性名属性含义 width 宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） height 高度（数值 / device-height）（范围从223 到10,000） initial-scale 初始的缩放比例（范围从>0 到10） minimum-scale 允许用户缩放到的最小比例 maximum-scale 允许用户缩放到的最大比例 user-scalable 用户是否可以手动缩 (no,yes) minimal-ui 可以在页面加载时最小化上下状态栏。（已弃用）但是需要注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。

如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

而且，实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度。

body {
    min-width: 320px;
}

4.2 WebApp全屏模式

伪装app，离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

4.3 隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。

content的取值范围：

default black black-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

4.4 添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

4.5 忽略数字自动识别为电话号码

<meta content="telephone=no" name="format-detection" />

4.6 忽略识别邮箱

<meta content="email=no" name="format-detection" />

告诉浏览器这个网站对应的app，并在页面上显示下载banner。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

4.8 其他一些小东西

这里不做更多说明啦。

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

以上文章来自：黄卉， https://huanghui8030.github.io/html/meta-sydq.html

Meta用法总结

1. Meta 标签是什么？

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

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

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

2.3 浏览器内核控制

2.4 禁止浏览器从本地计算机的缓存中访问页面内容

2.5 站点适配

2.6 转码申明

2.7 Windows 8

3. 网页当中的 Meta 标签用于 SEO

3.1 页面关键词

3.2 页面描述

3.3 搜索引擎索引方式

3.4 页面重定向和刷新

3.5 Expires网页过期时间

3.6 定义网页作者等内容（非必要填写）

4. 移动端设置中使用 Meta 标签

4.1 viewport

4.2 WebApp全屏模式

4.3 隐藏状态栏/设置状态栏颜色

4.4 添加到主屏后的标题

4.5 忽略数字自动识别为电话号码

4.6 忽略识别邮箱

4.7 添加智能 App 广告条 Smart App Banner

4.8 其他一些小东西

CSS（15）

Html（4）

JQuery（9）

Js（29）

Webpack（11）

Mocha（6）

Node（19）

Mysql（5）

其他（6）

工具（11）

React（2）

1. Meta 标签是什么？

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

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

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

2.3 浏览器内核控制

2.4 禁止浏览器从本地计算机的缓存中访问页面内容

2.5 站点适配

2.6 转码申明

2.7 Windows 8

3. 网页当中的 Meta 标签 用于 SEO

3.1 页面关键词

3.2 页面描述

3.3 搜索引擎索引方式

3.4 页面重定向和刷新

3.5 Expires网页过期时间

3.6 定义网页作者等内容（非必要填写）

4. 移动端设置中使用 Meta 标签

4.1 viewport

4.2 WebApp全屏模式

4.3 隐藏状态栏/设置状态栏颜色

4.4 添加到主屏后的标题

4.5 忽略数字自动识别为电话号码

4.6 忽略识别邮箱

4.7 添加智能 App 广告条 Smart App Banner

4.8 其他一些小东西

CSS（15）

Html（4）

JQuery（9）

Js（29）

Webpack（11）

Mocha（6）

Node（19）

Mysql（5）

其他（6）

工具（11）

React（2）

3. 网页当中的 Meta 标签用于 SEO