昨晚登录百度站长平台的时候，我才看到百度移动sitemap协议升级的消息，大致内容如下：
各位亲爱的管理员：
为了更好地顺应时代潮流，完善对移动站点的处理，使百度与站长之间的沟通更加顺畅，百度技术部门对PC移动化方式进行了概念上的规范，分别将目前主流的三种PC站移动化方式总结为：跳转适配、代码适配和自适应。
相应的，百度站长平台对移动sitemap协议里的mobile type标注进行更新升级，修改了对自适应页面的标注方式，增加了对代码适配页面的标注方式。现在移动sitemap协议mobile type标注如下：
新 旧 备注 跳转适配 mobile mobile 无变化 代码适配 htmladapt 新旧会并行一段时间 自适应 pc,mobile autoadapt 新旧会并行一段时间 现阶段新旧方式会并行一段时间，我们希望您尽快使用新的mobile type标注提交数据，以便更好地与百度进行数据合作。
百度总算是将这模棱两可的开放适配解释清楚了，也算是回答了众多站长疑问，比如自适应、响应式网站是否需要做开放适配？为什么移动搜索自己的响应式网站被百度转码了？
这个消息道明了网络上现有的3种移动开放适配方案：
- 跳转适配：该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua，然后使用 HTTP 重定向和 Vary HTTP标头重定向到相应的页面。
- 代码适配：该方法使用相同的网址（不考虑用户所使用的设备），但会根据服务器对用户所用浏览器的了解（ua），针对不同设备类型生成不同版本的HTML。
- 自适应：通过同一网址提供相同 HTML 代码的网站设计方法。该方法不考虑用户所使用的设备（pc、平板电脑、移动设备），但可以根据屏幕尺寸以不同方式呈现（即适应）显示屏。
根据网站是否相同，以上三种适配有如下区别：
| PC、移动网址是否一致 | PC、移动网页代码是否一致 | |
| 跳转适配 | 否 | 否 |
| 代码适配 | 是 | 否 |
| 自适应 | 是 | 是 |
下面简单的分享一下这三种方案我们需要做哪些配置。
一、跳转适配
这个方案在张戈博客分享过很多相关文章，其中有一篇颇具总结性的文章是：
《移动搜索SEO：网站移动适配之Meta标注、移动跳转终结篇》
看完百度官方文档之后，我发现前文分享的JS跳转方案并不被百度推荐，原因如下：
如果使用跳转适配的方式，请不要使用JS对ua进行适配跳转。这种方式存在两个缺点：
- 对用户：会加大由重定向的客户端造成的延迟；这是因为客户端需要先下载网页，接着解析并执行 JavaScript，然后才能触发重定向。301或302则不会有这个延迟。
- 对搜索：爬虫也需要使用支持JS渲染的爬虫，才能发现此重定向。
当然，我之前分享的 js 跳转主要是为了兼容纯静态页面，而且另外配合了META适配标注，所以百度适配的效果还算不错！
不过，这个移动跳转我们完全可以通过Nginx来实现，参考规则如下：
|
1
2
3
4
5
6
7
8
|
#其他规则略...
location / ｛
#如果是移动端访问， 将跳到移动站点：
if ($http_user_agent ~* "iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile") {
rewrite (.*) http://zhangge.net$1 permanent;
}
#其他规则略...
｝
|
这样，当移动端访问我们的网站时，将会自动跳转到我们的m移动站了！当然，我们必须做好一个移动站，并且在PC和移动站的head部分做好META标注：
在pc版网页上，添加指向对应移动版网址的特殊链接 rel="alternate" 标记。这有助于发现网站的移动版网页所在的位置。
在移动版网页上，添加指向对应pc版网址的链接 rel="canonical" 标记。例如，假设pc版网址为http://example.com/1.html，且对应的移动版网址为 http://m.example.com/1.html，那么此示例中的注释如下所示：
在pc版网页(http://www.example.com/1.html) 上，添加：
而在移动版网页(http://m.example.com/1.html) 上，所需的注释应为:
Ps：这个canonical标签的主要目的就是申明当前页面的唯一地址，避免重复内容带来的影响。
最后到百度提交开放适配 sitemap 文件即可。
二、代码适配
代码适配是指移动站和PC站共用一个域名，但是针对不同的终端访问，会展示不同的内容（主要表现在移动端页面的自适应特性）。
采用代码适配方案，根据官方文档，我们需要做2个设置：
①、添加Vary HTTP标头
②、做好META声明
第①个设置：我表示没看太懂，大致应该是分别在移动和PC站的header响应头部中加入不同Vary信息（此header不是网页的<head>部分，而是F12开发界面-network选项卡中看到的头部信息）。
第②个设置：比较简单。就是分别在移动或PC站页面的<head>部分输出不同META申明：
PC站：<meta name="applicable-device" content="pc">
移动站：<meta name="applicable-device" content="mobile">
Ps：这个适配我个人不是很推荐，因为页面一开启缓存，立马歇菜！
三、自适应
自适应我个人的理解是网站布局能够根据浏览器或设备的宽度来自适应调整，在各种宽度下都能完美展示网页的主要内容，比如张戈博客目前使用的就是自适应主题，感兴趣的拉动浏览器宽带就能看到效果了。
自适应网站在开放适配上的困扰，我认为有以下2点：
- 移动端搜索我的网站，发现被转码了
- 响应式/自适应网站到底如何做移动开放适配。
①、转码问题
这个问题算是老生常谈了，而且在被转码的页面底部，也会有百度给出的解决方案，感兴趣的自己去手机上看看。
要避免百度转码，只需在页面head中加入如下META申明即可：
|
1
2
|
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
②、适配问题
自适应网站，可以做好如下设置：
I. MEAT标注
自适应设计有其一般原则：在head添加以下代码并且使用<picture>元素处理自适应图片:
|
1
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
自适应页面还应该在head中标识：
|
1
|
<metaname="applicable-device"content="pc,mobile">
|
表示页面同时适合在移动设备和PC上进行浏览。
Ps：以上META标签可以参考张戈博客任意页面的head部分。
II. 提交Sitemap（可选）
响应式sitemap其实就是开放适配的一个变相形式，即申明移动站和PC站是同一个url（当然，这个步骤可做可不做）。
感谢欣赏，遥握：）
赏