Back to Details

mobile-friendly

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SEO Technical: Mobile-Friendly

SEO技术：移动端友好

Guides mobile-first indexing optimization and mobile usability. Google uses the mobile version of pages for indexing and ranking; mobile-friendliness is a ranking factor.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
指导移动端优先索引优化和移动端可用性提升。Google会使用页面的移动端版本进行索引和排名，移动端友好度是排名因素之一。
调用时：首次使用时如果有帮助，可以先用1-2句话介绍本技能覆盖的内容及其重要性，再提供核心输出。后续使用或用户要求跳过介绍时，直接输出核心内容即可。

Scope (Technical SEO)

覆盖范围（技术SEO）

  • Mobile-first indexing: Google primarily crawls and indexes mobile version
  • Mobile adaptation: Responsive design, viewport, breakpoints
  • Content parity: Mobile and desktop content should match (or mobile preferred)
  • Mobile usability: Viewport, font size, touch targets, no intrusive interstitials
  • AMP: Accelerated Mobile Pages—status and when to consider
  • 移动端优先索引：Google主要抓取和索引页面的移动端版本
  • 移动端适配：响应式设计、viewport、断点设置
  • 内容一致性：移动端和桌面端内容应当匹配（或优先考虑移动端内容）
  • 移动端可用性：viewport、字体大小、触控目标、无侵入式插屏广告
  • AMP：Accelerated Mobile Pages——状态说明及适用场景

Initial Assessment

初步评估

Check for project context first: If 
.claude/project-context.md
or 
.cursor/project-context.md
exists, read it for site URL.
Identify:
  1. Site type: Responsive, separate AMP, dynamic serving
  2. Content parity: Does mobile show same content as desktop?
  3. Tools: GSC Mobile Usability report; Mobile-Friendly Test
首先检查项目上下文：如果存在
.claude/project-context.md
或
.cursor/project-context.md
，读取文件获取站点URL。
确认以下信息：
  1. 站点类型：响应式、独立AMP、动态提供内容
  2. 内容一致性：移动端展示的内容是否与桌面端一致？
  3. 工具：GSC移动端可用性报告；移动端友好测试

Mobile-First Indexing Requirements

移动端优先索引要求

RequirementAction
Content parityMobile version must include same primary content as desktop; avoid hiding key content on mobile
Structured dataSame schema on mobile and desktop; ensure mobile URLs in schema
MetadataSame title, meta description on mobile
MediaImages should be crawlable; avoid lazy-loading above-fold images
要求操作
内容一致性移动端版本必须包含与桌面端相同的核心内容，避免在移动端隐藏关键内容
结构化数据移动端和桌面端使用相同的schema，确保schema中使用移动端URL
元数据移动端使用相同的标题、meta描述
媒体资源图片应当可被抓取，避免对首屏图片使用懒加载

Responsive Design & Mobile Adaptation

响应式设计与移动端适配

Responsive design = Single HTML; CSS media queries adapt layout to screen size. Preferred for SEO: one URL, no duplicate content.
PrinciplePractice
Mobile-firstDesign for mobile first; enhance for desktop
Fluid layoutUse 
%
, 
vw
, 
flex
, 
grid
; avoid fixed pixel widths
BreakpointsCommon: 320px, 768px, 1024px, 1280px; match device widths
ImagesResponsive images (
srcset
, 
sizes
); see image-optimization
响应式设计 = 单份HTML，通过CSS媒体查询根据屏幕尺寸调整布局。是SEO的首选方案：单个URL，无重复内容问题。
原则实践
移动端优先优先为移动端设计，再针对桌面端增强功能
流式布局使用
%
、
vw
、
flex
、
grid
，避免固定像素宽度
断点设置常用断点：320px、768px、1024px、1280px，匹配设备宽度
图片处理响应式图片（
srcset
、
sizes
），参考image-optimization

Viewport

Viewport

The viewport meta tag tells browsers how to scale and size the page on mobile. Required for mobile-friendly pages.
html
<meta name="viewport" content="width=device-width, initial-scale=1">
AttributePurpose
width=device-width
Match viewport to device screen width
initial-scale=1
1:1 scale on load; prevents zoom
maximum-scale
Avoid disabling zoom (accessibility)
user-scalable=no
Avoid—hurts accessibility
Without viewport: Desktop layout shrunk; horizontal scroll; fails Mobile-Friendly Test. See page-metadata.
viewport元标签会告知浏览器如何在移动端缩放和渲染页面，是移动端友好页面的必备配置。
html
<meta name="viewport" content="width=device-width, initial-scale=1">
属性作用
width=device-width
将viewport宽度匹配设备屏幕宽度
initial-scale=1
页面加载时按1:1比例缩放，避免自动缩放
maximum-scale
不要禁用缩放功能（影响可访问性）
user-scalable=no
禁止使用——会损害可访问性
未配置viewport的问题：桌面端布局被压缩，出现横向滚动条，无法通过移动端友好测试。参考page-metadata。

Mobile Usability Checklist

