移动端 SEO：打造移动友好型网站的 10 个优化技巧

在全球范围内，绝大多数网站访问都来自移动设备。在 SEO 中，为移动端优化网站比以往任何时候都更加重要。

在本文中，我会先解释什么是移动端 SEO 以及它为何重要，然后进入核心内容，分享 10 个行之有效的移动端优化技巧。

什么是移动端 SEO？

移动端 SEO 是指优化网站的移动版本，以从搜索引擎获取自然流量的过程。移动端优化专注于在移动设备上提供最佳体验，其中响应式设计等技术实现方式起着关键作用。

为什么移动端优化很重要？

根据 Statista 的数据，2022 年第四季度，移动设备贡献了全球 59% 的网站流量。

不仅用户主要通过移动设备浏览你的网站，Googlebot 也是如此。

2016 年，Google 宣布推出移动优先索引。因此，Google 主要通过 Googlebot 智能手机 user agent 抓取网络。这意味着 Google 将主要使用内容的移动版本来进行索引和排名。

移动优先索引于 2018 年开始推行。到 2021 年，大多数网站都已切换到这种新的抓取方式。

打造移动友好型网站的 10 个技巧

既然我们已经了解移动端优化为何如此关键，下面是我为有效进行移动端优化总结的 10 个技巧。

技巧 1. 使用响应式设计

在为不同设备提供内容的选择上，你有几种方案可供挑选。

响应式设计（推荐）

使用响应式设计时，无论设备如何，你提供的都是同一个 HTML 文件。然后由 CSS 调整页面的渲染方式，以适应设备视口的尺寸。这也意味着你用同一个 URL 来提供内容的所有版本。

响应式设计能确保你有效地加载同一份内容，并根据设备进行适配。

响应式设计不仅是 SEO 从业者推荐的选择，也是 Google 官方指南所推荐的做法。

早在 2019 年，John 就在 Reddit 上表示：“总有一天，所有那些使用独立移动端 URL 的网站都应该迁移到响应式设计。”

归根结底，使用响应式设计并不会带来直接的 SEO 收益。但它维护起来要轻松、干净得多。例如，你不必担心规范标签问题，也不用担心 Googlebot 分不清在移动端/桌面端排名中该采用哪个 URL。

独立的域名/URL 结构（不推荐）

过去常用的一种做法是，通过独立的 URL 或域名结构来提供页面的移动版本。一个常见的例子就是 m. 结构。

桌面端：[['Text', 'example.com/page']]

移动端：[['InlineBold', [['Text', 'm.']]], ['Text', 'example.com/page']]

当用户加载你的页面时，服务器必须先判断用户使用的是什么设备，然后将其引导到相应的 URL。

这种做法并不推荐，因为为一个页面使用多个 URL 会让 URL 管理变得混乱。

即使配置了正确的信号，也存在 Googlebot 无法正确解读这些信号的额外风险。这可能导致索引问题，甚至让 Google 将这些页面判定为重复内容。

如果目前正在使用这种设置，务必遵循如下的规范标签 结构。

桌面端：自引用规范标签

移动端：指向桌面端 URL 的规范标签

还需要在桌面版本上添加一个 rel=”alternate” 标签。

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

话虽如此，从长远来看，最好的方案还是迁移到响应式设计的架构。

动态提供内容（Dynamic Serving，不推荐）

与响应式设计类似，动态提供内容时，你通过同一个 URL 为不同设备提供各自适配的内容。

不过，动态提供内容的主要区别在于：你会为不同设备分别提供预先定义的、各自适配的 HTML 文件。

这种做法无疑胜过独立 URL/域名结构方案，因为你拥有通过单一 URL 为多种设备提供内容的优势。

然而，动态提供内容并不被推荐。历史经验告诉我们，这种做法以容易出现技术问题而著称。

使用动态提供内容时，判断用户正在使用何种设备要由你的 Web 服务器来完成。在动态提供内容的设置中，桌面版页面常常会被错误地展示给使用移动设备的用户。

技巧 2. 针对移动设备的页面速度进行优化

在核心网页指标（Core Web Vitals）时代，可以说 SEO 从业者从未像现在这样重视出色的页面速度表现。

