百度移动sitemap协议mobile type升级,响应式网站怎么做移动开放适配?

昨晚登录百度站长平台的时候,我才看到百度移动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、移动网页代码是否一致
跳转适配
代码适配
自适应

下面简单的分享一下这三种方案我们需要做哪些配置。

百度移动sitemap协议mobile type升级,响应式网站怎么做移动开放适配?

一、跳转适配

这个方案在张戈博客分享过很多相关文章,其中有一篇颇具总结性的文章是:

移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇

看完百度官方文档之后,我发现前文分享的JS跳转方案并不被百度推荐,原因如下:

如果使用跳转适配的方式,请不要使用JS对ua进行适配跳转。这种方式存在两个缺点:

  • 对用户:会加大由重定向的客户端造成的延迟;这是因为客户端需要先下载网页,接着解析并执行 JavaScript,然后才能触发重定向。301或302则不会有这个延迟。
  • 对搜索:爬虫也需要使用支持JS渲染的爬虫,才能发现此重定向。

当然,我之前分享的 js 跳转主要是为了兼容纯静态页面,而且另外配合了META适配标注,所以百度适配的效果还算不错!

不过,这个移动跳转我们完全可以通过Nginx来实现,参考规则如下:

这样,当移动端访问我们的网站时,将会自动跳转到我们的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申明即可:

②、适配问题

自适应网站,可以做好如下设置:

I. MEAT标注

自适应设计有其一般原则:在head添加以下代码并且使用<picture>元素处理自适应图片:

自适应页面还应该在head中标识:

表示页面同时适合在移动设备和PC上进行浏览。

Ps:以上META标签可以参考张戈博客任意页面的head部分。

 

II. 提交Sitemap(可选)

响应式sitemap其实就是开放适配的一个变相形式,即申明移动站和PC站是同一个url(当然,这个步骤可做可不做)。

感兴趣的朋友可以翻阅一下张戈博客之前的分享:

百度Sitemap工具升级版内测,附移动sitemap.xml的php代码(支持响应式)》=>第④部分

该sitemap内容预览:http://zhangge.net/sitemap_baidu_sp.xml

提交地址:http://zhanzhang.baidu.com/mobiletools/index

