移动适配之代码适配配置详细教程.pdf

《移动适配之代码适配配置详细教程.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、移动适配之代码适配配置详细教程　一、代码适配方法简介　　该方法使用相同的网址(不考虑用户所使用的设备)，但会根据服务器对用户所用浏览器的了解(ua)，针对不同设备类型生成不同版本的HTML。　二、为什么要做代码适配　　这主要是看重移动端的流量潜力，如果不做移动适配的话，可能我们本来有的移动网页和移动端排名因百度无法确认是移动页面，因此这部分流量都给指向了百度的转码页。可以看自己网站在站长工具里面，移动端有多少流量是指向了转码页。这部分流量在做完适配后，即可指向我们的移动页面，避免了自己的流量被百度截流。　三、代码适配配置方法　　主

2、要分为三部分：VaryHTTP标头、Metaapplicable-device标签和sitemapXML辅助推送。　　1、添加VaryHTTP表头配置　　VaryHTTP标头的作用在百度的文档里解释得很清楚：　　1)它会向百度传递一个信号，表示说这是个代码适配的站点，百度就会尽快把网站抓取一遍进行适配;第1页共3页2018/4/112:44　　2)它可以防止用户接收到错误的网页缓存。这部分是在网站的服务器上进行的，有可能是Nginx、Apache或者IIS等，需要在服务器的配置里，设置Varyheader为Vary:Accept-

3、Encoding,User-Agent。　　具体配置如下：　　Nginx：在配置文件中加上：more_set_headers-s200"Vary:""Accept-Encoding,User-Agent"(注意：打开这个设置需要nginx同时安装有ngx_headers_more模块)　　Apache：在配置文件里写上：HeaderappendVaryUser-Agent　　2、Metaapplicable-device标签　　Varyheader加上之后，为了让百度更好地识别我们的页面是PC还是Mobile，就需要使用百度自定义

4、的这个Metaapplicable-device标签了。注意以下来自百度的消息：Metaapplicable-device标签，并非是站点必须标注的，现在很多站点没有标记这个标签情况也很好。但这个标签可以帮助百度校验自己的判断，并及时进行修正。做这个事情又不麻烦，所以我们建议代码适配站点为了保证效果，还是加这个标签。　　这部分是在网站的模板里添加的。自适应的网站肯定已经有了判断用户设备是PC还是Mobile的逻辑。利用这个逻辑，在整站的部分添加一行代码即可：　　1)如果用户是PC设备(注意需要包括BaiduspiderPCUA)，

5、则添加　　2)如果用户是移动设备(包括BaiduspiderMobileUA)，则添加　　需要先在测试机上验收。可以用Google浏览器来模拟Baiduspider来检查是否添加正确,如图下图所示：　　在测试机上验收完成后就可以上线了。上线后，尽量再用站长平台的抓取诊断工具测试几个页面，以免到线上后出现与测试机不一致的情况。比如下面是抓取PC页面来检查的线上结果。　　3、sitemapXML文件辅助推送　　在做了Metaapplicable-device配置之后，最好要改造一下sitemapXML文件，站长后台实时推送，可以加快让

6、搜索引擎对你的pc站和移动站进行识别。　　示例如下图：第2页共3页2018/4/112:44　四、效果跟踪　　上线后就可以持续跟踪百度移动的SEO流量数据了。要追踪的主要是网站自己的统计工具统计的流量数据和百度站长平台的移动端转码页流量数据。上线后一到两周，移动端的流量应该就会有明显的增长，而百度转码页的流量则会下降。这个此消彼长的过程会持续一段时间。直到转码页的流量基本为0，都转为移动页的流量。　　总结：代码适配相比跳转适配复杂程度要更高，这取决于网站的复杂程度和您需要创建的代码库数量。代码适配所需的开发时间可能更长，且要求服务

7、器端编程;在性能上更高。可以简化为只包含为相应设备优化的内容，以实现最佳性能;维护需求上如果人工维护，将需要大量的资源。许多网站使用内容管理系统来避免这一问题，并自动在所有模板上发布内容。设备上要求单独的文件和服务器端代码可以提供依设备而定的体验;同时支持扩展至新平台(例如智能电视)。第3页共3页2018/4/112:44