meta标签学习

发现meta标签可以做很多事情，查阅了相关资料，整理一份meta用途笔记。

所查阅资料：

http://segmentfault.com/blog/ciaocc/1190000002407912

http://blog.sina.com.cn/s/blog_666689090101bg8p.html

 

meta标签

属性	值	含义
http-equiv	content-type / expire / refresh / set-cookie	把content属性关联到HTTP头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称。
content	some text	定义用于翻译 content 属性值的格式。

 

SEO方面

   ●搜索引擎索引方式

    name是一些搜索引擎机器人的名称，如 Google的是googlebot ，MSN Search 的是 msnbot， Yahoo  的是 yahoo-slurp。content是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

<meta name="搜索引擎名称" content="index,follow" />

content取值:

    all：文件将被检索，且页面上的链接可以被查询；=index,follow
    none：文件将不被检索，且页面上的链接不可以被查询；=noindex,nofollow
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。搜索引擎不能追踪此网页上的链接
    

unavailable_after:[日期]:在指定的日期和时间后从搜索结果中删除这个网页

nosnippet: 在搜索结果中显示当前页时，不要显示页面摘要 

noarchive: 在显示本网页于搜索结果中时，不要显示一个"网页快照"链接

 

noodp/noydir: 在为本页产生标题或页面摘要时，不要使用开放式目录项目（又名dmoz.org）中的文本（不使用DOMZ、Yahoo!目录中描述作为网页摘要 ）
   
关于noodp和noydir，http://blog.sina.com.cn/s/blog_666689090101bg8p.html这篇文章提到：

 做SEO的朋友都经常和meta标签打交道，比如写description、keywords之类，但却很少用到noodp和noydir这样的标签（这两个其实比较老了，只是国内一般不太实用），这里我想对这两个做下说明，因为在不少做英文SEO的地方还得使用到。（meta标签详解）
 有些时候站点加入了dmoz或者yahoo的分类目录，这本是好事，但很多时候开始加入的时候并未考虑完全，或者后来网站业务出现的变化等等，这样的情况下，使得原本的好事可能在一些时候反倒有了负面影响，因为Google和yahoo默认情况下会优先抓取dmoz和雅虎分类目录里面的信息作为搜索结果的标题和描述。

     ●页面重定向和刷新

      content内的数字代表多少秒后刷新。加了url就会重定向到指定网页（搜索引擎能够自动检测）。     

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

      SEO方面的用法还有一些例如设置作者帮助搜索。

<meta name="author" content="作者名字" />

 

移动设备

       ●viewport(用作移动端显示的设置)

        设置在移动端显示的参数。

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

1.width：宽度（可为特定数值 或 device-width）（范围从200 到10,000，默认为980 像素）

2.height：高度（可为特定数值 或 device-height）（范围从223 到10,000）

3.initial-scale：初始的缩放比例 （范围从>0 到10）

4.minimum-scale：允许用户缩放到的最小比例

5.maximum-scale：允许用户缩放到的最大比例

6.user-scalable：用户是否可以手动缩 (no,yes)

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

 

   ●WebApp全屏模式

      伪装app，离线应用。      

<meta name="apple-mobile-web-app-capable" content="yes" /> 

   ●隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent

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

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

<meta content="telephone=no" name="format-detection" /> 
<!-- content为email=no 时则是忽略邮箱识别 -->

在网页部分的应用，最常见的就是编码形式

<meta charset='utf-8' />

然而在实际开发中还有很多用法

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

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

• 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。

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

• 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

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

• Windows 8

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

• 站点适配：主要用于PC-手机页的对应关系。

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

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

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