Mobile SEO Optimizer
Mobile friendly
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,"…
--- name: mobile-friendly description: 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. metadata: version: 1.1.2 --- # 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)
Overview
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.
What you get
- Mobile Usability statusPass/fail from GSC or Mobile-Friendly Test
- Responsive / viewportCheck viewport meta; breakpoints; fluid layout
- Content parityMobile vs desktop content check
- AMPOnly if legacy or specific use case
- FixesPrioritized by impact
Manual install (npx, ZIP)
Claude Code
npx skills add kostja94/marketing-skills --skill mobile-friendly -g -a claude-codeClaude Code (degit)
npx degit kostja94/marketing-skills/skills/seo/technical/mobile-friendly#main ~/.claude/skills/mobile-friendlyClaude.ai / desktop
Codex, Cursor, other agents
Connects with Agent Alley MCP · agentalley.io/mcp
Files included
SKILL.md5.9 KB
Read SKILL.md here
SKILL.md
Show the full text124 lines
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
Project context: Read root contextus.md when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.
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 | |
| 2 | name mobile-friendly |
| 3 | description 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. |
| 4 | metadata |
| 5 | version 1.1.2 |
| 6 | |
| 7 | |
| 8 | # SEO Technical: Mobile-Friendly |
| 9 | |
| 10 | 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. |
| 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 | **Project context:** Read root `contextus.md` when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system. |
| 25 | |
| 26 | Identify: |
| 27 | **Site type**: Responsive, separate AMP, dynamic serving |
| 28 | **Content parity**: Does mobile show same content as desktop? |
| 29 | **Tools**: GSC Mobile Usability report; [Mobile-Friendly Test] |
| 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 | |
| 53 | The viewport meta tag tells browsers how to scale and size the page on mobile. **Required** for mobile-friendly pages. |
| 54 | |
| 55 | |
| 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 | |
| 97 | AMP 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 |
| 124 |
Details
- License
- MIT
- Stars on the repo
- ★ 1,006
- Checked
- Source
- kostja94/marketing-skills ↗
- Creator
- kostja94 · 106 listings
Similar skills
See all →
SkillAgent Browsing Auditor
AgriciDaniel/claude-seo · by AgriciDanielAudit and fix agent readiness: the Lighthouse Agentic Browsing fraction, accessibility tree for agents, robots.txt and Content-Signal for AI agents, WAF treatment of agent traffic, llms.txt, Markdown delivery, ai-catalog.json, /.well-known discovery files, and WebMCP tools. Exclude AI citability and brand signals (seo-geo) and commerce protocol depth (seo-ecommerce).★ 17.4k GitHub stars
SkillBacklink Profile AnalysisAgriciDaniel/claude-seo · by AgriciDanielBacklink profile analysis: referring domains, anchor text distribution, toxic link detection, competitor gap analysis. Works with free APIs (Moz, Bing Webmaster, Common Crawl) and DataForSEO extension. Use when user says backlinks, link profile, referring domains, anchor text, toxic links, link gap, link building, disavow, or backlink audit.★ 17.4k GitHub stars
SkillCMS Configuration Helper
nowork-studio/notfair-plugin · by nowork-studioConnect a CMS to notfair SEO tools. Guides users through configuring WordPress, Strapi, Contentful, or Ghost — tests the connection, and writes credentials to .env.local. Once set up, seo-analysis automatically cross- references CMS content against Google Search Console data. Use whenever the user says "connect my CMS", "set up WordPress", "configure Strapi", "add Contentful", "connect Ghost", or "CMS setup". Also trigger if the user asks why no CMS data appears in a seo-analysis report.★ 3.9k GitHub stars
SkillBacklink Comparison Tool
Ryze-AI-Adgent/open-seo-mcp-skills · by Ryze-AI-AdgentBacklink profile for any domain — referring domains, authority, anchors, new/lost links, and a side-by-side vs a competitor. Use when asked "check my backlinks", "backlink profile of X", "who links to them", or "link gap vs competitor".★ 3.1k GitHub stars
SkillWeb Vitals Auditor
addyosmani/web-quality-skills · by addyosmaniOptimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".★ 2.8k GitHub stars
SkillSEO Publishing Loop
tsingyuai/growth-lab · by tsingyuaiRun an SEO page observation-action-review loop with persistent Memory by coordinating demand research, page creation, adversarial review, image generation, IndexNow submission, and performance review. Use when taking an SEO page from opportunity discovery through publication, measurement, iteration, or continuing a previous SEO loop from Memory.★ 2k GitHub starsMore from kostja94
SkillAffiliate Marketing Strategy
kostja94/marketing-skills · by kostja94When the user wants to plan, implement, or optimize affiliate marketing strategy. Also use when the user mentions "affiliate marketing," "affiliate program strategy," "CPS model," "affiliate recruitment," "commission structure," "affiliate partners," "affiliate network," "affiliate tracking," "affiliate commission," or "partner marketing." For affiliate page, use affiliate-page-generator.★ 1k GitHub stars
SkillAI Search Traffic Trackerkostja94/marketing-skills · by kostja94When the user wants to track AI search traffic in GA4 or GSC. Also use when the user mentions "AI traffic," "ChatGPT referral," "Perplexity traffic," "AI Overviews," "GA4 AI sources," "AI search analytics," "track AI referrals," "AI search traffic," "Claude traffic," or "how to track AI traffic." For AI SEO strategy, use generative-engine-optimization.★ 1k GitHub stars
SkillGA4 Analytics Optimizerkostja94/marketing-skills · by kostja94When the user wants to set up, audit, or optimize analytics tracking (GA4, events, conversions). Also use when the user mentions "Google Analytics," "GA4," "event tracking," "conversions," "attribution model," "gtag," "data layer," "GA4 setup," "conversion tracking," "event setup," "User ID tracking," or "CTA attribution." For traffic insights, use traffic-analysis.★ 1k GitHub stars
SkillMobile App Campaign Managerkostja94/marketing-skills · by kostja94When the user wants to run app install ads, user acquisition (UA), or promote mobile apps. Also use when the user mentions "app ads," "app install ads," "UA," "user acquisition," "Google App Campaigns," "Apple Search Ads," "ASA," "UAC," "App Store ads," "Play Store ads," "CPI," or "app promotion." For store listings, use distribution-channels.★ 1k GitHub stars
SkillLong-Form Article Writerkostja94/marketing-skills · by kostja94When the user wants to write, generate, or create article body content—blog post body, long-form content, how-to guide, listicle. Also use when the user mentions "write article," "article content," "blog post content," "article body," "long-form content creation," "generate article," "article draft," "how-to guide content," "listicle content," "information gain," or "content density." For single post page structure, schema, and SEO metadata, use article-page-generator. For blog index/listing page, use blog-page-generator. For short ad, landing, or email copy, use copywriting.★ 1k GitHub stars
SkillBacklink Profile Analyzerkostja94/marketing-skills · by kostja94When the user wants to analyze backlinks, audit link profile, or identify link issues. Also use when the user mentions "backlink analysis," "backlink audit," "referring domains," "toxic links," "link profile," or "disavow file." For acquisition, use link-building.★ 1k GitHub stars