PC+手机模板的判断方法

做网站SEO诊断时，经常会遇到一个很基础的问题：

这个网站到底是响应式网站，还是PC端和手机端使用了两套模板？

有些网站在电脑上访问是一个样式，手机打开以后页面明显发生变化，很多人看到这里就直接判断：

这是PC+手机两套模板。

这个判断并不准确。

因为现在网站实现移动端适配，至少存在三种常见方式：

响应式设计；

同URL代码适配；

PC和手机使用独立URL。

其中响应式网站在手机和电脑上同样会显示完全不同的布局，但底层仍然可能使用同一个URL、同一份HTML。

Google目前仍然把移动网站实现方式分为Responsive Design、Dynamic Serving和Separate URLs三类，并明确推荐新网站优先采用响应式设计，因为这种方式实现和维护相对简单。

百度对移动站的分类也基本一致，分别称为：

跳转适配、代码适配和自适应。

所以判断一个网站到底使用什么模板，不能只缩小一下浏览器窗口看页面有没有变化。

下面按照从简单到技术的方法具体判断。

第一：先看手机访问以后URL有没有发生变化

这是最简单的一种方法。

假设电脑打开：

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

然后用手机打开同一个地址。

如果手机自动跳转到：

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

或者：

https://wap.example.com/product/123.html

甚至：

https://www.example.com/m/product/123.html

基本可以判断：

网站存在独立手机URL。

也就是常说的：

PC站+手机站。

例如：

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

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

这属于比较典型的Separate URLs。

百度目前的移动适配工具也正是针对这种PC页面和移动页面拥有不同URL的情况，需要提交两套页面之间的对应关系；百度同时明确说明，自适应站点不需要使用移动适配工具。

所以判断网站是不是传统意义上的“PC+手机模板”，第一步就可以看：

手机访问以后地址栏变不变。

第二：URL不变，也不代表一定是响应式

这是特别容易判断错误的一点。

例如：

电脑访问：

https://www.example.com/product/

手机访问：

https://www.example.com/product/

地址完全没变。

很多人就会说：

这是响应式网站。

实际上还不能下结论。

因为还有一种技术叫：

Dynamic Serving，也就是动态提供内容。

百度过去称为：

代码适配。

它的特点是：

URL相同
+
服务器识别设备
+
PC返回一份HTML
+
手机返回另一份HTML

Google对Dynamic Serving的定义同样如此：无论设备如何都使用同一个URL，但服务器通过User-Agent识别设备，为不同设备返回不同HTML，并建议使用Vary: User-Agent响应头。

所以：

同一个URL

只能排除部分独立移动站情况。

还不能直接证明网站使用响应式模板。

第三：最直观的方法——改变浏览器窗口宽度

如果网站使用响应式设计，通常会通过CSS媒体查询根据屏幕宽度调整布局。

可以直接在电脑浏览器里操作。

打开网页以后：

缩小浏览器宽度

观察页面是否逐渐发生变化。

例如：

电脑端：

顶部横向导航
+
三栏产品
+
左右布局

窗口变窄以后自动变成：

汉堡菜单
+
单栏产品
+
上下布局

而且：

不需要刷新页面。

这种情况通常就是响应式设计。

因为网页已经加载完成，只是CSS根据当前Viewport重新计算显示方式。

典型代码可能包含：

@media (max-width: 768px) {
    .nav {
        display: none;
    }

    .content {
        width: 100%;
    }
}

如果窗口从：

1920px

拖到：

375px

页面实时改变，

响应式的可能性就非常高。

第四：如果必须刷新以后页面才改变，要考虑代码适配

假设打开网站以后：

电脑宽度下是一套页面。

然后把浏览器缩小到手机宽度。

页面却没有明显变化。

只有：

刷新网页

以后，导航、HTML结构、模块才突然全部变化。

这种情况就要怀疑：

服务器正在根据User-Agent或者设备信息返回不同模板。

原因很简单。

响应式CSS通常可以在窗口变化时实时重新布局。

而服务器端代码适配需要：

