一、什么是<meta>标签

• meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
• 关于<meta>标签的基础用法，大家可以进入 W3school网站 学习，这里给出在项目中经常使用的一些<meta>元素

二、用于SEO优化（ 搜索引擎优化）的<meta>标签

1.页面关键词

• 每个网页应具有描述该网页内容的一组唯一的关键字。
• 使用人们可能会搜索并准确描述网页上所提供信息的描述性和代表性关键字及短语。
• 关键词内容太短，则搜索引擎可能不会认为关键词和页面相关。另外关键词内容不应超过 874 个字符。

<meta name="keywords" content="页面关键词（例如：音乐、下载、娱乐、新闻）" />

2.搜索引擎索引方式

• 使用robots设置网页搜索引擎的索引方式，可以控制页面文件、页面上的链接是否被索引等
• robots是一组使用逗号分割的值，通常有如下几种取值：
• all：文件将被检索，且页面上的链接可以被查询
• none：文件将不被检索，且页面上的链接不可以被查询
• index：文件将被检索
• follow：页面上的链接可以被查询
• noindex：文件将不被检索
• nofollow：页面上的链接不可以被查询
• 在使用的过程中，一定要确保正确使用nofollow和noindex属性值。

<!-- content可以使用多个值进行设置 -->
<meta name="robots" content="index,follow" />

3.页面重定向和刷新

• 通过设置content内的数字代表时间（秒），控制当前页面时间后刷新。
• 如果在刷新之后，需要跳转到其他页面，在content内添加url属性来重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

<!-- 2s后刷新并跳转到wwww.baidu.com页面 -->
<meta http-equiv="refresh" content="2;url=https://www.baidu.com">

3.设置作者

• 这个就很好理解，就是指明当前页面是由哪个人或者哪个团队开发的

<meta name="author" content="振礼硕晨" /> 

三、移动设备中的<meta>标签

1.viewport

• viewport能优化移动浏览器的显示,常用的属性如下：
• width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
• height：高度（数值 / device-height）（范围从223 到10,000）
• initial-scale：初始的缩放比例 （范围从>0 到10）。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
• minimum-scale：允许用户缩放到的最小比例
• maximum-scale：允许用户缩放到的最大比例
• user-scalable：用户是否可以手动缩 (no,yes)

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

2.WebApp全屏模式

• 伪装app，离线应用。

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

3.隐藏状态栏/设置状态栏颜色

• 只有在开启WebApp全屏模式时才生效。
• content的值为**default | black | black-translucent **。

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

4.添加到主屏后的标题

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

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

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

6.忽略识别邮箱

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

二、网页相关的<meta>标签

1.申明网页的编码

<meta charset='utf-8' />

2.优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<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 -->

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

• 这样设定，访问者将无法脱机浏览。

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

4.站点适配

• 主要用于PC-手机页的对应关系。
• format:[wml|xhtml|html5]根据手机页的协议语言，选择其中一种
• url:代表当前PC页所对应的手机页URL，两者必须是一一对应关系。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

5.转码申明

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

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