meta element和link element大全

随着html5的普及和Web技术的净化，从Windows XP的IE6到IE8、IE9、IE10、IE11，Edge，从传统pc浏览器到移动端浏览器，为了更好的支持html5和移动端适配。meta标签队伍越来越壮大，功能作用也越来越强大。meta标签是html中head区的一个辅助性标签，位于<head>标记和<title>标记之间，提供用户不可见的信息。meta标签有两个重要的属性：http标题信息（http-equiv）和页面描述信息（name）。name属性是描述网页的，对应于content（网页内容），以便于搜索引擎机器人查找、分类。以下是常见的meta标签：

常用网页类

编码charset：

作用：用于指定浏览器通过哪种编码来解析网页，必写。若不写，浏览器会以默认编码解析。

举例：

<meta charset="UTF-8">//国际通用，墙裂推荐

<meta charset="bg2312">//国内多见

<meta charset="bgk">//国内多见

<meta charset="iso8859-1">//国外多见

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">//老式写法，针对xhtml

有时浏览一些国外站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取html页面meta标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。

更多编码及乱码问题可以继续了解：
字符集历史和乱码问题

页面语言设置

<meta name="language" content="zh-CN">

<meta http-equiv="content-language" content="zh-CN">

IE兼容模式X-UA-Compatible：

作用：定义让IE如何编译你的网页，以保持外观一致性。

来由：在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，为了把网站无法正确显示的风险降到最低，IE8便新引入了这个文件兼容性的概念，它使你能选择你要对应的特定版本来达到兼容。

无效：

对于IE8以下的浏览器是不识别的，无效的。
X-UA-Compatible标头虽然没有大小写之分，但必须是放在除title及其他meta之外的所有元素之前的位置，否则无效。
X-UA-Compatible只有在前面也有meta的时候，才有效，如果前面一个meta也没有，也会失效。
X-UA-Compatible之前如果有Script标签或IE注释也会造成无效。
为防止失效，X-UA-Compatible最好紧跟在head之后的meta编码标签之后，之前则不要出现任何不标准标签。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Document</title>
</head>
<body>
</body>
</html>

举例：

使用一行代码来指定浏览器使用特定的文档模式。

<meta http-equiv="X-UA-Compatible" content="IE=7">
//以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

指定浏览器如果声明了文档类型则以指定版本的标准模式渲染，如果是怪癖模式Quirks下（未申明doctype）则以IE5渲染。（用IE9访问带有x-ua-compatible的页面时可能不会出现兼容视图按钮）

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
//以上代码告诉IE，IE8/9以及以后版本若指定了文档类型则以IE9标准模式渲染，否则以IE5渲染。

指定浏览器按照最新最高的标准模式解析页面（这个最新指的是你系统上装的最高版本的IE）。但是这和去掉不写的效果是有区别的，因为有些因素会自动触发兼容性文档视图，设置X-UA-Compatible后会防止这个自动触发的行为。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
//以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

强制IE使用谷歌外挂插件Chrome Frame渲染。这个插件可以让用户的IE浏览器外观不变，但在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

<meta http-equiv="X-UA-Compatible" content="chrome=1">
//以上代码告诉IE浏览器，IE8/9及以后的版本都会以Chrome浏览器内核渲染页面。

用逗号升序来分割多个版本，指定多个模式。这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。（分号兼容性差）

<meta http-equiv="X-UA-Compatible" content="IE=7,9,10">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10">
//以上代码告诉IE浏览器，IE8/9及以后的版本都会以IE10标准模式来渲染页面。

目前最佳兼容模式方案：让IE使用最新的引擎渲染网页并激活Chrome Frame插件。这样最为简单快捷，但是弊端是代码将无法通过W3C验证。这种情况下可以把X-UA-Compatible写入HTTP Response Header（HTTP响应头）中。服务器中如何去写请自行谷歌百度，只需记住，在网页中指定的模式优先权高于服务器中所指定的模式。meta tag > http header

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

指定内核renderer：

renderer这东西是为双核浏览器（如360浏览器）准备的，用来指定双核浏览器默认以何种方式渲染页面。有三个值，可以单独去写。如：