事实上，当 Google 在 2021 年首次将核心网页指标作为排名因素推出时，只针对移动端表现。直到 2022 年 2 月，Google 才将桌面端核心网页指标表现用作排名因素。Google 更优先考虑哪个设备，一目了然。

Google 会将移动端和桌面端的核心网页指标排名信号分别应用于各自的搜索结果。因此，对于移动端搜索结果，Google 会关注来自移动设备的网页指标表现。

要了解网站在核心网页指标方面的表现，一个很好的起点是查看 Google Search Console（GSC）中的专用报告。你可以通过左侧导航栏“体验”（Experience）部分进入该报告。

点击进入移动端报告，你可以看到过去三个月网站在各项核心网页指标上的表现。这些数据通过 CrUX（Chrome 用户体验报告）从访问你网站的真实移动设备用户那里收集而来。

GSC 中这份报告的优点在于，它会把存在问题的 URL 归入相似的页面分组中。这意味着你可以列出一份需要着手处理的关键页面模板清单。

若想更深入地了解问题所在及可能的修复方法，PageSpeed Insights 总是值得一查。

PageSpeed Insights 使用起来很简单。只需输入你想测试的页面 URL，然后按“回车”即可。默认情况下，该工具会自动检测你页面的移动版本。

你首先会看到“了解你的真实用户体验”（Discover what your real users are experiencing）标题下的一些洞察。一开始，这份报告是我主要关注的内容。

这份报告通过 CrUX 使用真实用户数据。了解真实用户（而非机器人）的体验很重要，而且 Google 也会在其排名算法中使用这一数据来源。

在这里，我们可以看到 Ahrefs 的首页通过了全部三项核心网页指标。

在报告更下方的位置，你还能在“机会”（opportunities）和“诊断”（diagnostics）部分找到一些改进措施。当你与开发人员讨论如何提升核心网页指标表现时，这些是不错的切入点。

使用 PageSpeed Insights 时，别忘了在该工具中测试多个页面模板的 URL。不同页面类型的页面速度表现往往差异很大。

不过，我们在这里只是触及皮毛。GSC 和 PageSpeed Insights 只是审查页面速度的良好起点。

请查看 Patrick Stox 关于页面速度和核心网页指标的专题指南，将你的页面速度知识、分析和行动计划提升到新的水平。

技巧 3. 检测并监控网站的错误

定期检测网站是否存在关键的移动可用性错误，是一种良好的习惯。

有很多工具可以做到这一点，但一个很好的起点是通过 GSC 中专门的“移动设备易用性”（Mobile Usability）报告。你可以在左侧导航栏的“体验”部分找到这份报告。

在这里，你可以跟踪存在移动可用性问题的 URL 数量。GSC 提供了一张三个月的趋势图。它便于你发现错误激增的情况，从而将其与开发版本发布关联起来。

向下滚动，你可以看到网站上具体出现了哪些移动可用性问题。点击进入各个报告，你还能看到受影响的 URL。

除 Search Console 之外，还可以使用 Google 的移动设备适合性测试（Mobile-Friendly Test）工具来发现移动可用性问题。

如果你没有要审查网站的 GSC 访问权限，这个工具尤其有用。不过还是建议获得访问权限，因为这样你自动就能覆盖更广泛的 URL。

使用移动设备适合性测试时，只需输入你想测试的页面 URL（或代码），即可查看你的页面是否被视为移动友好。

在本例中，工具显示 Ahrefs 的首页通过了测试。

另一方面，如果你测试的页面不是移动友好的，你会看到一条提示，说明该页面在移动端不可用，并列出原因。

想进一步了解具体的移动可用性问题以及如何解决它们吗？Google 有一些很棒的文档，讲解得更为详细。

技巧 4. 让你的内容对移动端友好

确保网站为移动端优化，并不只是技术层面的事。你还需要确保内容在创作时就考虑到移动用户。

许多 SEO 从业者倾向于使用更短的段落和句子。这与移动端优化实践非常契合。

这种做法能确保你的内容在移动设备上易于阅读。谁愿意打开一篇文章却看到一大堵文字墙呢？反正我不愿意。

作为一般准则，尽量让每个段落最多三句话。如果某个段落本来就只有一句话，那也没问题。

在校对文案草稿时，只要可能，把长句拆分成短句是一种好习惯。

