mobile-friendly

# 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:
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](https://search.google.com/test/mobile-friendly)

## 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.

```html
<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