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

wz***

　　本篇文章“迷路的小爬虫”主要围绕“代码适配”从相关官方使用文档中整理了一份利于站长开发使用的详细教程，希望能够对站长朋友们的移动化之路有所帮助。

　　

　　一、代码适配方法简介

　　该方法使用相同的网址(不考虑用户所使用的设备)，但会根据服务器对用户所用浏览器的了解(ua)，针对不同设备类型生成不同版本的HTML。

　　二、为什么要做代码适配

　　这主要是看重移动端的流量潜力，如果不做移动适配的话，可能我们本来有的移动网页和移动端排名因百度无法确认是移动页面，因此这部分流量都给指向了百度的转码页。可以看自己网站在站长工具里面，移动端有多少流量是指向了转码页。这部分流量在做完适配后，即可指向我们的移动页面，避免了自己的流量被百度截流。

　　三、代码适配配置方法

　　主要分为三部分：Vary HTTP标头、Meta applicable-device标签和sitemapXML辅助推送。

　　1、添加Vary HTTP表头配置

　　Vary HTTP 标头的作用在百度的文档里解释得很清楚：

　　1)它会向百度传递一个信号，表示说这是个代码适配的站点，百度就会尽快把网站抓取一遍进行适配;

　　2) 它可以防止用户接收到错误的网页缓存。这部分是在网站的服务器上进行的，有可能是Nginx、Apache或者IIS 等， 需要在服务器的配置里，设置 Varyheader 为 Vary:Accept-Encoding, User-Agent。

　　具体配置如下：

　　Nginx：在配置文件中加上：more_set_headers-s 200 "Vary: " "Accept-Encoding, User-Agent"(注意：打开这个设置需要nginx同时安装有ngx_headers_more模块)

　　Apache：在配置文件里写上：Headerappend Vary User-Agent

　　2、Meta applicable-device 标签

　　Vary header 加上之后，为了让百度更好地识别我们的页面是 PC 还是 Mobile，就需要使用百度自定义的这个 Meta applicable-device 标签了。注意以下来自百度的消息：Meta applicable-device 标签，并非是站点必须标注的，现在很多站点没有标记这个标签情况也很好。但这个标签可以帮助百度校验自己的判断，并及时进行修正。做这个事情又不麻烦，所以我们建议代码适配站点为了保证效果，还是加这个标签。

　　这部分是在网站的模板里添加的。自适应的网站肯定已经有了判断用户设备是 PC 还是 Mobile 的逻辑。利用这个逻辑，在整站的 部分添加一行代码即可：

　　1)如果用户是PC设备(注意需要包括Baiduspider PC UA)，则添加

　　2)如果用户是移动设备(包括 Baiduspider Mobile UA)，则添加

　　需要先在测试机上验收。可以用 Google 浏览器来模拟 Baiduspider 来检查是否添加正确, 如图下图所示：

　　

　　在测试机上验收完成后就可以上线了。上线后，尽量再用站长平台的抓取诊断工具测试几个页面，以免到线上后出现与测试机不一致的情况。比如下面是抓取 PC 页面来检查的线上结果。

　　3、sitemapXML文件辅助推送

　　在做了Meta applicable-device配置之后，最好要改造一下sitemapXML文件，站长后台实时推送，可以加快让搜索引擎对你的pc站和移动站进行识别。

　　示例如下图：

　　

　　四、效果跟踪

　　上线后就可以持续跟踪百度移动的SEO流量数据了。要追踪的主要是网站自己的统计工具统计的流量数据和百度站长平台的移动端转码页流量数据。上线后一到两周，移动端的流量应该就会有明显的增长，而百度转码页的流量则会下降。这个此消彼长的过程会持续一段时间。直到转码页的流量基本为0，都转为移动页的流量。

　　总结：代码适配相比跳转适配复杂程度要更高，这取决于网站的复杂程度和您需要创建的代码库数量。代码适配所需的开发时间可能更长，且要求服务器端编程;在性能上更高。可以简化为只包含为相应设备优化的内容，以实现最佳性能;维护需求上如果人工维护，将需要大量的资源。许多网站使用内容管理系统来避免这一问题，并自动在所有模板上发布内容。设备上要求单独的文件和服务器端代码可以提供依设备而定的体验;同时支持扩展至新平台(例如智能电视)。

　　迷路的小爬虫”个人微信公众账号：seopachong 欢迎关注!如遇到涉及本篇文章相关疑问，我会第一时间帮您解决。本篇文章由“迷路的小爬虫”整理原创，由A5首发，转载请注明笔者版权信息，谢谢合作!