<meta name="renderer" content="webkit">//默认以webkit内核渲染页面
<meta name="renderer" content="ie-comp">//默认IE兼容模式渲染页面
<meta name="renderer" content="ie-stand">//默认IE标准模式渲染页面

也可以多个写在一起用“|”分隔开，浏览器将会按照从左到右的先后优先级顺序选择其具备的渲染内核来处理当前网页。

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

扩展：双核浏览器
主要是因为目前国内还有很多老旧网站，尤其是政府网站大部分只能使用ie6/7才能正常显示，对html5和css3支持很差，而作为浏览器来说，主要责任就是无错误显示网页，所以，就衍生出了很多双核浏览器，比如：搜狗高速浏览器（默认IE内核兼容模式），QQ浏览器（默认IE内核兼容模式）、360浏览器（默认Webkit内核极速模式）、遨游浏览器（默认Webkit内核极速模式）、猎豹浏览器（默认Webkit内核极速模式）、UC浏览器（基于Webkit的U3，U4内核）等等。所谓双核，实际上就是浏览器包含两个渲染内核。常见的是Trident内核和Webkit内核。但要注意，双核的意思是两个内核，选择一个来渲染页面，并不是两个内核同时渲染一个页面，这和双核处理器不同。Trident内核主要还是针对兼容哪些老旧的网页用的，Webkit内核则主要用于html5为主的新一代网页。双核浏览器用户自己可以在设置和工具栏里进行手动设置来选择用哪个内核的，但现实是普通用户根本不关心也不知道这个区别，所以，选择渲染内核的工作都是由双核浏览器自己智能完成的。即便这样，浏览器也有出错的时候，它并非能百分百准确做出合适当前页面的渲染内核。如果我们网站用的是html5写的，但它判断错误后用IE内核来渲染的话，就会导致页面错乱。这个时候就引入了renderer，通过它指定双核浏览器采用哪种内核来渲染，因为我们自己清楚自己用的是h4的还是h5的，不会出错，对于用户来说，也不用手动设置，浏览器则会根据我们指定的内核来渲染，达到正确处理和正确显示页面的目的。

期限expires

可以用于设定网页的到期/过期时间。一旦网页过期，必须到服务器上重新传输（必须使用GMT时间格式）。

<meta http-equiv="expires" content="0">

<meta http-equiv="expires" content="Wed, 20 Jun 2016 22:33:00 GMT">

缓存模式pragma

用于设定禁止浏览器从本地的缓存中调阅页面内容，设定no-cache后，网页将不会保存在缓存中，一旦用户离开网页就无法再从cache中调出，也就无法脱机浏览了，而且用户每次访问都算刷新页面，需要重新向服务器请求数据。

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

清除缓存cache-control

默认情况下，浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。但对于特殊页面，比如页面有计数器，有变化的广告，你需要用户随时看到最新内容。这时候就要禁用缓存了。通常html文件没有必要禁用缓存，但对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。需要注意的是在请求消息或响应消息中设置cache-control并不会修改另一个消息处理过程中的缓存机制。

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

请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、min-fresh、max-age。

各指令含义如下：
public指示响应可被任何缓存区缓存。
private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
no-cache指示请求或响应消息不能缓存。
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

cookie设定set-cookie

如果网页过期，那么存盘的cookie将被删除，必须使用GMT的时间格式。

<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2016 22:33:00 GMT;path=/">

站点适配

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

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

移动设备类

移动适配viewport：

viewport 即手机浏览器的一个虚拟视窗。默认情况下这个虚拟的"窗口"（viewport）比屏幕宽，用户可以通过横向华东和缩放来看网页的不同部分，避免把每个网页挤到很小的窗口导致看不清的情况发生。viewport标签刚开始主要是为了解决未经针对移动端优化的网站而设置的一个标签，由苹果公司首用在safari中，后来被各大浏览器厂商采用。这个标签主要是针对一些没有太多要求的网站的移动适配解决方案，但并非是最好的方式，推荐的做法是针对手机端重新进行页面设计、布局。

语法：

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

属性名	取值	描述
width	正整数或 device-width	定义视口的宽度，范围从 200 到 10,000 ，默认为980 像素
height	正整数或 device-height	定义视口的高度，一般不用，范围从 223 到 10,000
initial-scale	[0.0-10.0]	定义初始缩放值，范围从>0到 10 。
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

