移动优先索引的含义很直接：搜索引擎主要抓取和分析你的移动端页面，用它来决定排名——即使搜索的人用的是电脑。

这带来一个反直觉的后果：如果你的移动端页面删掉了一些桌面端才显示的内容（比如被 hide_sm 类隐藏的模块），那部分内容在排名计算中等于不存在。

viewport：一行代码决定移动端的一切

先看正确写法：

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

就这么简单。只需要两个参数。

三种常见错误写法

<!-- 错误 1：写死了固定宽度 -->
<meta name="viewport" content="width=1200">
<!-- 后果：手机打开后整页缩小成邮票，文字无法阅读 -->

<!-- 错误 2：禁用了用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- 后果：无障碍体验受损，属于明确的可用性问题 -->

<!-- 错误 3：maximum-scale 写成了无效值 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=0.0">
<!-- 后果：0.0 不是合法缩放值，属性被忽略，白写 -->

关于错误 3，实测表现是：浏览器直接忽略这个非法值，页面照常渲染。也就是说这个属性既没起到限制缩放的作用，还留下了代码瑕疵。看到 maximum-scale=0.0 直接删掉即可。

顺便说明：maximum-scale 和 user-scalable=no 在主流浏览器的可访问性规范里已被弱化处理，写了也未必生效。想让页面在手机上正常显示，正确的做法是让布局适配视口，而不是阻止用户缩放。

坑 1：每页出现多个 H1

某个页面有多少个 H1 并不直接决定排名，但 H1 是搜索引擎判断「这一页的主题是什么」最明确的信号之一。当一页出现两个甚至更多 H1，这个信号就模糊了。

移动端特别容易踩这个坑，因为很多主题会在移动版额外输出一个标题区块。

自检命令：

curl -s https://blog.nvcb.cn/183.html \
  | grep -oE '<h1[^>]*>' | wc -l

期望结果是 1。如果是 2 或更多，就要去看 HTML 里第二个 H1 是从哪来的。

比较常见的来源有两类：

• 主题的页面头部区块（通常形如 <h1 class="article-title">）和正文里的标题重复；
• 首页上的多个卡片模块各自带了一个 H1（应该用 H2 或 div）。

修复原则：一页一个 H1，其他层级标题从 H2 开始，且不要跳级（H2 后面直接跟 H4 会让结构变得难以解析）。

如果主题代码不好改，用输出钩子在 wp_head 阶段处理是更轻的做法，或者把多余的那一处改成 <p class="article-title"> 配合原有样式——视觉不变，语义正确。

坑 2：移动端隐藏内容 = 内容不存在

响应式设计里最常见的手法是用 display: none 在窄屏隐藏某些模块。这本身没问题，但要注意：

搜索引擎按移动版渲染页面，被 display: none 隐藏的内容通常不会被计入页面内容评估。

所以，如果一篇教程的关键步骤在移动端被隐藏了（比如放在一个「桌面端专享」的侧栏里），那这部分内容对排名完全没有贡献。

判定原则：

内容类型	移动端隐藏是否可接受
装饰性模块、Logo 墙、广告位	可以
导航菜单（折叠进汉堡按钮）	可以，但仍要在 DOM 里
正文、步骤、代码、表格	不可以
FAQ、结论、要点总结	不可以
相关推荐、标签云	可以

检测方式：用浏览器的设备模拟打开页面，在控制台执行下面这段，看正文容器是否被隐藏：

// 在移动端模拟模式下执行
document.querySelectorAll('article, .article-content, .entry-content')
  .forEach(el => {
    const r = el.getBoundingClientRect();
    console.log(el.className, '宽度:', r.width, '可见:', el.getClientRects().length > 0);
  });

如果正文容器的可见性是 false，问题就很严重了。

坑 3：移动端和桌面端内容不一致

搜索引擎会分别抓取两个版本并对比。如果差异明显（比如移动端没有正文、没有结构化数据、canonical 不同），会触发「移动端内容不匹配」的判定。

三条必须保持一致的项：

1. 正文内容：移动端可以排版不同，但内容必须完整；
2. 结构化数据：两版都要输出，且值一致；
3. canonical 和 meta robots：两版必须声明相同的规范地址和相同的索引指令。

