chaihongjun.me

移动适配和移动跳转整理篇

  上一篇文章《[移动化] [官方适配补充说明]PC端301、302、js跳转到移动端解惑》其实已经告诉大家,应该做UA判断来进行跳转,几乎所有的站长都是被百度siteapp所误导,用JS跳转但随之而来带来一些问题。本文做最后的盘点和整理。

移动适配和移动跳转整理篇

一.使用UA判断代替JS跳转解决实际访问跳转问题

nginx:

location / {
        if ($http_user_agent ~ "((android)|(blackberry)|(googlebot-mobile)|(iemobile)|(ipad)|(iphone)|(opera mobile)|    (palmos)|(webos)|(UCBrowser)|(QQBrowser)|(wap))")
           {
            return 301 $scheme://手机站域名$request_uri;
             }
        }


apache:

识别移动ua进行pc与手机站url适配的相关规则(linux+Apache)
http://bbs.zhanzhang.baidu.com/thread-15124-1-2.html


IIS:

识别移动ua进行pc与手机站url适配的相关规则(win+iis版) 
http://bbs.zhanzhang.baidu.com/thread-18823-1-1.html



二.META标记解决蜘蛛访问识别问题

以上的UA设置并没有写入任何的蜘蛛UA,因此,蜘蛛访问,特别是移动蜘蛛访问就需要很好的去引导它们。

  1. 谷歌开放适配规则

    对应URL举个栗子:

PC: http://www.chaihongjun.me/

M: http://m.chaihongjun.me/


在PC页面Meta写法

<link href=http://m.chaihongjun.me" rel="alternate" media="only screen and (max-width: 640px)" />

注意:这里640px是移动设备的最大宽度,这里谷歌只是一个举例,当屏幕宽度小于640px的时候显示移动站点。这里应该改成你的实际数据。

在移动页面Meta写法

<link href="http://www.chaihongjun.me" rel="canonical" />

这个是告诉谷歌蜘蛛我的移动首页对应的PC页面地址是什么。


以上两个例子均是以首页PC和M作为栗子说明,其他页面也是一样的原理,请酌情处理。


2.百度开放适配规则

百度提供了三种适配方法:1.自主适配。2.META标注。3.提交对应sitemap。实际META标注是最简单成本最低的方式。


在PC页面Meta写法

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

说明:format后面的xml,xhtml,html5是移动站使用的技术,这个根据实际情况选择,后面的URL则是对应的移动页面URL地址。那么将meta写入页面就类似如下:

<meta name="mobile-agent"content="format=xhtml; url=http://m.chaihongjun.me">

上面的例子是拿手机首页作为一个栗子,其他页面依样画葫芦即可。

在移动页面Meta写法

百度META标注无需在移动端做任何标识。


三.最后的总结

  1. UA判断识别,服务器端过滤了蜘蛛的识别仅仅判断用户,为的是避免影响蜘蛛抓取

  2. 所以才针对谷歌和百度做了针对性的蜘蛛识别跳转。

  3. 自适应网站的适配非常简单在head区域添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

并且为了百度识别还应该添加

<meta name="applicable-device"content="pc,mobile">

表示页面同时适合在移动设备和PC上进行浏览。

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»