注意：如果不是响应式网站，不要使用initial-scale或者禁用缩放。很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

深入了解viewport

WebApp全屏模式：

伪装app，离线应用。属于ios设备中safari私有的meta标签。

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

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

meta标签也是ios系统的私有标签，它指定在web app状态下，ios设备中顶端的状态条的颜色，只有在开启web app全屏模式时才生效。content的值为default | black | black-translucent。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4的Retina屏幕为40px）

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

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

使设备浏览网页时对数字不启用电话功能（不同设备解释不同，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码。

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

若需要启用电话功能将telephone=yes即可，具体调用格式可以这样书写代码：

<a href="10086″>Call Me</a>

若在页面上面有google maps, iTunes和youtube的链接会在ios设备上打开相应的程序组件。

添加到主屏后的标题

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

添加到主屏幕后全屏显示

<meta name="apple-touch-fullscreen" content="yes">

忽略识别邮箱

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

添加智能 App 广告条 Smart App Banner

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

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

其他移动浏览器私有meta

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

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

<meta name="screen-orientation" content="portrait">
//UC强制竖屏

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

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

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

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

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

<meta name="viewport" content="uc-fitscreen=no">
//设置UC缩放滚动条，设置no后用户缩放与标准浏览器缩放一致，设为yes后，用户缩放不出现横向滚动条。

<meta name="layoutmode" content="fitscreen">
//UC浏览器排版，fitscreen是简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode后，浏览器提供的默认排版模式将无效。

<meta name="nightmode" content="enable">
//UC浏览器夜间模式，enable即夜间模式，disable非夜间模式，设为disable后页面默认的设置失效，即永远以非夜间模式显示。

<meta name="imagemode" content="force">
//UC浏览器强制显示图片，不影响子页面，图片加载方式会作用于整个页面，如果希望对单个图片进行设置，可以使用`![](...)`

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

Apple iOS 图标

用iphone访问网站时自定义添加到桌面的app图标，precomposed属性为不加高光处理，为设计原图样式。

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- iphone和iPad的不加高光处理图标，必须要有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" sizes="57x57">
<!-- 320×640的iphone老设备iPhone和iTouch，默认57x57像素，必须有，precomposed属性为不加高光处理，为设计原图样式 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- 老设备的iPad，默认72x72像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-76x76-precomposed.png" sizes="76x76">
<!-- ipad2 & ipad mini 图标 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
<!-- Retina屏的iPhone和iTouch，114x114像素，可以没有，但推荐有 --> 
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
<!-- Retina屏和iPad3，144x144像素，可以没有，但推荐有 --> 
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-120x120-precomposed.png" sizes="120x120">
<!-- iphone & ipod touch (ios7/8) -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" sizes="152x152">
<!-- ipad retina (ios7/8) -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-180x180-precomposed.png" sizes="180x180">
<!-- iphone6 plus -->
<link rel="apple-touch-startup-image" href="/splash-screen-768x1004.png" sizes="768x1004">
<!-- iPad 竖屏 768 x 1004（标准分辨率） --> 
<link rel="apple-touch-startup-image" href="/splash-screen-1536x2008.png" sizes="1536x2008">
<!-- iPad 竖屏 1536x2008（Retina） --> 
<link rel="apple-touch-startup-image" href="/Default-Portrait-1024x748.png" sizes="1024x748">
<!-- iPad 横屏 1024x748（标准分辨率） --> 
<link rel="apple-touch-startup-image" href="/splash-screen-2048x1496.png" sizes="2048x1496">
<!-- iPad 横屏 2048x1496（Retina） --> 
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" sizes="320x480">
<!-- iPhone/iTouch 竖屏 320x480 (标准分辨率) --> 
<link rel="apple-touch-startup-image" href="/splash-screen-640x960.png" sizes="640x960">
<!-- iPhone/iTouch 竖屏 640x960 (Retina) --> 
<link rel="apple-touch-startup-image" href="/splash-screen-640x1136.png" sizes="640x1136">
<!-- iPhone5/iTouch5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" href="/startup-320x480.png" media="screen and (max-device-width:320px)">
<!-- iPhone (竖屏) -->
<link rel="apple-touch-startup-image" href="/startup-640x960.png" media="(max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)">
<!-- iPhone (竖屏) -->
<link rel="apple-touch-startup-image" href="/startup-640x1136.png" media="(max-device-width:548px) and (-webkit-min-device-pixel-ratio:2)">
<!-- iPhone (竖屏) -->
<link rel="apple-touch-startup-image" href="/startup-768x1004.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)" sizes="768x1004">
<!-- iPad (竖屏) -->
<link rel="apple-touch-startup-image" href="/startup-1024x748.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)"  sizes="1024x748">
<!-- iPad (横屏) -->
<link rel="apple-touch-startup-image" href="/startup-2048x1496.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)"  sizes="2048x1496" />
<!--iPad Retina(横屏) -->
<link rel="apple-touch-startup-image" href="/startup-1536x2008.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)" sizes="1536x2008" />
<!--iPad Retina(竖屏) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-7501294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS8 iPhone 6 (竖屏) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-7101334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS8 iPhone 6 (横屏) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1242218.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)">
<!-- iOS8 iPhone 6 Plus (竖屏) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1182228.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)">
<!-- iOS8 iPhone 6 Plus (横屏) -->

