发现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" />