目前较流量的PC站与移动站配置方式有三种,百度站在搜索引擎角度将这三种分别称为跳转适配、代码适配和自适应,以下为这三种配置方式的名词解释及异同对比。
1,跳转适配:该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua,然后使用HTTP重定向和VaryHTTP标头重定向到相应的页面。
2,代码适配:该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML。
3,自适应:通过同一网址提供相同HTML代码的网站设计方法。该方法不考虑用户所使用的设备(pc、平板电脑、移动设备),但可以根据屏幕尺寸以不同方式呈现(即适应)显示屏。
百度仅站在搜索引擎角度对跳转适配、代码适配、自适应这三种配置方式做了一些对比和分析,希望能够帮助站点选择更适合自己、性价比最优的方式来进行移动化。
一、域名&服务器&前端语言
1.域名最初的时候,我以为移动站(俗称手机站,简称M站或者wap站)的域名和PC站一样,随便挑一个就可以了。后来才发现,“理想是美好的,现实是残酷的”:百度搜索引擎原来有自己的偏好!如下所示:推荐:m.baidu.comsports.sina.cna.m.hao123.netwww.m168.info不推荐:www.baidu.com/m
可以看出来,百度搜索引擎喜欢独立的、短小的二级域名(简洁的三级域名也可)。但却不喜欢用子目录做的M站,理由也很简单,如果说PC站用www.baidu.com,M站用www.baidu.com/m/,那搜索引擎对/m/这个目录会感到疑惑:到底是PC站的一个子目录,还是PC站相对应的M站呢?真是剪不断,理还乱啊。
以上举例的域名,我们来做个PC站与M站对应的关系:PC站M站www.baidu.comm.baidu.comsports.sina.comsports.sina.cna.hao123.neta.m.hao123.netwww.m168.ccwww.m168.info
可能大家会发现,最后一个例子中,PC站和M站都是使用的www作为前缀,其实我是不怎么赞同的,使用m或者wap才较为合适。因为说不定什么时候老板想把www.m168.cc作为他用,而www.m168.info作为PC站了。
可以看到,百度搜索引擎(以下内容简称百度)认同用hao123做为主干,使用不同后缀的域名分别用作PC站和M站的域名,但不推荐使用没有关系的域名。
3.前端开发语言移动互联网发展至今,前端开发语言经过历次的更迭,目前主流仍在使用的用xml、xhtml、html5。历年来,移动web主要技术标准有:WML——古典的移动web标准,使用WMLi-mode——小日本的标准,使用iHTML,我们可以忽略OMA领导的xHTMLmobileprofile,使用xHTMLW3C领导的xHTMLBasic,使用xHTML以及所谓的FullWeb,也就是普通的HTML——从iPhone开始流行起来
针对恶意外链事件屡次发生,站长平台发布了“外链分析”的工具,让各位站长可以明确的知晓到底有哪些站放了我们网站的外链。各位可以在站长平台查看:五、移动类型提交
百度站在平台的设置里,把网站分为了五类:PC站;有对应PC站的移动站;独立移动站;自适应的站点;代码适配的站点。根据站点实际情况进行设置,有利于百度蜘蛛在抓取页面,以及搜索结果的排名(PC站和M站的搜索结果展现机制不一样)。设置方法如下:
下图中这个移动站上线半年,之前一直做了自主适配和meta标注,在8月10日的时候提交了移动适配,通过下面曲线图就可以看出6天之后适配效果就达到比较理想状态(红线和蓝线间距越小适配效果越好)。
一、内容一致是移动适配成功的关键
二、建议移动站和PC同主域或同主干,不建议使用目录
1、移动站和PC主域相同,或主干相同例若PC站是www.123.com,移动站强烈建议选用m.123.com,移动站URL尽量简洁短小,建议使用m.123.com而非yidongzhan.123.com。www.123.net因为主干相同也可以。
三、更多注意事项
1、允许Baiduspider访问,不要robots封禁虽然听起来有些无厘头,但这种情况是真实存在的,要注意你的移动站点对百度是不是开放的。
2、UA判断后尽量使用301或302进行跳转现在比较常见的是PC站点只适配一个移动站点,那么使用301就可以,如果需要同时适配高端域名和低端域名,推荐使用302
3、尽量为页面添加applicable-device标签applicable-device标签用于帮助百度校验识别页面类型的准确度,虽然不是硬性要求,但对站点来说没有任何弊端如果是PC页,在
中标注4、移动适配工具、META标签、自主适配——三种方式逻辑关系保持一致很多朋友都是这三种方式全用的,百度也支持这样,但这里有一个问题是:逻辑关系要保持不致,不能在自主适配时PC页对应的是移动页是A,而提交时却变成了B。这样最终百度自主选择的适配移动页面可能和你预期的不一样。
四、通过百度站长工具提交适配关系的注意事项
前面两个要点要确保都没问题了,那接下来就是向百度提交适配关系了。
五、最后强调
不管使用哪种方式,适配成功后都要持续保持PC页和移动页的适配关系,因为百度会继续检查适配关系是否正常是否生效,如果发现适配关系不正确,之前生效的数据也会转为失效,影响移动流量。1,PC结构发生变化,检查移动站点是否快速跟着变了2,PC页面主体内容发生变化,检查移动页面是否一致3,如果使用平台工具提交的适配关系,定期检查数据状态,如果之前显示“适配成功”的数据改成了“校验失败”要赶紧查看PC页与移动页的对应关系。
一、什么样的网站适合做自适应自适应网页设计(ResponsiveWebDesign)是指可以自动识别终端设备屏幕的大小从而做出相应调整的网页设计方法。这种网页设计方法完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有4个好处:提升用户体验;PC端和移动端SEO保持一致;避免重复内容和出错内容;链接统一。
6、设计响应式图片有很多同比缩放图片的技术,其中有不少是简单易行的,比较流行的方法是使用CSS的max-width属性:img{max-width:100%;}老版本的IE不支持max-width,所以只好写成:img{width:100%;}此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:img{-ms-interpolation-mode:bicubic;}或者,EthanMarcotte的imgSizer.js。addLoadEvent(function(){varimgs=ocument.getElementById("content").getElementsByTagName("img");imgSizer.collate(imgs);});如果有条件的话,最好能根据屏幕的不同大小,加载不同分辨率的图片。
三、自适应站点对百度友好的关键1,applicable-device标注应该怎么写有了自适应设计的网页,还要照顾到对百度友好的设计,即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很简单,只要在上面viewport标签下面再添加一个applicable-device标签就行:
百度的移动适配目前分为三种情况:跳转适配,代码适配和自适应。跳转适配目前百度的站长平台里有完整的适配工具,可以在平台里提交适配规则即可。但是代码适配则需要我们在网站里做一些配置,才能让百度准确识别我们的网页适配关系。下面就详细介绍下我们做代码适配的过程。
流量潜力
如果不做移动适配的话,可能我们本来有的移动网页和移动端排名因百度无法确认是移动页面,因此这部分流量都给指向了百度的转码页。可以看自己网站在站长工具里面,移动端有多少流量是指向了转码页。这部分流量在做完适配后,即可指向我们的移动页面,避免了自己的流量被百度截流。
开发
代码适配的开发,百度官方也有详细的说明,可分为两部分:VaryHTTP标头和Metaapplicable-device标签。【VaryHTTP标头】其作用在百度的文档里解释得很清楚:1、它会向百度传递一个信号,表示说这是个代码适配的站点,百度就会尽快把网站抓取一遍进行适配;2、它可以防止用户接收到错误的网页缓存。这部分是在网站的服务器上进行的,有可能是Nginx,Apache,IIS等,需要在服务器的配置里,设置Varyheader为Vary:Accept-Encoding,User-Agent
比如Nginx下,可以在配置文件中加上:more_set_headers-s200"Vary:""Accept-Encoding,User-Agent"注意:打开这个设置需要nginx同时安装有ngx_headers_more模块
在Apache下,可以在配置文件里写上:HeaderappendVaryUser-Agent【Metaapplicable-device标签】Varyheader加上之后,为了让百度更好地识别我们的页面是PC还是Mobile,就需要使用百度自定义的这个Metaapplicable-device标签了。注意以下来自百度的消息:Metaapplicable-device标签,并非是站点必须标注的,现在很多站点没有标记这个标签情况也很好。但这个标签可以帮助百度校验自己的判断,并及时进行修正。做这个事情又不麻烦,所以我们建议代码适配站点为了保证效果,还是加这个标签。
因此可能有些网站之前的移动流量已经很好了,不会出现被百度转码的情况.这说明百度已经能很好地识别你的移动页面了.但是依然建议加上这个标签,一来加这个标签很容易,二来可以确保百度能更准确地识别页面类型.如果没有加这个标签的话,万一突然技术做改版,一些代码的修改导致百度无法继续准确识别页面类型了呢
这部分是在网站的模板里添加的。自适应的网站肯定已经有了判断用户设备是PC还是Mobile的逻辑。利用这个逻辑,在整站的
部分添加一行代码即可:如果用户是PC设备(注意需要包括BaiduspiderPCUA),则添加注:关于BAIDUSPIDER,移动和PC其实都是Baiduspider,并没有区分,只是UA进行了区分。最新移动UA请见百度官方文档。
验收上线
开发完成后,需要先在测试机上验收。可以用Google浏览器来模拟Baiduspider来检查是否添加正确,如图所示,是检查BaiduspiderMobileUA的效果的
在测试机上验收完成后就可以上线了。上线后,尽量再用站长平台的抓取诊断工具测试几个页面,以免到线上后出现与测试机不一致的情况。比如下面是抓取PC页面来检查的线上结果。