SEO Technical: Mobile-Friendly
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.
Scope (Technical 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
Initial Assessment
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for site URL.
Identify:
- Site type: Responsive, separate AMP, dynamic serving
- Content parity: Does mobile show same content as desktop?
- Tools: GSC Mobile Usability report; Mobile-Friendly Test
Mobile-First Indexing Requirements
| 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 & Mobile Adaptation
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 |
Viewport
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.
Mobile Usability Checklist
| 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 |
Common Issues
| 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 |
Responsive vs. Separate URLs
| 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 |
Accelerated Mobile Pages (AMP)
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.
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
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
1---
2name: mobile-friendly
3description: When the user wants to optimize for mobile-first indexing or fix mobile usability. Also use when the user mentions "mobile-friendly," "mobile-first indexing," "mobile SEO," "responsive design," "mobile adaptation," "mobile viewport," "viewport meta," "touch targets," "font size mobile," "AMP," or "Accelerated Mobile Pages." For viewport meta, use page-metadata.
4metadata:
5 version: 1.1.2
6---
7
8# SEO Technical: Mobile-Friendly
9
10Guides mobile-first indexing optimization and mobile usability. Google uses the mobile version of pages for indexing and ranking; mobile-friendliness is a ranking factor.
11
12**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.
13
14## Scope (Technical SEO)
15
16- **Mobile-first indexing**: Google primarily crawls and indexes mobile version
17- **Mobile adaptation**: Responsive design, viewport, breakpoints
18- **Content parity**: Mobile and desktop content should match (or mobile preferred)
19- **Mobile usability**: Viewport, font size, touch targets, no intrusive interstitials
20- **AMP**: Accelerated Mobile Pages—status and when to consider
21
22## Initial Assessment
23
24**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for site URL.
25
26Identify:
271. **Site type**: Responsive, separate AMP, dynamic serving
282. **Content parity**: Does mobile show same content as desktop?
293. **Tools**: GSC Mobile Usability report; [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
30
31## Mobile-First Indexing Requirements
32
33| Requirement | Action |
34|-------------|--------|
35| **Content parity** | Mobile version must include same primary content as desktop; avoid hiding key content on mobile |
36| **Structured data** | Same schema on mobile and desktop; ensure mobile URLs in schema |
37| **Metadata** | Same title, meta description on mobile |
38| **Media** | Images should be crawlable; avoid lazy-loading above-fold images |
39
40## Responsive Design & Mobile Adaptation
41
42**Responsive design** = Single HTML; CSS media queries adapt layout to screen size. **Preferred** for SEO: one URL, no duplicate content.
43
44| Principle | Practice |
45|-----------|----------|
46| **Mobile-first** | Design for mobile first; enhance for desktop |
47| **Fluid layout** | Use `%`, `vw`, `flex`, `grid`; avoid fixed pixel widths |
48| **Breakpoints** | Common: 320px, 768px, 1024px, 1280px; match device widths |
49| **Images** | Responsive images (`srcset`, `sizes`); see **image-optimization** |
50
51## Viewport
52
53The viewport meta tag tells browsers how to scale and size the page on mobile. **Required** for mobile-friendly pages.
54
55```html
56<meta name="viewport" content="width=device-width, initial-scale=1">
57```
58
59| Attribute | Purpose |
60|-----------|---------|
61| `width=device-width` | Match viewport to device screen width |
62| `initial-scale=1` | 1:1 scale on load; prevents zoom |
63| `maximum-scale` | Avoid disabling zoom (accessibility) |
64| `user-scalable=no` | **Avoid**—hurts accessibility |
65
66**Without viewport**: Desktop layout shrunk; horizontal scroll; fails Mobile-Friendly Test. See **page-metadata**.
67
68## Mobile Usability Checklist
69
70| Element | Guideline |
71|---------|-----------|
72| **Viewport** | See above; required for mobile-friendly |
73| **Font size** | 16px minimum for body text; avoid zooming to read |
74| **Touch targets** | Buttons/links ≥48×48px; adequate spacing between taps |
75| **Content width** | No horizontal scrolling; content fits viewport |
76| **Intrusive interstitials** | Avoid popups that block main content on mobile |
77
78## Common Issues
79
80| Issue | Fix |
81|-------|-----|
82| **Content hidden on mobile** | Show critical content; avoid accordion/tabs for primary content |
83| **Flash / unsupported** | Replace with HTML5 alternatives |
84| **Text too small** | Use base font ≥16px; avoid `font-size` in px <12 |
85| **Links too close** | Increase tap target size; add padding |
86
87## Responsive vs. Separate URLs
88
89| Approach | When | Note |
90|----------|------|-----|
91| **Responsive** | Preferred | Single URL; same HTML, CSS media queries |
92| **Dynamic serving** | Same URL, different HTML by user-agent | Ensure mobile content parity |
93| **Separate URLs** | m.example.com | Use canonical + hreflang; see **canonical-tag**, **page-metadata** |
94
95## Accelerated Mobile Pages (AMP)
96
97AMP is a web component framework for fast-loading pages. **Status (2024–2025)**: Still supported; no longer required for Top Stories or ranking.
98
99| Aspect | Note |
100|--------|------|
101| **Ranking** | No ranking advantage over well-optimized responsive pages |
102| **Top Stories** | AMP no longer required since 2021; Core Web Vitals suffice |
103| **When to consider** | News sites, ad-heavy pages, very slow hosting—but responsive + CWV usually better |
104| **Alternative** | Responsive design + **core-web-vitals** optimization; SSR/SSG; see **rendering-strategies** |
105
106**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.
107
108## Output Format
109
110- **Mobile Usability status**: Pass/fail from GSC or Mobile-Friendly Test
111- **Responsive / viewport**: Check viewport meta; breakpoints; fluid layout
112- **Content parity**: Mobile vs desktop content check
113- **AMP**: Only if legacy or specific use case
114- **Fixes**: Prioritized by impact
115
116## Related Skills
117
118- **page-metadata**: Viewport meta tag; required for mobile
119- **core-web-vitals**: CWV measured on mobile; replaces AMP for Top Stories; LCP, INP, CLS
120- **canonical-tag**: Separate mobile URLs; hreflang for mobile
121- **image-optimization**: Responsive images; mobile LCP
122- **rendering-strategies**: SSR/SSG for fast mobile load
123- **google-search-console**: Mobile Usability report
gabrielmoreira