Mobile Friendly
- 764 installs
- 787 repo stars
- Updated June 9, 2026
- kostja94/marketing-skills
mobile-friendly is an SEO technical skill that audits and improves mobile usability, viewport configuration, touch targets, and responsive design so developers who depend on mobile-first indexing can fix ranking-related
About
mobile-friendly is a marketing-skills SEO module (version 1.1.2) for mobile-first indexing and mobile usability optimization. Google uses the mobile version of pages for indexing and ranking, and mobile-friendliness remains a ranking factor. The skill triggers on mobile-friendly, mobile-first indexing, viewport meta, touch targets, font size mobile, responsive design, and AMP-related requests, with cross-references to page-metadata for viewport specifics. Developers reach for mobile-friendly when search console flags mobile usability errors, tap targets are too small, or responsive breakpoints fail on common phone widths. It guides audits and remediation for viewport configuration, readable font sizes, and touch-friendly UI without replacing full frontend refactors.
- Guides mobile-first indexing optimization used by Google for crawling and ranking
- Evaluates responsive design, viewport meta, breakpoints, font sizes and touch targets
- Ensures content parity between mobile and desktop versions
- Assesses AMP status and provides recommendations when relevant
- Reads project-context.md automatically to understand site URL and type
Mobile Friendly by the numbers
- 764 all-time installs (skills.sh)
- +6 installs in the week ending Jul 25, 2026 (Skillselion tracking)
- Ranked #600 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kostja94/marketing-skills --skill mobile-friendlyAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 764 |
|---|---|
| repo stars | ★ 787 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 9, 2026 |
| Repository | kostja94/marketing-skills ↗ |
How do you fix mobile-first indexing SEO issues?
Audit and improve mobile usability, viewport configuration, touch targets, and responsive design for better search rankings.
Who is it for?
Frontend developers and SEO engineers resolving Google mobile usability warnings or mobile-first indexing problems on marketing and docs sites.
Skip if: Teams building native mobile apps where app store guidelines replace web mobile-first indexing concerns.
When should I use this skill?
User mentions mobile-friendly, mobile-first indexing, viewport meta, touch targets, responsive design, or mobile SEO usability audits.
What you get
Mobile usability audit checklist, viewport and touch-target fixes, and responsive design recommendations
- Mobile usability audit checklist
- Responsive fix recommendations
By the numbers
- Skill metadata version 1.1.2
Files
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
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
Related skills
Seo AuditRun structured SEO audits on their SaaS site or content hub and receive a prioritized action plan.173k42.2kCopywritingGenerate, rewrite, or strengthen persuasive website and landing-page copy that converts visitors into users.164k42.2k
Viral Short FormQuickly generate high-retention hooks, scripts, and outlines for TikTok, Reels, YouTube Shorts, and carousels.132k67Viral HooksWrite and critique viral hooks for short-form video opening sequences.123k67Viral Captions And CtasOptimize social media captions and CTAs for viral short-form video reach and saves.123k67Viral Youtube ShortsWrite and diagnose YouTube Shorts for Shorts Feed and long-form funnel.123k67How it compares
Use mobile-friendly for search-driven mobile usability audits; pair with page-metadata when viewport tag implementation details are the primary gap.
FAQ
Why does mobile-friendly matter for Google search ranking?
mobile-friendly addresses mobile-first indexing, where Google uses the mobile version of pages for indexing and ranking. Mobile-friendliness is an explicit ranking factor, so viewport, touch target, and responsive layout fixes directly affect search visibility.
What mobile elements does mobile-friendly audit?
mobile-friendly audits viewport meta configuration, touch target sizing, mobile font readability, responsive breakpoints, and general mobile adaptation patterns. For viewport tag specifics, the skill directs developers to the page-metadata companion skill.
Is Mobile Friendly safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.