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.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
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.
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:
| 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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Deprecated compatibility entry for 404 Page construction. This page is now maintained in Pagina; install and use page-builder to build a new 404 Page.
The English summary is being prepared. Showing the original description.
Deprecated compatibility entry for About Page construction. This page is now maintained in Pagina; install and use page-builder to build a new About Page.
The English summary is being prepared. Showing the original description.
When 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.
The English summary is being prepared. Showing the original description.
Deprecated compatibility entry for Affiliate Program Page construction. This page is now maintained in Pagina; install and use page-builder to build a new Affiliate Program Page.
The English summary is being prepared. Showing the original description.
Compatibility pointer for AI assistant referrals and generative search visibility; maintained in Open Analytics.
The English summary is being prepared. Showing the original description.
Deprecated compatibility entry for Alternatives Page construction. This page is now maintained in Pagina; install and use page-builder to build a new Alternatives Page.
The English summary is being prepared. Showing the original description.