地理标签

<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]">
<meta name="geo.placename" content="city/town">

SEO优化类

关键字keywords：

keywords主要是用于定义网页关键词的，用户一般看不到keywords，通过查看源代码才可以看到。主要作用是告诉搜索引擎，这个网站内容主题是什么，便于搜索引擎给网页分类。之前keywords对于SEO优化很重要，但现在优化比重降低了，但还是要写的。

语法：
keywords出现在name属性中，关键词则放在content属性中，多个关键词用半角逗号隔开。

举例：

<meta name="keywords" content="SEO,SEO教程,SEO排名">

注意：

不要写过多的关键词，最好保持在10个以下，一般要不超过100个字符。过多的关键词，会被搜索引擎误认为关键词堆砌，建议写个3到5个就行了。
不要给网页定义与网页描述内容无关的关键词。
对于自动生成网页的网站，如论坛、博客等会自动提取关键词，这种一般不好控制，但很多开源程序后台是能设置的，如dedecms。
多个关键词用半角逗号隔开，千万不要用全角逗号，因为搜索引擎可能会误认为这是一句话，而不是很多关键词。

网页描述description：

description，主要是告诉搜索引擎网页的主要内容的，相当于中心思想文章概要。用户一般看不到keywords，通过查看源代码才可以看到。同keywords一样，之前description对于SEO优化也比较重要，现在也不行了。

语法：
description出现在name属性中，内容描述则放在content属性中，可以出现全角逗号。

举例：

<meta name="description" content="网易是一家中国互联网公司，为用户提供新闻服务。">

注意：

description描述不能太长，应该保持在140-200个字符或100个汉字左右。
description写的时候可以参考网站的keywords，可以将关键词揉进一句话里面。
description不要写与网页内容无关的描述，写的要尽量和网页内容主题高度相关。

搜索引擎索引方式robots

告诉搜索引擎哪些页面需要索引，哪些页面不需要索引。
content的值包括：all, none, index, noindex, follow, nofollow, noarchive, nosnippet, noodp或noydir。多个使用半角逗号隔开，如果不设置浏览器则默认为all。

属性说明：
all：此网页可被搜索引擎索引，且可以继续通过此网页的链接索引其他网页，等价于index和follow。
none：此网页讲不被搜索引擎索引，搜索引擎也不能通过此页面上的链接索引其他页面和传递链接权重，相当于此页面被搜索引擎将忽略了，等价于noindex和nofollow。
index：此网页可以被搜索引擎索引。
noindex：此网页将不被搜索引擎索引，但搜索引擎可以通过此页面上的链接索引其他网页并传递链接权重。
follow：搜索引擎可以继续通过此网页的链接索引搜索其它的网页。
nofollow：搜索引擎不能继续通过此网页的链接索引搜索其它的网页和传递链接权重。
noarchive：禁止搜索引擎显示此页面网页快照。
nosnippet：在搜索结果中显示当前页时，不要显示页面摘要。
noodp或noydir: 在此网页产生标题或页面摘要时，不要使用开放式目录项目（DOMZ、Yahoo!目录）中的文本描述作为网页摘要。

