META标签详解

2017-12-04 本文已影响0人阡陌哥哥

meta标签的常用属性

image.png

name属性

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

----author

用来标注网页的作者

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

----description

用来告诉搜索引擎你的网站主要内容。就是下面红框中的内容

image.png

<meta name="description" content="这是一个什么网站，里面有你想要的什么内容" />

----keywords

里面定义你的网页的搜索关键字，用于搜索引擎查找的根据

<meta name="keywords" content="meta标签, meta总结, html" />

注意，关键字之间的分隔是用英文逗号

----generator

用来说明你的网页的开发工具

<meta name="generator" content="你使用的编辑开发工具" />

----revised

网页文档修改时间

<meta name="revised" content="百小度网，8/18/2017" />

----robots

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

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

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

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

index：文件将被检索；

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

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

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

---copyright

网站版权信息

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

----viewport

用于控制页面缩放，多用于响应式页面开发中

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no″ />

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

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

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

user-scalable：用户是否可以手动缩放，默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

---applicable-device

告诉浏览器和搜索引擎，这个网页应用的设备是pc还是mobile

如果该网页只在电脑上浏览

<meta name="applicable-device" content="pc" />

如果是自适应网页

<meta name="applicable" content="pc,mobile" />

但是要告诉搜索引擎不要把网页转码

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

----mobile-agent（仅适用百度移动搜索）

当我们的网页自适应有点困难，或者你区分不清移动端和pc端的自适应怎么安排，加入这个meta标签，百度可以帮我们检测用户终端是不是移动设备，并且选择在移动端展示的页面。

<meta name="mobile-agent" content="format=html5; url=http://www.jianshu.com/p/35e69759dc4b" />

format的取值有wml|xhtml|html5，表示手机页的协议语言。

url代表当前PC页所对应的手机页url，两者必须是一一对应关系。

原来的写法

<meta http-equiv="mobile-agent" content="format=html5; url=http://www.jianshu.com/p/35e69759dc4b" />

生效时间：在标注准确对应关系无误的情况下，百度会在七天左右进行处理，老旧页面会有延迟。但百度不保证一定能在移动搜索结果中按照您提交的对应关系进行替换。

其他常用属性

<meta charset='utf-8'>
<!-- 声明文档使用的字符编码 -->

<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->

<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->

<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->

 <!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
 
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
 
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
 
<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->
 
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->

http-equiv

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

----content-Type

页面使用的字符集

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

----Expires

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

<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />

----refresh

自动刷新并指向新页面。

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

两秒后自动转到URL后面的网页

----Set-Cookie

如果网页过期，那么存盘的cookie将被删除。

＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞

----Window-target

强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。

＜meta http-equiv="Window-target" content="_top"＞

----Pics-label

在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。

<meta http-equiv="Pics-label" content="">

具体取值，参考http://www.w3school.com.cn/asp/prop_pics.asp

----Pragma

是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出.这样设定，访问者将无法脱机浏览。

＜meta http-equiv="Pragma" content="no-cache"＞

----cache-control

清除缓存（再访问这个网站要重新下载！）

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

----Page_Enter、Page_Exit

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

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

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

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

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 随机产生一种过渡方式

property=og标签

Meta Property=og标签是什么呢?

og是一种新的HTTP头部标记，即Open Graph Protocol：

The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

即这种协议可以让网页成为一个“富媒体对象”。
用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。

SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

参考
http://blog.csdn.net/geniussnail/article/details/17319311
http://kinglyhum.iteye.com/blog/827807