LLM Best Practices

Mobile-First Indexing

4 min read

View markdown source

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.

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • 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 <head> 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 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 <html> 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.

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 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 core-web-vitals.

Graph View

Backlinks