PC+手机模板的代码设置

	未认证普通用户	职业认证	企业认证	U渠道VIP会员
人脉对接	3次/天	3次/天	3次/天	15次/天
服务对接	5次/天	5次/天	5次/天	15次/天
需求对接	无权	无权	无权	15次/天
加入社群	最多申请1个	最多申请2个	最多申请4个	最多申请7个
线下活动	普通门票	普通门票	普通门票	VIP折扣票，免费上台对接资源
专属标识	未认证标识	橙色认证标识	蓝色认证标识	VIP会员尊贵标识
排名规则	无优先展示	无优先展示	最高优先级	名片信息优先展示
招聘服务	无	无	艾聘网免费发布招聘特权	艾聘网免费发布招聘特权
收费情况	免费	免费	5998元/年	2999元/年

一些运营时间比较久的网站，尤其是早期使用织梦、帝国CMS、定制PHP程序或者老版本企业建站系统的网站，经常不是现在常见的响应式结构，而是：

PC模板
+
手机模板

甚至直接对应两套URL：

PC：
https://www.example.com/article/123.html

手机：
https://m.example.com/article/123.html

这类网站做SEO时，最容易碰到的问题不是“手机模板长得好不好看”，而是：

搜索引擎怎么知道PC页和手机页属于同一份内容？ PC有排名以后，手机搜索应该展示哪个URL？ PC模板和手机模板需要分别写Canonical吗？ rel=”alternate”应该放在哪里？是用UA判断模板，还是直接跳转m站？

如果这些代码关系没有处理好，很容易出现：

PC和手机两个URL同时被收录。

移动搜索仍然展示PC页面。

Canonical混乱。

多个PC页面全部跳到手机首页。

移动版内容比PC版少很多。

甚至Google在Mobile-first Indexing环境下只获得缩水后的手机版内容。

所以做PC+手机双模板，真正需要先分清网站到底是哪一种技术架构。

Google当前把移动网站主要分成三种实现方式：

响应式设计。

动态提供内容。

独立移动URL。

Google仍然支持三种方式，但明确建议新网站优先使用响应式设计，因为实现和维护都更加简单。

下面分别来看代码应该怎么设置。

第一：最推荐的方式——同一个URL使用响应式模板

如果现在重新开发网站，我更建议直接使用：

同一个URL
+
同一套HTML核心内容
+
CSS响应式

比如：

PC：
https://www.example.com/seo/

手机：
https://www.example.com/seo/

地址完全一样。

通过CSS控制不同设备显示方式。

基本HTML里至少要有：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后通过媒体查询：

.container {
    width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }

    .two-column {
        display: block;
    }
}

这种模式不存在：

PC页面怎么告诉搜索引擎手机版在哪里？

因为本来就是同一个URL。

Google当前推荐响应式设计，也是因为它不会制造两套URL，内容和元数据天然更容易保持一致。

如果你的网站已经能改造成响应式，通常没有必要继续维护单独m站。

第二：如果必须保留“PC模板+手机模板”，先看URL是不是一样

还有一种网站结构是：

URL完全相同。

比如：

https://www.example.com/article/123.html

PC用户打开时：

服务器输出PC模板。

手机用户打开时：

服务器输出手机模板。

这叫：

Dynamic Serving，动态提供内容。

Google目前对它的定义就是：

同一个URL，根据用户设备和User-Agent返回不同HTML。

这种模式不需要：

rel="alternate"

去告诉Google另外一个移动URL。

因为根本没有另外的URL。

但需要处理一个非常重要的HTTP头：

Vary: User-Agent

例如服务器返回：

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent

它告诉搜索系统和缓存服务器：

这个URL返回的HTML可能根据User-Agent变化。

Google官方目前仍然明确要求，Dynamic Serving依赖UA识别以及Vary: User-Agent响应头。

第三：PHP双模板可以怎么判断PC和手机？

比如老PHP网站使用：

pc-template.php
mobile-template.php

可以在服务端识别设备以后加载不同模板。

逻辑类似：

$isMobile = false;

