--- title: "Mobile-First Indexing" slug: "mobile-first" category: "seo" tags: ["seo", "mobile", "responsive", "viewport", "accessibility"] status: "stable" last_updated: 2026-05-14 summary: "Google indexes the mobile version. Viewport meta, touch targets, font sizes, tap delay, and the responsive-over-subdomain rule." related: ["[[seo/technical]]", "[[seo/page-speed]]", "[[seo/core-web-vitals]]", "[[frontend/css]]", "[[frontend/accessibility]]", "[[frontend/html]]", "[[seo/glossary]]", "[[seo/audit-checklist]]"] --- ## Overview Google indexes the mobile version of a page, not the desktop one. The desktop version exists for users; the mobile version exists for crawlers and the majority of human traffic. A site that renders correctly on a 360-pixel phone but not on desktop will rank fine; the reverse will not. Mobile-first indexing has been the default for all new domains since 2019 and for every site since 2023. ## Ship one responsive site, not a separate `m.` subdomain A separate mobile site (`m.example.com`) was the 2012 pattern. It is now a ranking liability. - Responsive design with a single URL per page. CSS handles the viewport differences. - One canonical per page, regardless of device. The canonical URL is the same on mobile and desktop. - No User-Agent sniffing to swap content. Google sees the mobile content; users see the desktop content; the two diverge. - Migrate `m.` subdomains to responsive with 301 redirects to the canonical desktop URL. ## Declare the viewport meta tag on every page Without the viewport meta tag, mobile browsers render the page at desktop width and zoom out. Text is unreadable; touch targets are pixel-sized. ```html ``` - `width=device-width` matches the browser viewport to the physical screen. - `initial-scale=1` prevents the auto-zoom-out behavior. - Avoid `user-scalable=no` and `maximum-scale=1`. They break accessibility and trigger WCAG failures. - Place the tag in `` before any CSS link; some browsers ignore later changes. ## Size touch targets at 48 pixels minimum Google's Mobile-Friendly Test fails pages with tap targets under 48 by 48 CSS pixels. So does Lighthouse Mobile. - Buttons, links in nav, and form controls: minimum 48x48 pixels. - Spacing between adjacent targets: minimum 8 pixels. Otherwise users miss the target. - For text links inside paragraphs, the rule is relaxed; Google measures the line height plus padding. - Inputs in forms: 48 pixels tall minimum. Use `min-height: 48px` plus `padding: 12px`. See [[frontend/forms]]. ## Set readable font sizes by default Tiny text on phones is a ranking signal in the wrong direction. - Body text: minimum 16 pixels. Anything smaller forces zoom and fails Mobile-Friendly. - Use `font-size: 1rem` (which equals 16 pixels by browser default) and let users scale up. - Line height: 1.5 minimum for body text. Tight leading on small screens hurts readability. - Never set `font-size` in pixels on the `` element; it overrides user font-size preferences. ## Kill tap delay with `touch-action` Mobile browsers historically added a 300-millisecond delay after `touchstart` to detect double-tap-zoom. Modern browsers skip the delay when the viewport meta is set, but `touch-action` makes it explicit. - `touch-action: manipulation` on buttons and links removes the delay without disabling gestures. - `touch-action: none` on elements that should not respond to gestures (drag handles, canvases). - Avoid `300ms`-removal libraries; they were a 2014 hack and now interfere with native gesture handling. ## Match desktop content to mobile content, exactly The most common mobile-first failure: content that exists on desktop but not on mobile (or vice versa). - Hide content with `display: none` or accordion patterns, not with feature flags or User-Agent checks. The content has to be in the mobile HTML. - Mobile menus that hide nav links behind a hamburger are fine; Google reads the collapsed HTML. - Lazy-loaded content has to load eventually. JS-gated content that never loads on mobile is invisible to the crawler. - Schema markup, alt text, and meta tags must match desktop. Per-device variants trigger inconsistencies. ## Skip AMP; it is not necessary or recommended Accelerated Mobile Pages (AMP) was a 2015 to 2021 distribution strategy. It is now deprecated for ranking purposes. - Google removed AMP as a Top Stories requirement in 2021. Core Web Vitals replaced it. - Maintaining AMP plus a canonical site doubles the engineering cost for zero ranking benefit. - Existing AMP sites: 301 redirect `/amp/` URLs to the canonical mobile-responsive equivalents and remove the AMP toolchain. - A fast responsive page on Core Web Vitals beats AMP on every metric Google now measures. See [[seo/page-speed]]. ## Test on real devices, not just Chrome DevTools Emulators miss the bottom 30% of mobile UX bugs. - Lighthouse Mobile in CI for synthetic regressions. Throttle to 4G and Moto G4 hardware profile. - BrowserStack or LambdaTest for cross-device testing on real iPhones and Android phones. - Real-device testing once per release: a $200 mid-tier Android shows performance issues a Mac M-series never will. - Field data via the `web-vitals` library segmented by device class. See [[seo/core-web-vitals]]. ## Related - [[seo/technical]] - [[seo/page-speed]] - [[seo/core-web-vitals]] - [[frontend/css]] - [[frontend/accessibility]] - [[frontend/html]] - [[seo/glossary]] - [[seo/audit-checklist]]