移动端适配方案解析，轻松提升手机页面排名！

请注意，本文编写于 1486 天前，最后修改于 1214 天前，其中某些信息可能已经过时。

网站 PC 端在百度排名还不错，但移动端没什么排名。原因可能并不是因为你网页质量不好，较大可能是因为你的移动端页面规范做得不好。移动适配，是移动端网站 SEO 优化的必须工作。不仅能直接将 PC 端的排名传递到移动端，直接获得流量。还对用户浏览我们网站提升了一定的用户体验，下面分享一下移动适配的具体操作过程。

一、网页制作规范

1、PC 端

PC 端不用说了，大家都比较熟悉，只要适应电脑端屏幕宽度就 ok 了。

2、移动端

移动端最主要的问题也是需要网页能适应手机的屏幕宽度，且字号大小适合手机浏览。

二、声明网页类型

网页做好后，需要让百度知道你的哪些网页是 PC 的，哪些是适合移动的。

方法也很简单，按照百度给的声明方法，在每个网页上加特定的 html 标签，来告诉百度蜘蛛，这个网页是适合 PC 还是手机浏览。

1、PC 页在<head> 与 </head > 之间添加以下标签，声明自己适合 pc 浏览：

<meta name="applicable-device" content="pc" />

2、移动端在 <head> 与 </head > 之间添加以下标签，声明自己适合手机(mobile) 浏览：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
<meta name="applicable-device" content="mobile" />

3、自适应页，即可以同时在 PC 和移动端正常显示，在 <head> 与 </head > 之间添加以下标签，声明自己适合 pc 和移动端浏览：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
<meta name="applicable-device"content="pc,mobile" />

三、实战：3 种适配方法对应的手机端优化方法

自适应模板、代码适配、跳转适配是三种常见移动网页解决方案，对于中小型站，我个人比较倾向使用第 1 种自适应方案，因为维护简单，只需要 1 套模板。对于大型复杂网站来讲，更多的可能是使用第 2 和第 3 种，以下是 3 种适配方法对应的移动优化方法：

1、自适应模板：

特点：pc 和移动共用 1 套模板文件，且手机和 pc 的 url 是同一个，且两端的 html 代码完全相同，通过 css 或 js，自动判断当前设备的宽和高，页面自动调整排列，以适合当前设备显示。

移动搜索优化方法：在模板文件的 <head> 与 </head > 之间添加：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
<meta name="applicable-device"content="pc,mobile" />

然后，添加Vary HTTP标头 ->查看配置教程

2、代码适配型网站：

特点：有 2 套模板文件，pc 和移动各用 1 套，但两端 url 是同一个，当访客访问时，由程序判断访客是手机还是 pc，再展示不同的模板。

移动搜索优化方法：

PC 端模板在 <head> 与 </head > 之间添加：

<meta name="applicable-device" content="pc" />

移动端模板在 <head> 与 </head > 之间添加：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
<meta name="applicable-device" content="mobile" />

3、跳转适配型网站：

特点：有 2 套模板文件，pc 和移动各用 1 套，pc 端和手机端是不同的 url，当访客访问时，由程序或 js 判断当前设备，然后跳转到适合当前设备的 url。

格外注意：不建议使用 js 跳转，跳转方式一定是 301 或者 302 状态码的跳转形态。否则搜索引擎无法识别。而在 301 和 302 之间，我个人建议使用 301 跳转。另外，PC 页面和 WAP 端页面的对应关系一定要做好，即指定的PC页面内容要与指定的移动端页面主体内容要一致。

移动搜索优化方法：

PC 端模板页面的 <head> 与 </head > 之间添加标签，

<meta name="applicable-device" content="pc" />

同时添加以下标签，指明对应移动端 url（一般在模板里做相应设置的，自动生成）：

示例：

<meta name="mobile-agent" content="format=xhtml;url=https://www.moewah.com/?id=7" />

以下标签不是百度建议必须的，此为 css3 的文档的替代版本声明，加上可以增强适配效果：

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.moewah.com/?id=7">

请注意：https://www.moewah.com/?id=7 需要改成你自己网站对应的移动页 url 地址。

例如在织梦中，此标签为（更多信息参见参考内容《织梦移动优化指南》）：

织梦 PC 端首页模板：

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/" />

织梦 PC 端栏目页模板：

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}" />

织梦 PC 端文章页模板：

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}" />

移动端模板在 <head> 与 </head > 之间添加：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 
<meta name="applicable-device" content="mobile" />

此方法同时适合用二级域名做移动站和用目录做移动站的情况：

适用情况一：PC 站：www.moewah.com 和移动站：m.moewah.com
适用情况二：PC 站：www.moewah.com 和移动站：www.moewah.com/m/

但百度更建议使用情况一，即移动站使用单独的子域名来做。个人测试，子目录做移动页的情况下，只要正确做了适配标签，百度也能正常区分和展示各端页面。

如果使用情况 2，除了上述方法，百度站长工具还提供了一个专门的工具，见参考资料：《【移动适配】目录级移动适配如何使用工具提交适配关系》