常见meta标签记录

关于meta

meta标签可分为两大部分：http-equiv和name变量。

content 基于内容，这个属性为 http-equiv 或 name 属性提供了与其相关的值的定义.

http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义.

常用meta

http-equiv

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

content-type:设定页面使用的字符集.

例子:

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

GB2312时，代表说明网站是采用的编码是简体中文；

ISO-8859-1时，代表说明网站是采用的编码是英文；

UTF-8时，代表世界通用的语言编码；

PS：html5页面的做法是直接使用<meta charset="utf-8"/>

X-UA-Compatible:IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题.

　　例子:

<meta http-equiv="X-UA-Compatible" content="IE=7">

以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。  

<meta http-equiv="X-UA-Compatible" content="IE=8">

以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。  

<meta http-equiv="X-UA-Compatible" content="IE=edge">

以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。  

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

以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

PS：谷歌添加一个插件：Google Chrome Frame（谷歌内嵌浏览器框架GCF），
这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，
实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

refresh:自动刷新并指向新页面。

　　　例子:

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">

PS：2代表页面停留2秒后跳转到后面的网址上

expires:设定网页的过期时间。

　　　例子:

<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">

PS：必须使用GMT的时间格式

set-cookie:如果网页过期，那么自动删除本地cookie

　　　　例子:

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

PS：必须使用GMT的时间格式。

windows-target:强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用

　　　　例子:

<meta http-equiv="Window-target" content="_top">

name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

author:标注网页的作者.

　　例子:

<meta name="author" content="zhn" />

keywords:页面关键词，用于被搜索引擎收录.

　　　　例子:

<meta name="keywords" content="web前端,web学习, javascript">

description:页面描述，用于搜索引擎收录.

　　　　例子:

<meta name="description" content="Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。它还记录了 Mozilla 产品的文档，例如 Firefox OS。">

viewport:用于控制页面缩放.

　　　例子:

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1, minimum-scale=1, user-scalable=no">详情可查看：http://www.cnblogs.com/lovesong/p/4355029.html

renderer:指定双核浏览器默认以何种方式渲染页面。

　　例子:

<meta name="renderer" content="webkit">//默认webkit内核

<meta name="renderer" content="ie-comp">//默认IE兼容模式

<meta name="renderer" content="ie-stand">//默认IE标准模式

PS：360浏览器支持

generator:说明网站采用的什么软件制作.

　　　　例子:

<meta name="generator" content="Microsoft"/>

revised:网页文档的修改i时间.

　　　　例子:

<meta name="revised" content="设计网, 6/24/2015"/>

robots:用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引.

　　例子:

<meta name="robots" content="none"/>

取值：all|none|index|noindex|follow|nofollow, 默认all

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；

index：文件将被检索；

follow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；

nofollow：文件将不被检索，页面上的链接可以被查询。

　　　　例子:

　　<meta name="copyright" content="本页版权zhn所有。All Rights Reserved" />

　　为移动设备添加 viewport

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

content 参数：

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

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

<meta name="viewport" content="width=device-width,user-scalable=yes">

适配 iPhone 6 和 iPhone 6plus 则需要写：

<meta name="viewport" content="width=375">

<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，
大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

SEO 优化部分

页面标题<title>标签(head 头部必须)

<title>your title</title>

页面关键词 keywords

<meta name="keywords" content="your keywords">

页面描述内容 description

<meta name="description" content="your description">

定义网页作者 author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

<meta name="robots" content="index,follow">

百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

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

参考:
　　http://www.cnblogs.com/herozhi/p/5993844.html
　　http://www.cnblogs.com/lovesong/p/5745893.html
　　https://developer.mozilla.org/zh-CN/