同样的规则也适用于引言。事实上，在引言部分你更应该最严格地执行这些规则。引言应当简短、利落、切中要点。

为了进一步提升可读性，你可以通过加入各种元素和媒体来打散文案。

这些可以包括：

• 项目符号
• 编号列表
• 引用
• 图片
• 视频

看到我刚才做了什么吗？

使用不同类型的媒体时，你要确保它们在移动设备上正确显示。当图片加载后比例严重失调时，用户会觉得非常恼火。

技巧 5. 针对移动端 SERP 进行优化

移动端搜索结果页面（SERP）与桌面端版本之间可能存在相当大的差异。

在浏览所选关键词的 SERP 时，务必手动检查桌面端和移动端两种结果。

这里举个例子。我们就以 wikiHow 针对查询“how to fry an egg”（如何煎鸡蛋）的搜索结果为例。

在桌面端搜索结果中，我们看到一个相当标准的搜索结果。

然而在移动端结果中，我们可以看到 Google 加入了“操作方法”（how-to）图片富媒体搜索结果。

SERP 版面至关重要。获得如上例那样的丰富功能，有助于让你的结果在众多结果中脱颖而出。

这表明结构化数据标记（schema markup）对移动端优化有多么重要和相关。在本例中，wikiHow 很好地加入了操作方法结构化数据（how-to schema）。

想在搜索结果中切换设备，又不想去拿手机？借助 Ahrefs 的 SEO 工具栏（SEO Toolbar），你可以直接在桌面浏览器中加载来自其他设备的结果。

技巧 6. 采用对移动端友好的导航

为移动设备优化网站时，最大的考量之一就是页头导航的实现方式。

这可以说是网站上最难在移动设备上做好的区域之一。

在移动优先的世界里，汉堡菜单已成为一种流行的选择。它之所以得名，是因为这个按钮常常看起来像一个汉堡（大概吧）。

下面是亚马逊上汉堡菜单实际效果的一个例子。

一旦你点击“汉堡”图标（通常位于页面最顶部），菜单便会展开。

在本例中，菜单从左侧展开，其中的选项还可以进一步展开为导航子分类。

汉堡菜单在 SEO 从业者和 UX 专业人士中争议很大。不过在我看来，就移动端优化而言，没有什么能胜过汉堡导航。

这种做法不仅简洁紧凑，而且用户也越来越习惯在移动端使用这类菜单。

桌面端网站采用“大型菜单”（mega menu）方案、移动端网站切换到汉堡菜单，都是可以的。

第一要务是确保两个菜单中的链接一致。你要确保桌面端和移动端导航中包含了完全相同的链接。

在这里，我们可以看到 Apple 在桌面端展示的是大型菜单。

而在其移动端网站上，它使用的是汉堡菜单，但展示的链接与桌面版本完全相同。

对于电商网站来说，分面导航（faceted navigation）也是一大考量。

我们再来看亚马逊。它的产品列表页有大量的筛选选项。

为了让分面导航对移动端用户保持紧凑，它采用了与汉堡菜单类似的做法。

只需点击一下按钮就让分面导航展开，可以让页面保持整洁紧凑。非常适合移动端用户。

想进一步了解网站导航吗？一定要看看 Sam Underwood 关于精通网站导航的文章。

技巧 7. 保持内容一致

网站的移动版与桌面版保持一致至关重要。正如前面提到的，Google 主要抓取你网站的移动版本。

如果你从页面的移动版本中移除内容，就可能会在 Google 眼中削弱你的内容。

这条规则应适用于所有类型的内容，从文案本身到图片。这条规则同样适用于技术性元素，从规范标签到内链。

测试移动端一致性的一种好方法是：对移动端网站进行一次抓取，并与桌面版本的抓取结果进行对比。

通过 Ahrefs 的网站审计（Site Audit）设置抓取时，你可以选择在移动端和桌面端 user agent 之间切换。

你可以在抓取设置的“Robots 指令”（Robots instructions）部分找到该设置。

要通过网站审计测试移动端一致性，请启动两次独立的抓取。一次将 user agent 设为 “AhrefsSiteAudit (Desktop)”，另一次设为 “AhrefsSiteAudit (Mobile)”。

