深圳SEO自媒体
努力去发现SEO世界!

电脑端和移动端页面跳转适配最佳方法

对于之前就一直强调的移动端适配的方法就不再赘述了,比如:我的深圳SEO博客是采用HTML5响应式布局的,我添加的meta标签声明(代码声明词网站同时适合PC和移动端):

<meta name="applicable-device" content="pc,mobile">

比如另外一个不是HTML5的手机端的meta声明是(代码声明此网站适合移动端):

<meta name="applicable-device" content="mobile">

而下面这些主要是针对百度新发布的一个对于电脑端和移动端适配的新方法进行讲解:

1、在pc版网页上,添加指向对应移动版网址的特殊链接rel=”alternate”标记,这有助于百度发现网站的移动版网页所在的位置;

2、同时在移动版网页上,添加指向对应pc版网址的链接rel=”canonical”标记。

例如:

pc版网址:http://www.bage001.com/movie/19965.html
移动版网址:http://m.bage001.com/movie/19965.html

具体操作为:

1、在pc版网页(http://www.bage001.com/movie/19965.html) 上,添加:

<link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.bage001.com/movie/19965.html" >

移动适配

2、在移动版网页(http://m.bage001.com/movie/19965.html) 上,所需的注释应为:

<link rel="canonical"href="http://www.bage001.com/movie/19965.html" >

PC适配

强调:之前的Meta标记(mobile agent)会继续沿用,但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配,其它如xml语言的移动页跳转适配,需要继续使用之前的meta标记方式——<meta name=”mobile-agent”content=”format=[wml|xhtml|html5]; url=url”>—来自百度官方

不是HTML5的响应式布局的电脑端网站,建议使用禁止百度转码

欢迎转载本站文章:刘志仕博客 » 电脑端和移动端页面跳转适配最佳方法

分享到:更多 ()

评论 14

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #13

    很不错的一篇文章1

    轧花网厂10个月前 (12-31)回复
  2. #12

    不错的办法,我用了 m.aphaihe.com

    轧花网厂10个月前 (12-29)回复
  3. #11

    谢谢博主分享,很实用! http://www.viplinger.cn

    VIP灵儿网1年前 (2016-09-02)回复
  4. #10

    你好,我还是不太懂,我的wordpress主题是自适应的,代码应该加在哪个文件的什么位置呢?谢谢了。。。。

    崔小可2年前 (2015-08-19)回复
    • meta标签都是加在页面的<head></head>标签内。

      Leo Jones2年前 (2015-08-26)回复
  5. #9

    很好的方法啊

    大米网2年前 (2015-08-03)回复
  6. #8

    支持下

    手机回收2年前 (2015-07-30)回复
  7. #7

    文章收藏了,谢谢博主

    重庆网站建设2年前 (2015-07-02)回复
  8. #6

    雁过留声,人过留评

    q6191245072年前 (2015-06-25)回复
  9. #5

    很有用的文章,收藏了

    软膜天花2年前 (2015-06-24)回复
  10. #4

    过来学习学习

    访客系统2年前 (2015-06-23)回复
  11. #3

    原来是这样子 学习了!

    老蔡SEO博客2年前 (2015-06-18)回复
  12. #2

    我就是随便看看

    q6266262年前 (2015-06-17)回复
  13. #1

    不知怎么就进来了,先看看

    tongya146682年前 (2015-06-15)回复