举例：

<meta name= "robots " content= "noindex">

<meta name= "robots " content= "nofollow">

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

<meta name="robots" content="noarchive">

<meta name= "googlebot " content= "noindex, nofollow">
//针对谷歌的googlebot

<meta name= "baiduspider " content= "noarchive">
//针对百度的baiduspider

<meta name="slurp" content="noydir">
//针对yahoo的slurp

<meta name="msnbot" content="noodp">
//针对msn的msnbot

扩展：
如果不想百度追踪某一条特定链接，百度还支持更精确的控制，请将此标记直接写在某条链接上：

<a href="signin.php" rel="nofollow">sign in</a>

google

<meta name="google" content="nositelinkssearchbox">
//告诉谷歌不显示网站链接的搜索框

<meta name="google" content="notranslate">
//告诉谷歌不要为这个页面提供翻译

页面刷新和重定向refresh

让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。如果加url，则用分号分开，把url链接放到后面，页面则会在多少秒后重定向到指定新网页地址（搜索引擎能够自动检测，也很容易被引擎视作误导而受惩罚），大家可以去看看hao123的源码，就是做了刷新重定向的。

<meta http-equiv="refresh" content="3">

<meta http-equiv="refresh" content="3;url=http://www.geekiii.com/">

RSS网站地图-sitemap

复制代码保存到一个sitemap.xml（或ror.xml）文件中，然后上传到你应用的根目录下。并且把下面代码增加到你站点主页的<head>标签中，主要是为了方便搜索引擎来读取。

<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml">

<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml">

重访revisit-after

通知搜索引擎多少天访问一次。

<meta name="revisit-after" content="7 days">

页面内容摘要abstract

对页面内容进行简短的描述，常见于内容页面中，可以加强搜索引擎对页面内容的收录，便于用户搜索。

<meta name="abstract" content="我是公益众筹专题页面">

页面主题page-topic

你可以用你当前页面的关键词作为网页主题。

<meta name="page-topic" content="随便写点什么吧">

页面等级衡量rating

对当前页面的一个等级衡量，告诉搜索引擎蜘蛛当前页面在整个网站中的权重到底是多少。general是一般页面，mature是比较成熟的页面，restricted代表受限制的。

<meta name="rating" content="general">

避免重复收录canonical

rel="canonical"标签是为了解决由网站url链接不一样但网页内容一样而造成百度重复收录的问题，对于这样的情况，如果不采用百度rel="canonical"标签，后果将导致百度对两个相同的网页收录和排名的问题上不知情，久而久之，当网站存在大量这样的网页的时候，可能导致网站大量重复内容而被降权、不收录甚至被K。一般需要使用此标签的场景为：
1、网站进行了改版，将旧的内容搬到了新的URL链接上，但是没有做301重定向。2、附带不同参数但是内容基本一样的页面，比如某些论坛没有做伪静态处理，则每个栏目或帖子都将出现动态链接的问题，还有一些电子商务网站在每个商品链接后面添加的追踪代码，但是它们的内容却是一样。
3、由其它原因引起内容相同或相似的页面。

<link rel="canonical" href="http://www.geekiii.com">
//link标签里的url链接是你所认为的规范、正确、希望百度收录且参与排名的那个链接。

其他类

编辑器generator

告诉浏览器网站的生成工具，采用的什么软件或编辑器制作的，多见于cms开源系统。

<meta name="generator" content="Discuz! X3.2">//网站用的是discuz开源系统制作的
<meta name="generator" content="Sublime">//网站用的是sublime编辑器制作的

作者author

告诉浏览器这个网页的作者或制作组用法。
注意：Content可以是你或你的制作组的名字或Email，也可以引用网址。

<meta name="author" content="Discuz! Team and Comsenz UI Team">
<meta name="author" content="mycodewind,mycodewind@qq.com">
<meta name="author" content="http://www.geekiii.com/">

版权申明copyright

告诉浏览器此网页的版权信息，同样可以是网址。

<meta name="copyright" content="2001-2013 Comsenz Inc.">
<meta name="copyright" content="http://www.geekiii.com/">

网页设计者说明designer

<meta name="designer" content="王大锤,10086@qq.com">