然后你可以在项目历史记录中并排比较这两次抓取，以检查桌面端与移动端抓取之间是否一致。

注意到移动端抓取中的错误比桌面端多得多？这可能表明你的技术性元素在移动端没有被正确实现。

在网站审计中，非常值得比较移动端与桌面端抓取之间的 HTML 源代码。这样你就能轻松找出页面移动端与桌面端代码之间任何意料之外的差异。

在下面的例子中，我们可以看到页头菜单代码在移动端与桌面端抓取之间发生了变化。幸运的是，本例中这种代码差异是意料之中的。

对于高度依赖 JavaScript 的网站，你还应考虑在抓取设置中渲染 JavaScript。然后你就可以比较使用不同 user agent 的抓取之间所渲染出的 HTML。更多信息请查阅我们的JavaScript SEO 指南。

技巧 8. 避免侵入式插页广告

具有侵入性和干扰性的插页广告（interstitials，也叫弹窗）会让用户感到恼火。对移动端用户来说，这种烦恼往往更强烈，因为弹窗常常占据屏幕更大的比例。

恼人且侵入性的弹窗不仅可能降低你的转化率，还会招来 Google 的差评。

作为 Google 页面体验（Page Experience）排名信号的一部分，Google 认可更为克制的插页广告，而不认可那些令人极为恼火的巨型插页广告。

这里的一大例外是：插页广告可能是法律要求的。常见的例子包括 Cookie 同意弹窗和年龄验证弹窗。

例如，在酒精相关内容上，如果供应商没有强制用户在访问内容前输入出生日期，就可能惹上麻烦。

技巧 9. 审查移动端表现

定期审查为网站带来自然流量的设备，是一种良好的习惯。

先从 GSC 开始，你可以在搜索效果报告中按设备类型进行筛选。

只需点击报告上方的“+ 新建”（+ new）按钮添加一个新筛选器，然后选择“设备……”（Device…）即可。

在这里，你可以按设备筛选你的自然表现报告，从而看到你通过移动设备获得了多少自然流量。你还可以选择按设备比较流量。

与 GSC 中的“移动设备易用性”报告类似，值得留意移动端流量中任何意料之外的波动和下滑。这可能是需要进一步调查的移动端优化问题的信号。

你也可以在 Google Analytics 4 中按设备查看流量。通过依次打开 报告 > 用户 > 技术 > 概览，进入“设备类别”（Device Category）报告。

在这里，你需要点击“查看平台设备”（View platform devices）以获取按设备划分的完整分析。

随后你会看到基于按设备类型划分流量的数据表、图表和图形。别忘了添加自然流量筛选器，以确保你只看纯粹的“SEO 流量”。

技巧 10. 在移动设备上跟踪排名

在跟踪关键词时，人们很容易忘记排名在桌面端和移动端 SERP 之间可能不同。

幸运的是，在 Ahrefs 的排名跟踪器（Rank Tracker）中切换桌面端和移动端很简单，让你能非常轻松地查看网站在任一 SERP 上的排名情况。

排名跟踪器的另一个优点在于，你初次跟踪关键词时无需将设备指定为一项设置。关键词会自动在移动端和桌面端两种 SERP 中进行跟踪。

只需加载你的关键词报告，然后在左上角切换移动端和桌面端视图即可。

结语

你可能会想：“我是不是应该放弃网站的桌面版本，专注于移动端优化？”

暂且不必如此下结论。如今移动设备确实占据主导地位，但你不会想完全忽视桌面端的体验。

不仅你的一部分用户会通过桌面端访问网站，Googlebot 也会不时使用桌面端 user agent 进行抓取（只是不像移动版本那样频繁）。

事实上，许多网站的主要流量仍来自桌面端用户。SaaS 公司以及许多面向 B2B 的网站尤其如此。举例来说，Ahrefs 博客就有超过 70% 的自然流量来自桌面设备用户。

总而言之，关键要点是：

• 移动端网站展示的内容与桌面端网站相同。
• 明白响应式设计是首选方向。
• 优先对移动端页面进行页面速度优化。
• 不要害怕在移动设备上使用汉堡菜单。
• 定期监控和跟踪移动端可用性以及移动端流量/排名。

有任何问题？在 Twitter 上找我，告诉我吧。