全面解读PC站与手机站开发部署方案问题！（提供三种有效方法）

如果我们做好了移动手机网站，那么就要考虑：怎么做好PC和移动网站的适配关系？这个问题在前文：浅谈手机移动端的三种适配方案（自主适配、标注Meta声明、提交对应关系sitemap） 已经讲过，在此不再赘述。

新的在适配之前的问题：开发什么属性的移动手机网站？

看下图站点属性导图（最新版，以前百度的站点属性比较混乱，让人看了一头雾水，现在的看了基本一目了然，建议查看此站点属性图），怎么给PC和移动手机站进行细分分类的，即可明白自己做哪一种属性的手机网站。

PC站与移动站开发配置方法有三，以下给出为这三种开发配置方式的名词解释及异同对比的官方说明和明月SEO的实战经验解读，以飨读者。

百度站在搜索引擎角度将这三种分别称为跳转适配、代码适配和自适应

明月SEO解读：

不建议用目录来做移动站，建议使用二级域名

对于目录移动站 站长工具后台的站点类型，目前是没有对应的选项可以设置的

如何判断pc站和移动站使用什么方式适配可以看以下的做法

（1）url不变 源代码不变 自适应

（2）url不变  源代码完全不一样 代码适配

（3）url改变 源代码完全不一样 跳转适配

详情如下：

一.三种主流的站点开发配置方式

1，代码适配：

官方说明：名称：“代码适配”，该方法使用相同的网址（不考虑用户所使用的设备），但会根据服务器对用户所用浏览器的了解（ua），针对不同设备类型生成不同版本的 HTML。

明月SEO解读：明月SEO将其称为“代码加载CSS适配”。简单的说就是，我们的手机站和PC站，站点链接和站点标题完全一样！无非就是加载的CSS样式不一样。我们开发出手机端CSS样式即可。在PC端显示PC端样式，识别出手机端后，加载手机端样式即可。完美简约的实现了手机端适配问题。

经明月SEO调研，发现国外网站基本都是这样，PC网站和手机网站都是用“www.seomoon.cn”带“WWW”的网站，手机网站也不用“m.xxx.com”。也就是说，PC和手机网站链接和标题基本完全一样。就样式不一样。其实这也是PC和手机网站的最大区别——样式！本站“西安SEO”就是这样。【优选方法——国外主流方法】

既然只做一套手机端样式就解决了为什么还要弄那么多链接适应，链接适配等一堆东西呢？

2，跳转适配：

官方说明：该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua，然后使用 HTTP 重定向和 Vary HTTP 标头重定向到相应的页面。

明月SEO解读：其实可以称为“跳转手机代码适配”，因为这个定向跳转的前提是你开发了一套手机网站（前端），在PC站点的根目录下（一般为mobile目录）

这个方法是在中国的主流方法。中国人的大部分网站都是这样，www.xxx.com/mobile/——》指向了m.xxx.com。移动站域名多采用m.a.com/3g.a.com/wap.a.com等。做出的手机网站链接URL大部分都带有“m”【中国主流方法】

开发好了手机网站前端（PC和移动后台一般同一个，数据同步）。怎么去给搜索引擎做出说明，做出适配?

有三种方法：浅谈手机移动端的三种适配方案（自主适配、标注Meta声明、提交对应关系sitemap）

需要注意的是：此处的适配才是适配说明。上文百度官方给的所谓的“适配”，其实为了更好的区分开，可以理解为“开发部署方式”，就是做手机站，是做一台前端（样式）还是做一个独立手机站点，还是不做手机网站，只做适应？等三种开发部署手机网站的“开发部署方式”。不算是适配。不然和后边的适配方案，词语意思上重复。

（其实两篇文章都有官方说明，名词有如此重复现象，呵呵呵）

3，自适应

官方说明：通过同一网址提供相同 HTML 代码的网站设计方法。该方法不考虑用户所使用的设备（pc、平板电脑、移动设备），但可以根据屏幕尺寸以不同方式呈现（即适应）显示屏。

明月SEO解读：这个大家基本都知道，是一种最简单的方法。就是没有做手机网站，只是PC网站上加了一些自适应代码。在手机端浏览的情况下，网站会自动缩小，以尽量适应手机端。但是，毕竟没有做手机网站，也没有做手机端样式，其效果自然没有前两种效果好（字体太小，样式是完全PC端的样式）。此方法只是作为最后的备选方案。【最后的备用方法】

二.三种配置方式的优化建议

1，代码适配
为了使百度能够知道当您的页面发生变化时，同时需要用其他的ua重新抓取一遍，请您添加Vary HTTP标头。Vary HTTP 标头具有以下两个非常重要且实用的作用：
a) 它会向 ISP 和其他位置使用的缓存服务器表明：在决定是否通过缓存来提供网页时它们应考虑用户代理。如果您没有使用 Vary HTTP 标头，缓存可能会错误地向移动设备用户提供pc版 HTML 网页的缓存（反之亦然）。
b) 它有助于 百度spdier 更快速地发现针对移动设备进行优化的内容，这是因为我们在抓取针对移动内容进行过优化的网址时，会将有效的 Vary HTTP 标头作为抓取信号之一，我们会提高用其他ua抓取此网页的优先级。

示例：
并且在pc的响应的head中添加
<meta name="applicable-device" content="pc">
在移动的响应的head中添加
<meta name="applicable-device" content="mobile">

2，跳转适配
在此配置中，每个pc版网址都具有一个对应的不同网址，用于提供针对移动设备进行优化的内容。为了帮助我们的算法了解单独的移动版网址，我们建议您使用以下注释：
在pc版网页上，添加指向对应移动版网址的特殊链接 rel="alternate" 标记。这有助于发现网站的移动版网页所在的位置。
在移动版网页上，添加指向对应pc版网址的链接 rel="canonical" 标记。

例如，假设pc版网址为http://www.example.com/page-1，且对应的移动版网址为 http://m.example.com/page-1，那么此示例中的注释如下所示：

在pc版网页(http://www.example.com/page-1) 上，添加：
<link rel="alternate" media="only screen and (max-width: 640px)"     href="http://m.example.com/page-1" >

而在移动版网页(http://m.example.com/page-1) 上，所需的注释应为:
<link rel="canonical"href="http://www.example.com/page-1" >

也可以使用原有的开放适配提交方法。
http://zhanzhang.baidu.com/college/courseinfo?id=267&page=20

3，自适应
自适应设计有其一般原则：在head添加以下代码并且使用<picture>元素处理自适应图片:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

自适应页面还应该在head中标识：
<meta name="applicable-device"content="pc,mobile">
表示页面同时适合在移动设备和PC上进行浏览。

4.关于移动配置，百度不建议的做法
1，单一域名下请使用同一种配置方式(跳转适配、代码适配、自适应)，例如，不要把移动站的页面作为pc站网址中的一个子目录来配置。

2，如果使用跳转适配的方式，请不要使用JS对ua进行适配跳转。这种方式存在两个缺点：
a) 对用户：会加大由重定向的客户端造成的延迟；这是因为客户端需要先下载网页，接着解析并执行 JavaScript，然后才能触发重定向。301或302则不会有这个延迟。
b) 对搜索：爬虫也需要使用支持JS渲染的爬虫，才能发现此重定向。

三.三种配置方式的综合分析

百度仅站在搜索引擎角度对跳转适配、代码适配、自适应这三种配置方式做了一些对比和分析，希望能够帮助站点选择更适合自己、性价比最优的方式来进行移动化。
跳转适配 代码适配 自适应