MSSmartTagsPreventParsing

在IE6中有一个Smart tag的智能标签开关，如果设置了这个后，访问者将看不到某些相关连接，防止微软页面编辑软件在页面上自动添加标签、链接等，保证代码原汁原味，避免访问者流失到其他网站上去。不过这个很少有设置的，设置与否不重要。

 <meta name="MSSmartTagsPreventParsing" content="True">

显示窗口设定window-target

强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。Content选项有_blank、_top、_self、_parent四个。

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

网页RSAC等级评定pics-label

在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。但不要将级别设置的太高。RSAC的评估系统提供了一种用来评价web站点内容的标准。用户可以设置IE来排除有色情和暴力内容的站点。刚看了一下RSAC官网，貌似是已停用了，大家可以忽略这个了。

<meta http-equiv="pics-label" contect="">

Page_Enter、Page_Exit

这个是页面被载入和调出时的一些特效，但页面不能是frame页面。blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜revealtrans也可以用于页面进入与退出。

<meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

设定进入页面时的特殊效果：

<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion=7)">

设定离开页面时的特殊效果：

<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion=7)">

Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。
如：
0-盒状收缩
1-盒状放射
2-圆形收缩
3-圆形放射
4-由下往上
5-由上往下
6-从左至右
7-从右至左
8-垂直百叶窗
9-水平百叶窗
10-水平格状百叶窗
11-垂直格状百叶窗
12-随意溶解
13-从左右两端向中间展开
14-从中间向左右两端展开
15-从上下两端向中间展开
16-从中间向上下两端展开
17-从右上角向左下角展开
18-从右下角向左上角展开
19-从左上角向右下角展开
20-从左下角向右上角展开
21-水平线状展开
22-垂直线状展开
23-随机产生一种过渡方式

开/关xp主题MSThemeCompatible

开关xp的蓝色立体按钮系统显示样式

<meta http-equiv="MSThemeCompatible" Content="yes">

<meta http-equiv="MSThemeCompatible" Content="no">

关闭保存图片按钮imagetoolbar

在浏览网站上的图片时，不出现浮动的保存图片按钮。

<meta http-equiv="imagetoolbar" content="no">

脚本相关

指明页面中脚本的类型。

<meta http-equiv="Content-Script-Type" content="text/javascript">

页面主题核心内容subject

<meta name="subject" content="如何科学的理财">

定义页面的最新版本

<meta name="revised" content="王大锤, 2017/01/01, 5:15 pm">

面向对象distribution

声明你网站的发布对象是面向全球，还是仅仅针对当地。

<meta name="distribution" content="global">

网站发布者publisher

网站发布者的说明，一般为发布公司信息。

<meta name="publisher" content="某某科技有限公司">

页面标题title

通常这里的值是网页的内容标题

<meta name="title" content="快捷导航">

windows固定网站功能

从IE9开始便引入了固定网站功能，对用户来说这是一种只需在任务栏上单击图标即可直接访问网站的简单方式。这类meta标签只在IE9+生效。在系统Windows Vista、Windows 7系统上。

官方文档

application-name

定义固定网站应用程序实例的名称。当光标悬停在Windows7任务栏的固定网站按钮上时，此名称将出现在工具提示中。该应用程序名称还将附加到固定网站应用程序实例的窗口标题中。

<meta name="application-name" content="hao123网址导航">

msapplication-tooltip

提供其他工具提示文本，当光标悬停在 Windows 的“开始”菜单中或桌面上的固定网站快捷方式上时，将会出现这些文本。

<meta name="msapplication-tooltip" content="hao123导航，第一导航">

msapplication-starturl

包含应用程序的根URL。起始URL可以是完全限定或相对于当前文档的。只允许 HTTP和HTTPS协议。如果缺少此元素，则改为使用当前页的地址。

<meta name="msapplication-starturl" content="./">

扩展
msapplication-starturl可创建网站的公共入口点。当存在此数据时，固定网站会启动起始URL而不是最初拖动到任务栏的页面。更重要的是，起始页中声明的运行时元数据将在每次启动网站时重新定义导航按钮颜色和静态跳转列表任务。