浏览器发起新请求
↓
服务器读取User-Agent
↓
判断PC或手机
↓
重新输出模板

所以往往只有重新请求页面以后才能切换。

不过这只能作为判断线索。

部分前端程序也可能在刷新后才执行设备判断，因此真正确认还需要继续检查HTML。

第五：用Chrome开发者工具模拟手机访问

这是非常实用的方法。

Chrome打开网站以后：

F12

进入开发者工具。

点击：

Toggle device toolbar

或者使用快捷键：

Ctrl + Shift + M

选择：

iPhone
Pixel
Galaxy

等移动设备。

然后重新刷新页面。

重点观察三件事：

1. URL有没有改变

如果跳到：

m.example.com

基本属于独立移动站。

2. HTML结构有没有大幅变化

如果URL没变，但HTML换了一整套，可能属于代码适配。

3. 只是CSS布局变化

如果HTML主体基本一致，只是：

宽度；

排列；

菜单；

图片尺寸

发生变化，通常属于响应式。

开发者工具的意义就在于：

同时模拟屏幕尺寸和移动设备User-Agent。

比单纯拖动浏览器窗口更加准确。

第六：查看网页源代码，是判断响应式最简单的技术方法之一

打开网站以后可以使用：

Ctrl + U

查看网页源代码。

先搜索：

viewport

响应式网站通常会存在：

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

这个标签告诉移动浏览器：

页面宽度按照设备实际宽度显示。

Bing在移动友好性说明中也把正确的Viewport设置列为移动页面的重要基础配置。

不过有Viewport只能说明：

网站考虑了移动端显示。

不能单凭这一行代码判断网站一定是响应式。

还要继续看CSS。

第七：继续搜索CSS里的@media

响应式网站最常见的特征之一，就是CSS媒体查询。

开发者工具或者源代码里搜索：

@media

可能看到：

@media screen and (max-width: 768px) {
    .header-menu {
        display: none;
    }
}

或者：

@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}

这意味着：

网站根据：

屏幕宽度；

设备尺寸

改变页面表现。

如果网站中存在大量针对：

1200px
992px
768px
576px

等断点的CSS规则，基本可以判断网站具备响应式设计。

但要注意：

存在媒体查询也不等于全站一定完全响应式。

部分网站可能：

PC和移动使用不同模板；

但手机模板内部又使用响应式CSS。

所以最终还是需要结合URL和HTML一起判断。

第八：比较PC和手机的HTML源码，可以进一步确认

如果想判断得更准确，可以分别获取：

PC User-Agent页面；

手机User-Agent页面。

然后比较HTML。

响应式网站

通常会看到：

PC HTML
≈
手机 HTML

主要差别发生在CSS展示。

例如同样存在：

<header>
<nav>
<main>
<section>
<footer>

手机端只是CSS把导航隐藏，改成按钮。

代码适配

可能看到：

URL完全相同

但PC源码：

<div class="desktop-header">

手机源码却直接变成：

<div class="mobile-header">

甚至产品列表、导航和页面模块的DOM结构都明显不同。

这时候就属于：

同URL不同HTML。

百度对代码适配的定义同样是：URL保持一致，服务器根据设备或UA，为不同设备生成不同HTML。

第九：怎么用curl模拟PC和手机蜘蛛？

如果会一点命令行，可以直接测试。

普通请求：

curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" \
https://www.example.com/

再模拟移动设备：

curl -A "Mozilla/5.0 (Linux; Android 13; Pixel 7)" \
https://www.example.com/

把两份HTML保存下来比较。

如果：

URL一样
HTML几乎一样

更接近响应式。

如果：

URL一样
HTML明显不同

更接近动态代码适配。

如果移动请求直接得到：

301 / 302

然后跳到：

m.example.com

基本就是独立移动URL。

这种方法特别适合检查：

肉眼看不出来的网站。

第十：还可以检查HTTP响应里的Vary: User-Agent

如果网站属于：

代码适配；

独立移动URL自动跳转

这类依赖设备识别的架构，

响应头中可能存在：

Vary: User-Agent