移动端可用性检查清单

ElementGuideline
ViewportSee above; required for mobile-friendly
Font size16px minimum for body text; avoid zooming to read
Touch targetsButtons/links ≥48×48px; adequate spacing between taps
Content widthNo horizontal scrolling; content fits viewport
Intrusive interstitialsAvoid popups that block main content on mobile
元素规范
Viewport参考上文配置，是移动端友好的必备条件
字体大小正文最小字号16px，避免用户需要缩放才能阅读
触控目标按钮/链接尺寸≥48×48px，点击区域之间保留足够间距
内容宽度无横向滚动条，内容完全适配viewport宽度
侵入式插屏广告避免在移动端使用会遮挡核心内容的弹窗

Common Issues

常见问题

IssueFix
Content hidden on mobileShow critical content; avoid accordion/tabs for primary content
Flash / unsupportedReplace with HTML5 alternatives
Text too smallUse base font ≥16px; avoid 
font-size
in px <12
Links too closeIncrease tap target size; add padding
问题修复方案
移动端内容被隐藏展示核心内容，避免对主要内容使用折叠/标签页隐藏
Flash / 不支持的内容使用HTML5替代方案替换
文本字号过小基础字号≥16px，避免使用小于12px的
font-size
链接间距过近增大点击目标尺寸，添加内边距

Responsive vs. Separate URLs

响应式 vs 独立移动端URL

ApproachWhenNote
ResponsivePreferredSingle URL; same HTML, CSS media queries
Dynamic servingSame URL, different HTML by user-agentEnsure mobile content parity
Separate URLsm.example.comUse canonical + hreflang; see canonical-tag, page-metadata
方案适用场景注意事项
响应式首选方案单个URL，相同HTML，通过CSS媒体查询适配
动态提供内容相同URL，根据user-agent返回不同HTML确保移动端内容与桌面端一致
独立移动端URL如m.example.com使用canonical + hreflang配置，参考canonical-tag、page-metadata

Accelerated Mobile Pages (AMP)

加速移动页面（AMP）

AMP is a web component framework for fast-loading pages. Status (2024–2025): Still supported; no longer required for Top Stories or ranking.
AspectNote
RankingNo ranking advantage over well-optimized responsive pages
Top StoriesAMP no longer required since 2021; Core Web Vitals suffice
When to considerNews sites, ad-heavy pages, very slow hosting—but responsive + CWV usually better
AlternativeResponsive design + core-web-vitals optimization; SSR/SSG; see rendering-strategies
Recommendation: For most sites, prioritize responsive design and Core Web Vitals over AMP. AMP adds maintenance (separate AMP HTML); modern optimization offers similar performance with more flexibility.
AMP是用于构建快速加载页面的Web组件框架。现状（2024–2025）：仍受官方支持，但不再是入选头条新闻轮播或获得排名优势的必要条件。
维度说明
排名相比优化良好的响应式页面没有额外排名优势
头条新闻轮播2021年起不再要求必须使用AMP，满足Core Web Vitals即可
适用场景新闻站点、广告密集页面、主机速度极慢的站点——但通常响应式设计 + CWV优化是更好的选择
替代方案响应式设计 + core-web-vitals优化；SSR/SSG，参考rendering-strategies
建议：对于大多数站点，优先优化响应式设计和Core Web Vitals，而非使用AMP。AMP会增加维护成本（需要单独维护AMP HTML），现代优化方案可以在获得相近性能的同时保留更高的灵活性。

Output Format

输出格式

  • Mobile Usability status: Pass/fail from GSC or Mobile-Friendly Test
  • Responsive / viewport: Check viewport meta; breakpoints; fluid layout
  • Content parity: Mobile vs desktop content check
  • AMP: Only if legacy or specific use case
  • Fixes: Prioritized by impact
  • 移动端可用性状态：GSC或移动端友好测试的通过/失败结果
  • 响应式 / viewport配置：检查viewport元标签、断点设置、流式布局实现
  • 内容一致性：移动端与桌面端内容比对结果
  • AMP情况：仅当存在遗留AMP配置或特殊使用场景时说明
  • 修复方案：按影响优先级排序

Related Skills

相关技能

  • page-metadata: Viewport meta tag; required for mobile
  • core-web-vitals: CWV measured on mobile; replaces AMP for Top Stories; LCP, INP, CLS
  • canonical-tag: Separate mobile URLs; hreflang for mobile
  • image-optimization: Responsive images; mobile LCP
  • rendering-strategies: SSR/SSG for fast mobile load
  • google-search-console: Mobile Usability report
  • page-metadata：Viewport元标签配置，是移动端适配的必备项
  • core-web-vitals：CWV基于移动端测量，替代AMP成为头条新闻轮播的入选条件；包含LCP、INP、CLS
  • canonical-tag：独立移动端URL配置，移动端hreflang配置
  • image-optimization：响应式图片优化，移动端LCP优化
  • rendering-strategies：SSR/SSG优化移动端加载速度
  • google-search-console：移动端可用性报告