盘点竞价手机网页对meta标签的特殊需求

最近遇到一个问题，竞价页面在投放到手机uc浏览器后微信号长按不能复制，各种排查后找到了原因，页面里有<meta name="browsermode" content="application">，“各种排查”说明我没有在意该meta标签的存在。

做了四五个响应式网站了，能用到的也就是<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">，所以其它的就被我忽略了,但往往被忽略的对页面起着很重要的作用。

我把这个一一百度，并做了延伸，希望对大家有所帮助。

一、网页快照、抓取索引

<meta name="robots" content="noarchive">:限制所有搜索引擎建立网页快照

<meta name="Baiduspider" content="noarchive">：限制百度建立网页快照

<meta name="robots" content="noindex,follow">：meta name="robots"泛指所有搜索引擎

content部分的四个命令如下：

index：告诉搜索引擎抓取这个页面；

follow：告诉搜索引擎可以从这个页面上找到链接，然后继续访问抓取下去；

noindex：不允许抓取；

nofollow：不允许找链接，拒绝继续访问。

根据以上的命令，可以产生以下四种组合：

<meta name="robots" content="index,follow">：可以抓取本页，而且可以顺着本页继续索引别的链接；

<meta name="robots" content="noindex,follow">：不许抓取本页，但是可以顺着本页抓取索引别的链接；

<meta name="robots" content="index,nofollow">：可以抓取本页，但是不许顺着本页抓取索引别的链接；

<meta name="robots" content="noindex,nofollow">：不许抓取本页，也不许顺着本页抓取索引别的链接。应用：例如本博客的碎言碎语多是生活感悟，篇幅不是很长，且本身不允许点击，如果被收录了，访客进来就会感觉很奇怪，从长远来讲，对网站整体的SEO不宜，这个时候就得用这串代码了。

还有一些简便写法如下：

<meta name="robots" content="index,follow">可以写成<meta name="robots" content="all">;

<meta name="robots" content="noindex,nofollow">可以写成<meta name="robots" content="none">

也可以把禁止建立快照和对于搜索引擎的命令写到一个命令元标记中：<meta name="robots" content="index,follow,noarchive">

单独的某个搜索引擎不允许建立快照，例如百度可以写成：<meta name="Baiduspider" content="index,follow,noarchive">

如果在元标记中不屑关于蜘蛛的命令，默认的命令为：<meta name="robots" content="index,follow,archive">，因此，如果我们对于这一部分把握不准的话，可以直接写上上面的这一行命令，或者是直接留空。

二、

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

inital-scale：初始的缩放比例；

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

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

user-scalable：用户是否可以手动缩放。

三、

<meta content="yes" name="apple-mobile-web-app-capable">：删除默认的苹果工具栏和菜单栏，需要显示工具栏和菜单栏时这行代码不用加。

四、

<meta content="black" name="apple-mobile-web-app-status-bar-style">：默认值为default（白色）、black（黑色）、black-translucent(灰色半透明)，若值为black-translucent将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）

五、下面的这些是比较常用的

<meta name="format-detection" content="telphone=no">：告诉设备忽略将页面中的数字识别为电话号码；

<meta name="renderer" content="webkit">：默认用极速核；

<meta name="screen-orientation" content="portrait">：uc强制竖屏；

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

<meta name="full-screen" content="yes">：uc强制全屏，应用：全屏后不易受到页面其它因素的干扰，也不会因为这些因素的干扰而流失客户；

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

<meta name="browsermode" content="application">：uc应用模式，应用：就是加了这个，uc浏览器里面微信号才不能长按复制，竞价页面玩的就是微信号，试想一下用户复制不了微信号是个怎样的情况；

<meta name="renderer" content="webkit|ie-comp|ie-stand">：区分大小写，分别代表用极速模式、兼容模式、ie模式打开。作用：如果访问的页面中有 CSS3 代码，双核浏览器会自动切换到 Webkit内核，即不同浏览器打开的兼容性。