正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主 Email: godthink@qq.com 微信：wengxinbao 百度站长平台 飞鹰正义微信

为什么要做移动适配

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

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

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

META标记 <meta name="mobile-agent" content="format=html5;url=http://m.baidu.com/" /> <meta name="mobile-agent" content="format=xhtml;url=http://m.baidu.com/" /> <meta name="mobile-agent" content="format=wml;url=http://m.baidu.com/" />

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

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

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

方式特点

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

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

自适应 通过同一网址提供相同 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">

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

移动适配的核心原则 IaaS

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

移动站点域名选择 IaaS

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

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

www站点

www站点

M站

移动适配之正则表达式 IaaS

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

常见的几种正则表达方式 ([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,})+) 中文字符 ([^&]+) 参数值

平台适配

正则表达式对应方式

纯数字适配 PC页面链接：www.baidu.com/123.html 移动页面链接：m.baidu.com/123.html Pattern：www.baidu.com/([0-9]+).htm -> m.baidu.com/${1}.html PC页面链接：www.baidu.com/123.html 移动页面链接：m.baidu.com/news/123.html Pattern:www.baidu.com/([0-9]+).html->m.baidu.com/news/${1}.html PC页面链接：www.baidu.com/2015/04/04.html 移动页面链接：m.baidu.com/2015/04/04.html Pattern:www.baidu.com/([0-9]+)/([0-9]+)/([0-9]+).html -> m.baidu.com/${1}/${2}/${3}.html

纯字母适配 PC页面链接：www.baidu.com/baby.html 移动页面链接：m.baidu.com/baby.html Pattern:www.baidu.com/([a-zA-Z]+).html->m.baidu.com/${1}.html PC页面链接：www.baidu.com/baby.html 移动页面链接：m.baidu.com/2015/baby.html Pattern:www.baidu.com/([a-zA-Z]+).html->m.baidu.com/2015/${1}.html PC页面链接：www.baidu.com/baby/ 移动页面链接：m.baidu.com/baby/ Pattern:www.baidu.com/([a-zA-Z]+)/ -> m.baidu.com/${1}/

数字字母混合适配 PC页面链接：www.baidu.com/news2015.html 移动页面链接：m.baidu.com/news2015.html 注意：news固定，2015为id不固定 Pattern：www.baidu.com/news([0-9]+).html->m.baidu.com/news${1}.html PC页面链接：www.baidu.com/news115.html 移动页面链接：m.baidu.com/2015/news115.html 注意：2015为年份固定，news固定，115为ID不固定 Pattern:www.baidu.com/news([0-9]+).html->m.baidu.com/2015/news${1}.html

数字字母混合适配 PC页面链接：www.baidu.com/aga12.html 移动页面链接：m.baidu.com/aga12.html Pattern:www.baidu.com/([a-zA-Z]+)([0-9]+).html->m.baidu.com/${1}${2}.html PC页面链接：www.baidu.com/ne2w1s20.html 移动页面链接：m.baidu.com/ne2w1s20.html 注意：字母和数字混合字符串，字母和数字必须交替出现至少1次 Pattern:www.baidu.com/((?:[a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z]+)[a-zA-Z0-9]+).html -> m.baidu.com/${1}.html

数字字母混合适配 PC页面链接：www.baidu.com/n1.html 移动页面链接：m.baidu.com/n1.html Pattern:www.baidu.com/([a-zA-Z]+)([0-9]+).html ->m.baidu.com/${1}${2}.html PC页面链接：www.baidu.com/09/1001/5KH8DE1F000120GR.html 移动页面链接：m.baidu.com/09/1001/5KH8DE1F000120GR.html 注意：5KH8DE1F000120GR为任意变化规则 Pattern:www.baidu.com/([0-9]+)/([0-9]+)/([a-zA-Z0-9]+).html

中文适配 PC页面链接：www.baidu.com/你好.html 移动页面链接：m.baidu.com/你好.html 注意：字母和数字混合字符串，字母和数字必须交替出现至少1次 pattern： http://www.baidu.com/((?:%[a-zA-Z-0-9]{2,})+).html -> http://m.baidu.com/${1}.html

带特殊符号适配 PC页面链接：www.baidu.com/news-2015.html 移动页面链接：m.baidu.com/news-2015.html pattern：www.baidu.com/news-([0-9]+).html->m.baidu.com/news-${1}.html PC页面链接：www.baidu.com/aga-215.html 移动页面链接：m.baidu.com/age-215.html 注意：age和215都为变量，且只为字母和数字 pattern：www.baidu.com/([a-zA-Z]+)-([0-9]+).html -> m.baidu.com/${1}-${2}.html

特殊下拉加载适配 PC页面链接第一页：www.baidu.com/news-1.html 移动页面下拉加载页面：m.baidu.com/news.html pattern： http://www.baidu.com/([a-zA-Z]+)-([0-9]+).html ->   http://m.baidu.com/${1}.html

动态URL适配 PC页面链接第一页：www.baidu.com/index.php?id=121&item=game pattern： http://www.baidu.com/index\.php\?id=([^&]+)&item=([^&]+)   -> http://m.baidu.com/index.php?id=${1}&item=${2} 注意：遇到url中出现.和?进行一次转义，前面加\

Q&A 10min IaaS