作为如何使用 "msapplication-starturl" 的示例，请考虑一个提供多个类型的计算器仿真器的站点：一个具有标准布局，一个具有科学布局，一个具有统计函数。如果没有起始URL，用户可能只将科学计算器固定到任务栏，从而无法轻松地访问集合中的其他计算器。通过添加起始URL，网站开发人员可以声明网站的公共入口点。

<meta name="msapplication-starturl" content="./CalculatorHome.html">

通过将安装时元数据添加到仿真程序页面，网站开发人员可控制用户访问网站的方式。通过在起始页中添加跳转列表元数据，网站开发人员可以更轻松地控制用户选择要使用的计算器样式的方式。
处理服务器重定向如果你的起始URL重定向到其他网页，请确保声明提供给客户端的网页中的所有运行时元数据。如果服务器重定向到新路径，则你的起始 URL 必须包括该路径和结尾反斜杠 (/)。例如，如果 "http://contoso.com/" 重定向至 "http://www.contoso.com/Home/"，则起始URL必须包括新路径和结尾反斜杠，
如下所示：

<meta name="msapplication-starturl" content="http://www.contoso.com/Home/">

<meta name="msapplication-starturl" content="/Home/">

msapplication-window

设置固定网站首次启动时的初始窗口大小。但是，如果用户调整了窗口大小，则再次启动固定网站时，该网站将保留新的尺寸。content有两个值width（最小值800px）和height（最小值600px）。两个值都是必需的，且必须用分号隔开。

<meta name="msapplication-window" content="width=1024;height=768">

msapplication-navbutton-color

定义固定网站浏览器窗口中的“后退”和“前进”按钮的自定义颜色。任何命名颜色或十六进制颜色值均有效。如果没有此meta元素，则默认颜色将基于网站图标（favicon）的调色板。

<meta name="msapplication-navbutton-color" content="#ff3300">

msapplication-task

它能够将一个网站如同程序一样固定在Windows Vista 和Windows 7的任务栏中，并且在点击图标后显示一个相关网站的列表。可使用meta元素定义静态任务。

<meta name="msapplication-task" content="name=8783手游网;action-uri=http://www.8783.com;icon-uri=../static/8783.ico">

msapplication-task-separator

将此元素放在各个任务之间，以便在跳转列表菜单中放置一条分隔线。如果有多条分隔线，则必须通过声明content="[unique value]" 使每条分隔线都具有唯一性。

<meta name="msapplication-task" content="name=Latest HTMLGoodies Articles;action-uri=http://www.htmlgoodies.com/;icon-uri=http://www.htmlgoodies.com/Favicon.ico">

<meta name="msapplication-task" content="name=HTML5 Development Center;action-uri= http://www.htmlgoodies.com/html5/;icon-uri=http://www.htmlgoodies.com/Favicon.ico">


### 多语言支持alternate

这个命令是google专为那些有多语言版本的网站所准备的，官方所说的适用于此命令的网站包含但不限于以下几种情况。
- 您只翻译了网页的模板（例如导航和页脚内容），并以单一语言显示主要内容。这种情况通常出现在以用户生成的内容（如论坛帖子）为主体的网页中。
- 您的网页以单一语言显示了大致相同的内容，但这些内容却存在细微的区域差异。例如，您可能将英语内容定位为面向美国、英国和爱尔兰的用户。
- 您的网站内容经过完全翻译。例如，您的所有网页都拥有德语和英语两个版本。

简单概括一下就是只要你的网站有不同语言的版本，都可以使用这个命令。


使用的方式是这样。例如你有一个网站，这个网站同时拥有英语和简体中文两个版本，英语的版本是http://www.example.com/；中文的url是http://cn.example.com/
这个时候你就需要把上面提到的那一行代码，放到www.example.com上，也就是英文版的网站head当中，告诉搜索引擎我还有一个简体中文的版本，并且告诉搜索引擎他的地址是什么。反之亦然，同样可以在简体中文的网站上加上英语版本的url。
通常情况下我们的网站如果有多语言版本的话，会采用二级目录或者二级域名，这两种方法各有利弊，二级域名看起来更加正规，但是权重需要重新积累。二级目录可以很好的继承主域名的权重，但是后期发展不够给力。用了这个rel="alternate" hreflang="x" 指令以后就会舒服很多了。