$userAgent = $_SERVER['HTTP_USER_AGENT'] ?? '';

if (preg_match('/Android|iPhone|iPad|Mobile/i', $userAgent)) {
    $isMobile = true;
}

header('Vary: User-Agent');

if ($isMobile) {
    include 'mobile-template.php';
} else {
    include 'pc-template.php';
}

这里只是为了说明架构逻辑，并不建议直接把这几行代码作为生产环境完整UA识别方案。

因为真实设备User-Agent非常复杂。

如果CMS已经提供成熟的移动模板识别功能，优先使用系统已有能力。

真正SEO上需要注意的是：

URL相同
+
PC/手机HTML主体信息等价
+
正确返回Vary: User-Agent

而不是自己不断维护一张越来越长的手机UA名单。

第四：动态模板千万不要让手机版内容比PC少一大截

比如同一个URL。

PC模板输出：

Title
H1
产品介绍
产品参数
案例
FAQ
相关文章
内部链接

手机模板只输出：

H1
一句介绍
咨询按钮

这种设计风险很大。

Google现在采用Mobile-first Indexing，主要使用智能手机Googlebot看到的移动版内容进行索引和排名。

Google明确要求：

移动版网站应该拥有与桌面版等价的主要内容，如果手机版信息更少，网站可能损失搜索流量。

所以双模板可以：

布局不同。

导航不同。

PC三列、手机一列。

内容折叠。

但核心正文不要缩水。

第五：如果PC和手机使用不同URL，就必须建立对应关系

最典型的是：

PC：
https://www.example.com/article/123.html

手机：
https://m.example.com/article/123.html

这叫：

Separate URLs，独立移动URL。

这种架构必须明确告诉搜索引擎：

这两个URL实际上是同一份内容的桌面版和手机版。

Google当前仍然要求这种站点使用正确的：

rel="canonical"
+
rel="alternate"

关系。

第六：PC页面应该怎么写rel=”alternate”？

假设PC页面是：

https://www.example.com/article/123.html

对应手机页面：

https://m.example.com/article/123.html

PC模板的<head>里可以写：

<link rel="canonical"
      href="https://www.example.com/article/123.html">

<link rel="alternate"
      media="only screen and (max-width: 640px)"
      href="https://m.example.com/article/123.html">

意思是：

第一行：

当前PC页面自己是规范URL。

第二行：

这个PC页面还有一个适合手机显示的备用版本。

Google目前给出的Separate URL官方示例仍然采用这样的结构。

第七：手机页面Canonical应该怎么写？

对应手机模板：

https://m.example.com/article/123.html

在<head>里写：

<link rel="canonical"
      href="https://www.example.com/article/123.html">

也就是：

移动URL的Canonical指向对应PC规范URL。

Google官方当前仍然明确说明，对于单独移动URL：

桌面版URL作为Canonical。

移动版作为Alternate。

百度早期针对PC+H5独立URL同样公开推荐过这一套关系：

PC页面使用rel="alternate"指向移动页。

移动页面使用rel="canonical"指向PC页。

第八：不要把所有PC页面的alternate都指向手机首页

这个错误非常严重。

比如PC站：

/product/a/
/product/b/
/product/c/

结果三个页面全部写：

<link rel="alternate"
      href="https://m.example.com/">

或者手机访问任何PC详情页都直接跳：

https://m.example.com/

这样搜索引擎无法判断真实对应关系。

Google当前明确提醒：

不能让多个不同桌面URL全部重定向到同一个手机页面，例如移动首页。

如果不同桌面内容全部对应同一个移动URL，在Mobile-first Indexing下可能导致这些页面无法正常索引。

所以正确关系必须是：

PC A
↔
Mobile A

PC B
↔
Mobile B

PC C
↔
Mobile C

一对一对应。

第九：百度PC+手机站，还可以提交移动适配关系

如果网站确实是：

www.example.com
+
m.example.com

百度搜索资源平台目前仍然提供：

移动适配工具。

官方当前说明明确写着：

如果同时拥有PC站和手机站，而且两边主体内容完全相同，可以向百度提交PC页面和移动页面之间的对应关系。