好了,以上就张戈对此次百度sitemap协议升级的一些个人见解,急急忙忙写的文章,难免会有各种纰漏,纯属个人理解,仅供参考!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:28   其中:访客  17   博主  11

  1. 菊部受审 5 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省宜昌市 移动

    像我这样蛋疼的情况 本来是响应式 为了移动端更快些 用了一个更简洁的 依然是响应式 应该如何处理

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      根据文章3种适配,自行判断处理。

  2. 谷浮 1 来自天朝的朋友 火狐浏览器 Windows 7 河南省郑州市 联通

    张戈你好,我的网站使用也是wordpress,主题不是响应式的,不过我采用的主题分别有PC和MOBILE,我有两个问题:
    1、在选择适配类型时,是不是要选择代码适配,分别在移动或PC站页面的部分输出不同META申明,但是添加Vary HTTP标头,我不知道如何做?
    2、在制作sitemap时,移动sitemap协议mobile type,是不是要这么写:
    http://www.example.com

    ….
    http://www.example.com/xx.html

    麻烦帮助解释一下,谢谢!

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      不推荐代码适配,推荐使用跳转适配,也就是移动和PC使用不同域名,百度目前也是推荐这种做法。

      • 谷浮 0 来自天朝的朋友 QQ浏览器  Android 4.2.2 GT-I9128I Build/JDQ39 河南省郑州市 联通

        我还有个疑问如果主题是响应式,移动适配提交sitemap,pc对应移动url是一样的,在sitemap中pc和移动对应关系怎么弄,另外我看了你响应式sitemap中pc和mobile都含有的php代码,如果生成这样一个sitemap,是不是只需要提交这个sitemap,移动适配sitemap就不要管他了

        • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.2 NX40X Build/KOT49H 广东省深圳市 联通

          留言又不留网址,到底是响应式还是非响应式?问问题先自身定一下位,不要多个方面都问一遍,我时间真的不多。你问的问题,本文也解释过了,响应式不清楚就不要提交sitemap,那只是一个可选项目。

  3. 热词网 3 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省咸宁市 电信

    签到成功!签到时间:下午3:08:12,每日签到,生活更精彩哦~

  4. puffbaby 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省海口市 电信

    博主,关于跳转适配。你写的那段Nginx规则是不是有限制啊,当我用手机访问PC站的某个具体文章页面的时候,比如:www.example.com/example/example.html 根据这个规则就被跳转到手机站的首页 m.example.com ,而不是对应的 m.example.com/example/example.html 了吧?

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      那个跳转规则改成如下试试:

      • puffbaby 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

        nginx: [emerg] invalid number of arguments in “location” directive in XXXX
        晕死了

      • puffbaby 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

        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”) {
        这行报错了。。。。

        • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

          肯定改错了呗,我要你改的不会出这个错。

          • puffbaby 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

            复制粘贴到server 段里面,然后把网址改了一下。。。报错了

            • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

              全部还原,然后将以下代码放到 location / { 之后,其他不变:

  5. Youth Daily 5 来自天朝的朋友 谷歌浏览器 Windows 10 重庆市 联通

    我目前 sitemap 权限都没有,我真是服了百度了。。。

  6. 友邻博客 3 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

    我想问下博主,你那CODE用的什么插件啊

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      Crayon Syntax Highlighter

  7. 玉如意服饰 1 来自天朝的朋友 谷歌浏览器 Windows 7 山东省济宁市 电信

    张戈你好,首先感谢你的这篇文章为我解惑。

    我的网站和上面的那位仁兄一样,是使用wordpress的插件WordPress Mobile Themes,手机访问就会自动到mobile主题,是属于代码适配。

    在文章中你说到不推荐使用代码适配的原因是“因为页面一开启缓存,立马歇菜!”,我想问一下假如网站的流量很小,每天的ip也就10个,因为我的是地方企业站,是不是就不存在这个问题了?

    还是说需要建立一个新的移动站,来做跳转适配

  8. 玉如意服饰 1 来自天朝的朋友 谷歌浏览器 Windows 7 山东省济宁市 电信

    你好,张戈
    我决定试试代码适配,现在我在wordpress中的.htaccess中 写入了vary
    通过检测标头 显示:Vary: “User-Agent,Accept-Encoding”
    这样虽然代码顺序不一样,但是不是能证明第一步已经做成功了。

    期盼你的回答

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      网页如果是动态的就没事。

  9. 暴露智商 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

    问一个暴露智商的问题…你之前推荐的Any Mobile Theme Switcher是属于代码适配吗?

    • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.4 M463C Build/KTU84P 广东省深圳市 联通

      网址不变,源代码变就是代码适配。

  10. zblog之家 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信

    你上面这个nginx识别跳转规则有问题,会导致nginx无法重启
    #其他规则略…
    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 (.*) https://zhangge.net$1 permanent;
    }
    #其他规则略…

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_2 广东省深圳市 电信

      你不会直接把上面代码加入到你的规则当中吧?
      代码里面的location只是为了告诉你该添加到哪,不需要照抄。
      你只需要把如下代码添加到你的 location / { #这个位置 }

      • zblog之家 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信

        还真是,看来还真是没文化真可怕,冒昧问一下:你写翻墙教程不怕被墙吗,这个好像是违禁内容呢?

        • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_2 广东省 电信

          冒死分享,造福群众。。。

  11. 一曲长歌辞烟雨 3 来自天朝的朋友 火狐浏览器 Windows 10 天津市 电信IDC机房

    自适应->适配问题->自适应页面还应在head中标识 代码里meta后面少了一个空格

  12. 非主流图片 0 来自天朝的朋友 谷歌浏览器 Windows 10 四川省宜宾市 电信

    张戈,上面通过nginx来进行移动跳转,发现了一个问题,就是最近网站改版,换了域名,由于pc加了nginx 跳转到移动站点配置,导致百度改版无法通过,试过很多次,后来我怀疑是nginx移动跳转的原因,我就直接在百度改版哪里 把老的www域名跳转到新域名M移动站,居然成功了,由此可见,是这个nginx移动跳转配置有点问题! 有办法可以解决吗???难道是百度方面的问题吗?希望可以研究一下

加载中,请稍候...