mobile-friendly by kostja94/marketing-skills
npx skills add https://github.com/kostja94/marketing-skills --skill mobile-friendly指导移动优先索引优化和移动设备可用性。Google 使用页面的移动版本进行索引和排名;移动设备友好性是一个排名因素。
调用时机:在首次使用时,如果合适,用 1-2 句话开场,说明此技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接进入主要输出。
首先检查项目上下文: 如果存在 .claude/project-context.md 或 .cursor/project-context.md 文件,请读取它以获取网站 URL。
识别:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 要求 | 操作 |
|---|---|
| 内容一致性 | 移动版本必须包含与桌面端相同的主要内容;避免在移动端隐藏关键内容 |
| 结构化数据 | 移动端和桌面端使用相同的结构化数据模式;确保模式中使用移动端 URL |
| 元数据 | 移动端使用相同的标题和元描述 |
| 媒体 | 图片应可抓取;避免对首屏图片使用懒加载 |
响应式设计 = 单一的 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;避免 font-size 小于 12px |
| 链接太近 | 增大触摸目标尺寸;增加内边距 |
| 方法 | 适用场景 | 备注 |
|---|---|---|
| 响应式 | 首选 | 单一 URL;相同的 HTML,CSS 媒体查询 |
| 动态服务 | 同一 URL,根据用户代理提供不同 HTML | 确保移动端内容一致性 |
| 独立 URL | m.example.com | 使用规范标签 + hreflang;参见 canonical-tag、page-metadata |
AMP 是一个用于快速加载页面的 Web 组件框架。状态:仍受支持;自 2021 年起不再为"焦点新闻"或排名所必需。
| 方面 | 备注 |
|---|---|
| 排名 | 相对于优化良好的响应式页面没有排名优势 |
| 焦点新闻 | 自 2021 年起不再要求 AMP;核心网页指标足够 |
| 何时考虑 | 新闻网站、广告繁多的页面、托管速度非常慢——但响应式 + CWV 通常更好 |
| 替代方案 | 响应式设计 + core-web-vitals 优化;SSR/SSG;参见 rendering-strategies |
建议:对于大多数网站,优先考虑响应式设计和核心网页指标,而非 AMP。AMP 增加了维护成本(单独的 AMP HTML);现代优化提供了类似的性能和更大的灵活性。
每周安装量
108
仓库
GitHub 星标数
237
首次出现
13 天前
安全审计
安装于
cursor102
gemini-cli101
kimi-cli101
codex101
opencode101
github-copilot101
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.
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for site URL.
Identify:
| Requirement | Action |
|---|---|
| Content parity | Mobile version must include same primary content as desktop; avoid hiding key content on mobile |
| Structured data | Same schema on mobile and desktop; ensure mobile URLs in schema |
| Metadata | Same title, meta description on mobile |
| Media | Images should be crawlable; avoid lazy-loading above-fold images |
Responsive design = Single HTML; CSS media queries adapt layout to screen size. Preferred for SEO: one URL, no duplicate content.
| Principle | Practice |
|---|---|
| Mobile-first | Design for mobile first; enhance for desktop |
| Fluid layout | Use %, vw, flex, grid; avoid fixed pixel widths |
| Breakpoints | Common: 320px, 768px, 1024px, 1280px; match device widths |
| Images | Responsive images (srcset, sizes); see image-optimization |
The viewport meta tag tells browsers how to scale and size the page on mobile. Required for mobile-friendly pages.
<meta name="viewport" content="width=device-width, initial-scale=1">
| Attribute | Purpose |
|---|---|
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.
| Element | Guideline |
|---|---|
| Viewport | See above; required for mobile-friendly |
| Font size | 16px minimum for body text; avoid zooming to read |
| Touch targets | Buttons/links ≥48×48px; adequate spacing between taps |
| Content width | No horizontal scrolling; content fits viewport |
| Intrusive interstitials | Avoid popups that block main content on mobile |
| Issue | Fix |
|---|---|
| Content hidden on mobile | Show critical content; avoid accordion/tabs for primary content |
| Flash / unsupported | Replace with HTML5 alternatives |
| Text too small | Use base font ≥16px; avoid font-size in px <12 |
| Links too close | Increase tap target size; add padding |
| Approach | When | Note |
|---|---|---|
| Responsive | Preferred | Single URL; same HTML, CSS media queries |
| Dynamic serving | Same URL, different HTML by user-agent | Ensure mobile content parity |
| Separate URLs | m.example.com | Use canonical + hreflang; see canonical-tag , page-metadata |
AMP is a web component framework for fast-loading pages. Status (2024–2025) : Still supported; no longer required for Top Stories or ranking.
| Aspect | Note |
|---|---|
| Ranking | No ranking advantage over well-optimized responsive pages |
| Top Stories | AMP no longer required since 2021; Core Web Vitals suffice |
| When to consider | News sites, ad-heavy pages, very slow hosting—but responsive + CWV usually better |
| Alternative | Responsive 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.
Weekly Installs
108
Repository
GitHub Stars
237
First Seen
13 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor102
gemini-cli101
kimi-cli101
codex101
opencode101
github-copilot101
Schema标记专家指南:结构化数据实现与SEO优化,提升富媒体搜索结果
31,400 周安装