mobile-friendly

SEO 技术：移动端友好性

介绍移动优先索引优化和移动端可用性。Google 使用网页的移动版进行索引和排名；移动端友好性是排名因素。

调用时：首次使用时，如果有帮助，可以先用 1–2 句话说明此技能涵盖的内容及其重要性，然后提供主要输出。后续使用时，或用户要求跳过时，直接提供主要输出。

范围（技术 SEO）

• 移动优先索引：Google 主要抓取并索引移动版
• 移动端适配：响应式设计、视口、断点
• 内容一致性：移动端和桌面端内容应一致（或优先呈现移动端内容）
• 移动端可用性：视口、字号、触控目标、避免侵入式插页
• AMP：Accelerated Mobile Pages（加速移动页面）——现状及适用情形

初步评估

**项目背景：**如果根目录中存在 contextus.md，请阅读并仅加载与此任务相关的模块。没有 Contextus 时，请使用现有项目资料或用户提供的信息，并询问缺失的信息；不要创建并行的上下文系统。

请确定：

1. 网站类型：响应式、独立 AMP、动态呈现
2. 内容一致性：移动端显示的内容是否与桌面端相同？
3. 工具：GSC 移动端可用性报告；移动设备适合性测试

移动优先索引要求

要求	操作
内容一致性	移动版必须包含与桌面版相同的主要内容；避免在移动端隐藏关键内容
结构化数据	移动端和桌面端使用相同的架构；确保架构中包含移动端 URL
元数据	移动端使用相同的标题和 meta 描述
媒体	图片应可供抓取；避免对首屏图片延迟加载

响应式设计与移动端适配

响应式设计＝单一 HTML；通过 CSS 媒体查询适配不同屏幕尺寸的布局。对 SEO 更佳：只有一个 URL，没有重复内容。

原则	实践
移动优先	优先针对移动端设计，再增强桌面端体验
流式布局	使用 %、vw、flex、grid；避免固定像素宽度
断点	常见值：320px、768px、1024px、1280px；与设备宽度相匹配
图片	使用响应式图片（srcset、sizes）；参见 image-optimization

视口

视口 meta 标签用于告知浏览器如何在移动端缩放和调整网页大小。移动端友好页面必须包含此标签。

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

属性	用途
width=device-width	使视口宽度与设备屏幕宽度一致
initial-scale=1	加载时采用 1:1 比例；防止缩放
maximum-scale	避免禁用缩放（无障碍）
user-scalable=no	避免使用——会损害无障碍体验

未设置视口时：桌面布局会缩小；出现水平滚动；无法通过移动设备适合性测试。参见 page-metadata。

移动端可用性检查清单

元素	指南
视口	参见上文；移动端友好性必需
字号	正文至少为 16px；避免为了阅读而缩放
触控目标	按钮/链接 ≥48×48px；点击目标之间应有足够间距
内容宽度	不出现水平滚动；内容适配视口
侵入式插页	避免在移动端使用遮挡主要内容的弹窗

常见问题

问题	修复方法
移动端隐藏内容	显示关键内容；主要内容避免使用手风琴式布局/标签页
Flash / 不受支持的内容	替换为 HTML5 替代方案
文字过小	基础字号至少为 16px；避免使用小于 12px 的 font-size
链接间距过小	增大点击目标；添加内边距

响应式设计与独立 URL

方案	适用场景	说明
响应式设计	首选	单个 URL；使用相同的 HTML 和 CSS 媒体查询
动态提供内容	同一个 URL，根据 user-agent 提供不同的 HTML	确保移动端内容一致
独立 URL	m.example.com	使用 canonical + hreflang；参见 canonical-tag、page-metadata

加速移动页面（AMP）

AMP 是一种用于快速加载页面的 Web 组件框架。状态（2024–2025）：仍受支持；不再是 Top Stories 或排名的必要条件。

方面	说明
排名	与优化良好的响应式页面相比，没有排名优势
Top Stories	自 2021 年起，AMP 不再是必要条件；Core Web Vitals 已足够
适用场景	新闻网站、广告较多的页面、托管速度非常慢的情况——但响应式设计 + CWV 通常更好
替代方案	响应式设计 + core-web-vitals 优化；SSR/SSG；参见 rendering-strategies

建议：对于大多数网站，优先采用响应式设计并优化 Core Web Vitals，而不是 AMP。AMP 会增加维护工作（需要单独的 AMP HTML）；现代优化方案在提供类似性能的同时更加灵活。

输出格式

• 移动设备易用性状态：来自 GSC 或 Mobile-Friendly Test 的通过/失败结果
• 响应式设计 / 视口：检查 viewport meta；断点；流式布局
• 内容一致性：检查移动端与桌面端内容
• AMP：仅适用于遗留场景或特定用途
• 修复措施：按影响程度排序

相关技能

• page-metadata：Viewport meta 标签；移动端必需
• core-web-vitals：CWV 在移动端测量；在 Top Stories 中取代 AMP；LCP、INP、CLS
• canonical-tag：独立移动端 URL；移动端使用 hreflang
• image-optimization：响应式图片；移动端 LCP
• rendering-strategies：使用 SSR/SSG 实现快速移动端加载
• google-search-console：移动设备易用性报告