Google目前的移动站文档也明确要求Dynamic Serving通过Vary: User-Agent帮助搜索系统理解服务器会根据User-Agent返回不同内容。

可以使用：

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

查看Header。

如果发现：

Vary: User-Agent

再结合HTML变化，就能进一步确认。

但还是要强调：

有这个Header不代表100%一定是PC+手机两套模板。

部分CDN、缓存系统也可能使用它。

要综合判断。

第十一：独立手机站还可以查看canonical和alternate

如果网站是典型的：

PC：
www.example.com

手机：
m.example.com

通常还需要建立PC和手机页面的对应关系。

Google对于Separate URLs的网站，目前仍然要求正确维护PC与移动页面关系。

传统PC页面可能看到：

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

移动页面则可能：

<link
  rel="canonical"
  href="https://www.example.com/page/"
>

Google当前移动优先索引文档仍然要求，使用独立移动URL的网站保持移动端和桌面端的正确对应关系。

所以如果你检查源码发现：

www页面 → alternate → m页面
m页面 → canonical → www页面

基本就可以确认：

这是独立PC+手机站。

第十二：百度后台的移动适配，也能帮助判断

如果这是自己的网站，还可以直接登录：

百度搜索资源平台。

查看有没有配置：

移动适配

如果后台存在类似：

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

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

这种规则，

自然说明网站使用：

PC URL + 手机URL

两套地址。

百度目前仍明确说明：

只有同时拥有PC站和对应手机站时才需要提交移动适配；

自适应网站不需要使用这个工具。

因此这个方法对于自己的老网站特别实用。

第十三：可以通过这张表快速判断三种移动模板

如果只想快速判断，可以记：

URL变
→ 优先判断独立手机站

URL不变 + HTML变
→ 优先判断代码适配

URL不变 + HTML基本不变 + CSS随宽度变化
→ 优先判断响应式

基本够用了。

第十四：PC和手机看起来不同，并不能证明是两套模板

比如响应式网站电脑端：

导航横排
4列产品
右侧侧边栏

手机端：

菜单折叠
1列产品
侧边栏隐藏

视觉已经完全不同。

但源码可能仍然只有：

一份HTML
+
一套响应式CSS

所以判断时不要看：

页面长得是不是一样。

应该看：

URL、HTML和设备识别机制。

这才是技术上的区别。

第十五：为什么SEO更推荐响应式？

如果现在准备建设一个新网站，一般优先考虑响应式。

Google当前明确推荐Responsive Web Design，理由是这类结构更容易实现和维护。Google在2024年的SEO Office Hours中也再次表示，独立移动URL仍然可以使用，但会让SEO、统计、维护和测试复杂很多，因此更推荐逐步迁移到干净的响应式方案。

原因非常实际。

响应式网站只有：

一个URL

所以很多SEO问题天然少一层。

不用额外管理：

PC与手机页面配对；

手机301；

alternate；

两套canonical；

两套Sitemap；

两套内链；

两套数据统计。

网站维护也更加简单。

第十六：PC+手机两套模板对SEO一定不好吗？

也不能这样说。

Google当前仍然支持：

响应式；

动态提供；

独立移动URL

三种移动网站架构。

百度也仍然提供独立PC和移动页面的适配工具。

所以：

两套模板本身不会自动导致SEO出问题。

真正容易出问题的是：

两边内容不一致。

比如PC页面有：

3000字正文
完整产品参数
FAQ
案例
内链
结构化数据

手机模板为了“页面简洁”只留下：

800字正文
几张图片

这就值得警惕。

第十七：为什么现在判断手机模板，对SEO仍然很重要？

因为Google已经使用：

Mobile-first indexing。

也就是Google主要使用智能手机Googlebot抓取到的移动版本内容进行索引和排名。

这意味着：

如果网站存在PC和手机两套HTML，

真正需要重点检查的是：

手机端到底给Google看到了什么。

Google目前要求移动版本和桌面版本保持重要内容一致，包括：

正文；

图片；

视频；

Title；

Meta Description；

robots；

结构化数据；

主要内链。

