上一篇文章《[移动化] [官方适配补充说明]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,因此,蜘蛛访问,特别是移动蜘蛛访问就需要很好的去引导它们。
谷歌开放适配规则
对应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标注无需在移动端做任何标识。
三.最后的总结
UA判断识别,服务器端过滤了蜘蛛的识别仅仅判断用户,为的是避免影响蜘蛛抓取
所以才针对谷歌和百度做了针对性的蜘蛛识别跳转。
自适应网站的适配非常简单在head区域添加
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
并且为了百度识别还应该添加
<meta name="applicable-device"content="pc,mobile"> |
表示页面同时适合在移动设备和PC上进行浏览。
via.https://chaihongjun.me/seo/63.html