###  控制http请求中的referer

在某些情况下，出于一些原因，网站想要控制页面发送给服务器的referer信息的情况下，可以使用referer metadata参数。比如，社交网站一般都会有用户个人页面，这些页面中用户都有可能添加一些外网的链接（个人主页），而社交网站可能不希望在用户点击了这些链接的时候，泄露用户页面的rul，因为这些url中可能包含一些敏感信息。当然，有些社交网站可能只想在referer中提供一个hostname，而不是完整的url信息。有些使用了https的网站，可能在url中使用一个参数（sid等）来作为用户身份凭证，而又需要引入其他https网站的资源，这种情况下，网站肯定不希望泄露用户的身份凭证信息。有些网站遵循**Object-Capability Discipline**，而referer刚好与这一策略相悖，所以，网站能够控制refeer将对Object-Capability Discipline很有利。
referer 的 metedata 参数可以设置为四种类型：never、always、origin、default。
如果在文档中插入meta标签，并且name属性的值为 referer，浏览器客户端将按照如下步骤处理这个标签：
1. 如果 meta 标签中没有 content 属性，则终止下面所有操作。
2. 将 content 的值复制给 referrer-policy ，并转换为小写。
3. 检查 content 的值是否为上面 list 中的一个，如果不是，则将值置为 default。
上述步骤之后，浏览器后续发起 http 请求的时候，会按照content的值，做出如下反应（下面 referer-policy 的值即 meta 标签中 content 的值）：
1. 如果 referer-policy 的值为never：删除 http head 中的 referer；
2. 如果 referer-policy 的值为default：如果当前页面使用的是 https 协议，而正要加载的资源使用的是普通的 http 协议，则将 http header 中的 referer 置为空；
3. 如果 referer-policy 的值为 origin：只发送 origin 部分；
4. 如果 referer-policy 的值为 always：不改变http header 中的 referer 的值，注意：这种情况下，如果当前页面使用了 https 协议，而要加载的资源使用的是 http 协议，加载资源的请求头中也会携带 referer。

**例如：**
如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：

如果页面中包含了如下 meta 标签，则从当前页面中发起的 http请求将只携带 origin 部分（注：根据原文中的语境，我理解这里的 origin 是包含了 schema 和 hostname 的部分 url，不包含 path 等后面的其他 url 部分），而不是完整的url：

注意：在使用本文中所述的 meta 标签的时候，浏览器原有的 referer 策略将被打破，比如从 http 协议的页面跳转到 https 的页面的时候，如果设置了适当的值，也会携带 referer。

这与`rel=noreferer`有什么关系呢？
可能 rel=noreferer 会覆盖掉本文中的 meta 标签所设置的值。也就是功能覆盖。origin 信息不是一个完整的 url，所以浏览器客户端估计会在 origin 后面加一个`/`来作为 path 部分。如果 origin 是唯一的，会发生什么情况呢？估计 referer 会被忽略。

### Favicons


### Facebook


### Twitter


### Google+


### 微信分享sharecontent


# 实例
![](http://upload-images.jianshu.io/upload_images/100954-1e4dc36284e71bad.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[html文件下载](https://pan.baidu.com/s/1miI2InA)

# 参考资料
https://bitsofco.de/
http://www.htmlgoodies.com/
https://msdn.microsoft.com/library
https://github.com/joshbuchea/HEAD#meta
http://www.w3school.com.cn/tags/att_link_rel.asp
https://developer.apple.com/library/content/qa/qa1686/_index.html
https://developer.apple.com/safari/resources/#documentation/appleapplications/reference/safarihtmlref/articles/metatags.html
[W3C META TAGS](http://www.w3.org/TR/html5/document-metadata.html#the-meta-element)
[METATAGES in HTML5](http://www.html-5.com/metatags/)
[MDN META TAGS](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)

最后编辑于：2017.12.05 05:14:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 198,082评论 5赞 464
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,231评论 2赞 375
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 145,047评论 0赞 327
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,977评论 1赞 268
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,893评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 47,014评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,976评论 3赞 388
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,605评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,888评论 1赞 293
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,906评论 2赞 314
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,732评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,513评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,980评论 3赞 301
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,132评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,447评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,027评论 2赞 343
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,232评论 2赞 339