正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主

Presentation on theme: "正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主"— Presentation transcript:

1 正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
微信：wengxinbao 百度站长平台 飞鹰正义微信

2 为什么要做移动适配

3 移动适配的4大主要目的 1.提高用户体验 2.紧随互联网潮流 3.通过适配让搜索引擎发现优质的站点 4.通过适配让搜索引擎倾斜更多移动流量

4 移动适配的三种方式 跳转适配 代码适配 自适应

5 跳转适配 站长平台提交规则 META标记 自主适配 新版适配方式
该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua，然后使用 HTTP 重定向和 Vary HTTP标头重定向到相应的页面。 站长平台提交规则 META标记 自主适配 新版适配方式

6 META标记 <meta name="mobile-agent" content="format=html5;url= /> <meta name="mobile-agent" content="format=xhtml;url= /> <meta name="mobile-agent" content="format=wml;url= />

7 又称之为：终端适配服务 文档地址： 自主适配 1.用户开始访问第三方网站页面；         2.第三方网站通过API向百度终端适配服务器发起请求；         3.百度终端适配服务器返回用户的终端信息及版式建议；         4.第三方服务器根据百度返回的数据，确定适配到的版式；         5.按照版式判断访问不同页面服务器；          6.服务器将页面结果返回给用户。

8 新版适配 PC版网页做以下标注，指向适配H5移动页：
<link rel="alternate" media="only screen and(max-width: 640px)" href=" > H5移动版网页做以下标注，指向适配PC页： <link rel="canonical"href=" > 新版适配

9 平台提交pattern（规则适配） 平台提交URL对（URL适配） 平台提交

10 方式特点

11 1.直接使用JS跳转 2.多种适配但规则不一 3.规则实施错误
操作误区 1.直接使用JS跳转 2.多种适配但规则不一 3.规则实施错误

12 代码适配 该方法使用相同的网址（不考虑用户所使用的设备），但会根据服务器对用户所用浏览器的了解（ua），针对不同设备类型生成不同版本的HTML。 添加Vary HTTP标头 在pc的响应的head中添加 <meta name="applicable-device" content="pc"> 在移动的响应的包头中添加 <meta name="applicable-device" content="mobile">

13 自适应 通过同一网址提供相同 HTML 代码的网站设计方法。该方法不考虑用户所使用的设备（pc、平板电脑、移动设备），但可以根据屏幕尺寸以不同方式呈现（即适应）显示屏。 <picture> <source srcset="large.jpg" media="(min-width: 800px)"> <source srcset="medium.jpg" media="(min-width: 600px)"> <img srcset="small.jpg"> </picture> 在head添加以下代码并且使用<picture>元素处理自适应图片:<meta name="viewport" content="width=device-width, initial-scale=1.0"> 自适应页面还应该在head中标识： 　　<meta name="applicable-device"content="pc,mobile">

14 寻找潜力适配频道 实战演练

15 移动适配的核心原则 IaaS

16 核心原则 PC排名决定移动排名（前期） PC和移动页面适配成功的要诀之一是主 体内容需要相同。 尽量采用html5建站
可访问（不死链、不强迫） 速度快（3s）、交互爽 内容有价值（参考《白皮书》）

17 移动站点域名选择 IaaS

18 移动可用域名方式 www.baidu.com->m.baidu.com(m、wap、 mobile)
bj.baidu.com->m.baidu.com/bj/

19 最有价值的适配 目前已有移动搜索量且是PC页面 移动适配状态红蓝2线分歧巨大 显示的移动搜索query是你的目标关键 词

20 www站点

21 www站点

22

23 M站

24

25 移动适配之正则表达式 IaaS

26

27

28 常见的几种正则适配 纯数字的情况 纯字母的的情况 数字字母混合的情况 带特殊符号的情况 特殊下拉加载适配情况

29 常见的几种正则表达方式 ([0-9]+) 0-9之间的任意数字组合 （\d+）0-9之间的任意数字组合
（\w+）匹配包括下划线的任何单词字符(大小写字母、数字和下划线) ([a-zA-Z]+) 大小写字母 ((?:[a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z]+)[a-zA-Z0-9]+) 字母混合且字母或数字至少出 现1次 ([a-zA-Z0-9]+) 大小写字母和数字 ((?:%[a-zA-Z-0-9]{2,})+) 中文字符 ([^&]+) 参数值

30 平台适配

31 正则表达式对应方式

32 纯数字适配 PC页面链接：www.baidu.com/123.html 移动页面链接：m.baidu.com/123.html
Pattern： -> m.baidu.com/${1}.html PC页面链接： 移动页面链接：m.baidu.com/news/123.html Pattern: PC页面链接： 移动页面链接：m.baidu.com/2015/04/04.html Pattern: -> m.baidu.com/${1}/${2}/${3}.html

33 纯字母适配 PC页面链接：www.baidu.com/baby.html 移动页面链接：m.baidu.com/baby.html
Pattern: PC页面链接： 移动页面链接：m.baidu.com/2015/baby.html Pattern: PC页面链接： 移动页面链接：m.baidu.com/baby/ Pattern: -> m.baidu.com/${1}/

34 数字字母混合适配 PC页面链接：www.baidu.com/news2015.html
移动页面链接：m.baidu.com/news2015.html 注意：news固定，2015为id不固定 Pattern： PC页面链接： 移动页面链接：m.baidu.com/2015/news115.html 注意：2015为年份固定，news固定，115为ID不固定 Pattern:

35 数字字母混合适配 PC页面链接：www.baidu.com/aga12.html 移动页面链接：m.baidu.com/aga12.html
Pattern: PC页面链接： 移动页面链接：m.baidu.com/ne2w1s20.html 注意：字母和数字混合字符串，字母和数字必须交替出现至少1次 Pattern: -> m.baidu.com/${1}.html

36 数字字母混合适配 PC页面链接：www.baidu.com/n1.html 移动页面链接：m.baidu.com/n1.html
Pattern: ->m.baidu.com/${1}${2}.html PC页面链接： 移动页面链接：m.baidu.com/09/1001/5KH8DE1F000120GR.html 注意：5KH8DE1F000120GR为任意变化规则 Pattern:

37 中文适配 PC页面链接：www.baidu.com/你好.html 移动页面链接：m.baidu.com/你好.html
注意：字母和数字混合字符串，字母和数字必须交替出现至少1次 pattern： ->

38 带特殊符号适配 PC页面链接：www.baidu.com/news-2015.html
移动页面链接：m.baidu.com/news-2015.html pattern： PC页面链接： 移动页面链接：m.baidu.com/age-215.html 注意：age和215都为变量，且只为字母和数字 pattern： -> m.baidu.com/${1}-${2}.html

39 特殊下拉加载适配 PC页面链接第一页：www.baidu.com/news-1.html
移动页面下拉加载页面：m.baidu.com/news.html pattern： ->  

40 动态URL适配 PC页面链接第一页：www.baidu.com/index.php?id=121&item=game
pattern：   -> 注意：遇到url中出现.和?进行一次转义，前面加\

41 Q&A 10min IaaS