特别提醒：不要只在桌面版输出 canonical，认为「移动端不需要」。移动版页面同样需要完整的 head 信息。

坑 4：用插件做了独立移动站（m.域名）

如果站点用的是 m.example.com 这种独立移动站，配置复杂度会高一个量级：双向 rel="alternate" / rel="canonical" 必须成对出现，且要保证一一对应。

<!-- 桌面版页面里 -->
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="https://m.example.com/183.html">

<!-- 移动版页面里 -->
<link rel="canonical" href="https://example.com/183.html">

对绝大多数站点来说，响应式设计是唯一正确的选择。独立移动站只在极端性能需求下才有意义，而它带来的配置风险和调试成本通常得不偿失。

坑 5：点击目标太小或太挤

这不只是一个体验问题。移动端可用性差的页面，用户点击后很快返回，这个行为信号会间接影响排名。

判断标准：可点击元素的尺寸建议不小于 48×48 像素，且相邻可点击元素之间留出足够间距。

常见问题点：文章底部的标签列表（每个标签都是一行文字，密集排列）、分页按钮、侧栏小图标。

/* 改善点击目标的常用写法 */
.post-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  margin: 4px 6px 4px 0;
}

坑 6：横向溢出导致整页缩放

一个宽度写死的元素（比如固定 600px 宽的代码块、宽表格、嵌入的视频）会撑破视口，导致手机上一整页都能左右拖动。这既是体验灾难，也会让页面截图在搜索结果里显示异常。

自查方式：在移动端模拟下执行

// 找出所有比视口宽的元素
const vw = document.documentElement.clientWidth;
document.querySelectorAll('*').forEach(el => {
  if (el.getBoundingClientRect().width > vw + 1) {
    console.log('溢出:', el.tagName, el.className,
                Math.round(el.getBoundingClientRect().width), '/ 视口', vw);
  }
});

修复的通用套路是给容器加约束：

pre, table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
img, video, iframe { max-width: 100%; height: auto; }

注意这里让代码块自身横向滚动，而不是让整页滚动——区别在于前者只影响那一个组件，后者会毁掉整页的阅读。

坑 7：移动端首屏被无关元素占满

手机屏幕高度有限。如果首屏从上到下依次是：公告条、大 Logo、两行导航、广告位、相关推荐，用户要滑两次才看到正文。这直接影响停留时长和跳出率。

判断标准：在 375×667 的视口下，正文第一段是否出现在第一屏内。

如果没出现，考虑这几项调整：

• 移动端不显示公告条和装饰性 Logo 墙；
• 压缩文章头部的信息区高度（作者、日期、阅读量一行放完）；
• 移动端不展示侧栏广告位（它本来就会折叠到页面底部）；
• 把「相关推荐」从顶部移到正文之后。

移动优先时代的检查清单

检查项	方法	通过标准
viewport 写法	查看源码	仅有 width=device-width, initial-scale=1
H1 数量	grep -c '<h1'	等于 1
正文可见性	设备模拟 + 脚本	正文容器在移动端完全可见
内容一致性	对比两版渲染结果	正文、结构化数据、canonical 一致
横向溢出	溢出检测脚本	无元素超出视口
点击目标	肉眼 + 测量	不小于 48×48 像素
首屏内容	375×667 实测	正文首段在第一屏内

常见问题

桌面版和移动版用不同的 canonical 会有问题吗？

会。两版页面的 canonical 必须指向同一个规范地址。使用响应式设计时，两版是同一个 URL，天然一致；使用独立移动站时，移动版 canonical 要指向桌面版。

移动端隐藏侧边栏会影响 SEO 吗？

取决于侧边栏里有什么。如果只是广告和推荐模块，隐藏没有问题。如果侧边栏里有正文的补充内容，隐藏就等于丢失内容，应改为把内容合并进正文或移到正文下方显示。

user-scalable=no 一定会被降权吗？

不会直接降权，但它属于可用性问题。同时部分浏览器已不再遵守这个指令，所以写了也没用——正确的解决方式是让布局真正适配，而不是禁止用户操作。