尤其不要出现：

PC端完整
手机端删掉一半内容

Google还明确提醒，如果PC和移动版本使用不同HTML，应尽量保证两端拥有相同的重要内部链接；否则因为Google主要索引移动版本，缺少移动端链接可能降低新页面被发现的效率。

所以判断模板结构并不是纯技术兴趣。

它会直接影响：

接下来SEO应该查哪一套页面。

第十八：如果是PC+手机独立URL，要重点检查哪些问题？

如果最终确认：

www.example.com
+
m.example.com

两套URL，

建议继续检查：

1. 页面是否一一对应

不能：

PC产品A
↓
移动端首页

应该尽量：

PC产品A
↓
移动产品A

百度的移动适配同样要求PC和移动页面主体内容对应。

2. 手机端内容是否完整

重点看：

正文；

产品参数；

图片；

案例；

FAQ。

3. Title和Description是否一致

不要PC端认真优化Title，手机模板还是：

首页

4. Canonical是否正确

避免移动页面互相指错。

5. 移动端内链是否完整

不能PC端有100个正常入口，手机模板只留下十几个。

6. robots是否误屏蔽手机站

例如：

m.example.com/robots.txt

意外：

Disallow: /

这类错误影响会非常直接。

第十九：如果是代码适配，要特别小心缓存

代码适配会根据：

User-Agent

返回不同HTML。

这时候如果网站前面使用：

CDN；

页面缓存；

Nginx缓存；

WordPress缓存插件，

一定要确认缓存系统能够正确区分设备。

否则可能出现：

手机用户看到PC模板；

电脑用户看到手机模板；

Googlebot Smartphone拿到PC缓存。

这也是为什么Dynamic Serving通常需要：

Vary: User-Agent

告诉缓存系统和搜索引擎：

这个URL返回的内容可能随着User-Agent变化。

这类问题在SEO诊断里比响应式复杂得多。

第二十：网站已经是PC+手机两套模板，有必要马上改响应式吗？

不用看到两套模板就立即重构。

如果当前：

PC移动对应正常；

内容一致；

搜索排名稳定；

移动体验正常；

页面速度正常；

站点规模很大，

直接迁移可能带来额外风险。

可以先把现有SEO关系维护好。

但如果网站准备：

全面改版；

更换CMS；

重做主题；

长期运营SEO和GEO，

那么可以考虑把：

PC站
+
m手机站

逐步统一成响应式。

Google针对从m-dot迁移到响应式网站也给出过明确方案：

移动URL按照页面一一301到对应的响应式URL，并清理原来的移动URL专属配置。

关键仍然是：

不要所有m页面统一跳首页。

要一一对应迁移。

最后：判断PC+手机模板，不要只看页面“长得不一样”

如果只记住一个判断方法，可以记这三步。

第一步：看URL

PC和手机URL不同
→ 大概率独立手机站

例如：

www.example.com
↓
m.example.com

第二步：看HTML

URL相同
HTML明显不同
→ 大概率代码适配

服务器根据设备输出不同模板。

第三步：看CSS

URL相同
HTML基本相同
页面随着屏幕宽度实时变化
→ 大概率响应式

如果还需要确认，再继续检查：

Viewport
@media
User-Agent
Vary: User-Agent
301/302
canonical
alternate
百度移动适配

基本就可以准确判断。

百度目前对三种方案的定义也非常清楚：

跳转适配
= 不同URL + 不同HTML

代码适配
= 相同URL + 不同HTML

自适应
= 相同URL + 相同HTML + 根据屏幕调整显示

而Google目前同样支持Responsive Design、Dynamic Serving和Separate URLs三种方式，并继续优先推荐响应式设计。

所以真正做SEO检查时，别再只问：

网站有没有手机版？

更准确的问题应该是：

搜索蜘蛛在手机端看到的URL、HTML、内容和内链，跟PC端到底是什么关系？

把这一点判断清楚以后，后续该检查：

移动适配；

canonical；

重定向；

Sitemap；

内容一致性；

还是响应式CSS，

就会非常清楚了。