例如：

PC：
https://www.example.com/article/123.html

移动：
https://m.example.com/article/123.html

建立对应关系以后，有助于百度在移动搜索中识别正确的手机页面。

但百度同时明确提醒：

移动适配工具不能解决移动端排序问题。

所以不要理解成：

提交以后PC第3名，手机也自动变第3名。

它主要解决的是URL对应和移动展示问题。

第十：响应式网站不要去提交百度移动适配

如果你的网站是：

PC：
https://www.example.com/article/

手机：
https://www.example.com/article/

同一个URL，只是CSS布局不同。

那么百度当前明确写着：

自适应站点不需要使用移动适配工具。

所以先搞清楚网站属于哪一种结构。

不要因为：

手机也能打开。

就认为一定属于独立移动站。

第十一：手机模板的Title和Description不要做成另一套主题

比如PC页面：

<title>企业官网SEO服务｜SEO优化服务 - XX公司</title>

手机页面却变成：

<title>XX公司手机版</title>

这明显不合理。

Google当前Mobile-first Indexing指南明确要求：

桌面版和移动版应使用等效的：

Title。

Meta Description。

所以双模板可以写不同HTML结构。

但页面主题信息应该一致。

例如PC和手机都应该表达：

这是企业官网SEO服务页面。

不要手机模板为了省事，全部自动使用：

首页
产品详情
文章详情

这种低信息量Title。

第十二：Robots和Noindex也必须两端一致

例如PC页面允许索引：

<meta name="robots" content="index,follow">

手机模板却意外带着：

<meta name="robots" content="noindex,nofollow">

Google主要依赖移动页面建立索引，这种错误可能直接让页面无法正常进入搜索。

所以双模板上线前必须检查：

PC Robots
=
Mobile Robots

另外：

www.example.com/robots.txt

和：

m.example.com/robots.txt

如果属于不同Host，也需要分别确认。

不要PC站允许抓取，m站直接：

Disallow: /

第十三：结构化数据也要在手机模板里保留

例如PC页面有：

Article。

Product。

BreadcrumbList。

VideoObject。

结果手机模板为了简化全部删除。

同样可能造成信息不完整。

Google当前明确要求：

如果网站使用独立移动版本或动态模板，移动版和桌面版应该拥有相同的结构化数据。

例如文章PC模板：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article"
}
</script>

手机模板也应该正常输出相应数据。

当然真实项目中不能只保留@type。

这里仅表示：

两端Schema应该保持一致。

第十四：图片和视频也不能在手机模板直接删掉

Google当前还专门提醒：

手机版应包含桌面版的重要图片和视频。

同时保持：

Alt。

图片说明。

视频结构化数据。

等重要信息一致。

所以移动端优化应该：

图片压缩。

响应式尺寸。

换小图。

调整布局。

而不是：

手机太慢，把所有产品图片删掉。

如果那些图片本来就是用户理解产品的重要信息，删掉就改变了页面内容。

第十五：独立m站需要做自动跳转吗？

通常可以根据用户设备进行正确跳转。

例如：

手机访问：

https://www.example.com/article/123.html

网站识别设备后跳转：

https://m.example.com/article/123.html

重点仍然是：

一对一。

不要全部跳手机首页。

反过来，桌面用户如果访问m页面，也可以根据实际策略引导到对应PC页面。

不过现在新网站一般没必要再专门建设这样一套复杂系统。

因为Google已经明确建议新网站优先响应式设计，并指出Separate Mobile URLs多年来给搜索引擎和用户都带来了额外复杂性。

第十六：如果使用动态模板，记得Vary: User-Agent

再强调一次。

如果：

URL相同
+
服务器根据UA输出不同HTML

属于Dynamic Serving。

一定要检查响应头：

Vary: User-Agent

否则CDN或者中间缓存就可能出现：

第一次手机访问缓存了手机版HTML。

后面的PC用户也拿到手机版。

或者反过来。

Google官方当前同样把Vary: User-Agent列为动态提供内容的标准组成部分。

可以使用浏览器开发者工具或者：

curl -I https://www.example.com/page/

检查响应头里有没有：

Vary: User-Agent

第十七：PC+手机模板最常见的错误，可以直接检查这10项

1. 手机内容明显比PC少

尤其正文、产品参数、FAQ被删除。

2. PC和手机Title不同

手机全部叫：

手机版。

3. 手机页面带Noindex

导致移动优先索引异常。

4. Canonical写反

应该：

m页面
→ canonical → PC对应页

却写成PC Canonical指向m页。

5. PC没有rel=”alternate”

搜索系统更难发现独立移动页面关系。

6. 多个PC页面全部跳手机首页

这是非常典型的错误。

7. m站Robots被封

普通浏览器能访问，爬虫不能访问。

8. 手机模板没有内链

PC导航完整，手机只剩首页和联系方式。

9. 动态模板没有Vary头

CDN和爬虫可能拿到错误版本。

10. 响应式网站却又同时维护m站

最终形成：

响应式URL。

PC URL。

m URL。

三套地址互相竞争。

第十八：如果准备从m站迁移到响应式，应该怎么做？

假设原来：

PC：
https://www.example.com/article/a/

移动：
https://m.example.com/article/a/

现在准备统一成：

https://www.example.com/article/a/

Google官方给出的迁移方案很清楚：

第一步：准备好响应式PC URL。

第二步：把每一个旧移动URL一对一301到对应响应式URL。

例如：

m.example.com/a/
↓301
www.example.com/a/

第三步：删除原来m站专用的跳转和Vary规则。

第四步：响应式页面可以继续使用自引用Canonical。

不要：

m站所有页面
↓
301
↓
PC首页

必须仍然是一对一迁移。

第十九：今天还应该继续做PC+手机双模板吗？

如果是老网站已经稳定运行：

没必要为了追求技术时髦，马上全部推翻。

只要：

对应关系正确。

两边内容完整。

Canonical正确。

移动体验正常。

搜索数据稳定。

完全可以继续维护。

但如果是：

新网站。

准备大规模改版。

准备重新开发主题。

我更建议直接做：

响应式。

因为它能够明显减少：

两套URL。

两份Canonical。

设备跳转。

移动适配。

重复内容。

模板同步。

数据统计。

方面的长期维护成本。

Google当前依然明确推荐响应式Web Design作为最容易实现和维护的移动网站模式。

PC+手机模板到底应该怎么设置代码？

最后按照三种情况总结。

情况一：响应式

PC URL = 手机URL
HTML核心内容一致
CSS控制布局

至少配置：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="当前页面规范URL">

不用做百度移动适配。

情况二：同URL双模板

PC URL = 手机URL
HTML模板不同

服务器根据设备返回不同HTML，并配置：

Vary: User-Agent

同时保证：

Title一致。

正文主体一致。

Robots一致。

Schema一致。

重要链接一致。

情况三：PC和手机独立URL

PC：

<link rel="canonical"
      href="https://www.example.com/article/123.html">

<link rel="alternate"
      media="only screen and (max-width: 640px)"
      href="https://m.example.com/article/123.html">

手机：

<link rel="canonical"
      href="https://www.example.com/article/123.html">

然后保证：

PC和手机URL一一对应。

主体内容等价。

不要全部跳首页。

百度可以进一步提交移动适配关系。百度当前也明确表示，自适应站点无需使用移动适配工具。

所以PC+手机模板真正复杂的地方，其实并不在于：

PHP怎么判断一个手机UA。

而在于：

PC和手机两套页面之间的搜索关系有没有表达正确。

搜索引擎必须能够确认：

哪两个页面属于同一份内容。

哪个是规范URL。

手机用户应该访问哪个版本。

两边内容是不是完整一致。

当这些关系处理正确以后，双模板才真正算SEO适配完成。

如果现在还有条件重新规划网站，我仍然更建议：

尽量减少两套模板、两套URL和两套SEO配置。

让PC和手机共享同一个URL和核心内容，通过响应式布局解决展示差异。

这会比长期维护一整套“PC页面对应哪个手机页面”的代码关系简单很多。