Mobile SEO & Mobile-First Indexing

Google completed the mobile-first indexing transition for the entire web on October 31, 2023. Whatever you publish for desktop is irrelevant to ranking unless it also exists on mobile. The 2026 mobile SEO playbook is therefore not “make the desktop site work on phones” — it is “design for the smartphone Googlebot first and let larger viewports inherit.” AMP is officially deprioritized, the carousel above search results no longer requires it, and the framework is on quiet life support inside Google.

TL;DR

• Mobile-first indexing means Googlebot Smartphone is the canonical crawler. If content, links, or structured data exist only in your desktop HTML, they do not count.
• Responsive design wins; separate m.example.com is a maintenance trap. Cloaking-detection systems penalize divergent content; a single responsive codebase eliminates the risk.
• AMP is dead in everything but legacy news caches. Top Stories no longer requires it (since June 2021), and Google removed the AMP icon from search results in 2023.

The mental model

Think of mobile-first indexing as Google switching from reading the hardcover edition of your site to reading the paperback. The hardcover (desktop) might have extra appendices, larger maps, prettier typography — none of it matters if the paperback is what the librarian catalogues. Anything missing from the paperback effectively does not exist on Google’s shelves.

A responsive site is the same book, reformatted to a smaller page; the words are identical. A separate mobile site is a different paperback printed by a different press; sometimes the chapters get out of sync, sometimes the index points to pages that don’t exist, and sometimes the librarian gives up trying to reconcile the two.

The unforced error in 2026 is still the team that ships a “richer desktop experience” — extra schema, expanded FAQs, full author bios, deeper internal links — that gets stripped on mobile. From Google’s view, the stripped-down version is the page. The “rich” version is invisible.

Deep dive: the 2026 reality

Mobile-first indexing checklist that Google actually validates in 2026:

Requirement	What Googlebot Smartphone checks	Common failure
Same primary content	Body copy, headings, images on mobile and desktop must match	Mobile drops paragraphs to “save space”
Same structured data	JSON-LD must be present on mobile, with same @id references	Schema only added to desktop template
Same metadata	title, meta description, canonical, hreflang	Mobile uses different <title>
Same internal links	Crawl paths must lead to the same destinations	Mobile menu hides taxonomy navigation
Crawlable and indexable	robots.txt allows mobile bot, no noindex on mobile-only	Subdomain blocks bot in robots.txt
Equivalent media	Images and videos on mobile (with alt text)	Mobile drops product gallery

Viewport configuration is the gateway requirement. Without <meta name="viewport" content="width=device-width, initial-scale=1">, the page loads at desktop width and renders at 33% in a phone viewport — Googlebot Smartphone marks the page as “not mobile-friendly” and the page falls out of mobile-quality results.

Touch targets must be at least 48×48 CSS pixels with 8 px minimum spacing, per Google’s Mobile-Friendly guidelines. The Lighthouse “Tap targets are sized appropriately” audit catches this; the production failure mode is dropdown menus and pagination links sized for a mouse pointer.

Font sizes must render at 16 px or larger for body copy without zooming. iOS Safari auto-zooms forms with <input> font-size below 16 px, which triggers a CLS event Chrome counts. Set body text to a minimum of 1 rem with a :root font-size of 16 px or above.

The case against AMP in 2026. AMP was a 2015 reaction to slow mobile pages and a 2019 reaction to ad-tech bloat. Both problems are now solved by Core Web Vitals incentives, modern CSS, and the standardization of <picture>, loading="lazy", and fetchpriority. Google’s product changes that effectively retired AMP:

• June 2021: Top Stories carousel removed the AMP requirement.
• November 2022: the AMP lightning-bolt icon disappeared from Search results.
• August 2023: AMP Cache cdn.ampproject.org stopped being prefetched in Chrome’s discover feed by default.
• 2024: Google’s own help docs were rewritten to remove AMP-specific guidance for new publishers.

The remaining cost of AMP is real: a parallel template, AMP-specific JS limitations, separate analytics, separate caching behavior, and the maintenance overhead of keeping the AMP version in sync with canonical for every content update. The benefit is now zero for the vast majority of publishers. Recommendation: deprecate AMP, 301 the AMP URLs to canonical, drop the <link rel="amphtml"> from the HTML head. News publishers with legacy Top Stories presence should validate in Search Console that removing AMP doesn’t change their carousel placement (in 2026 it does not).

Visualizing it

flowchart TD
  A[Googlebot Smartphone fetches URL] --> B{Mobile-friendly?}
  B -->|No| C[Marked not-mobile-friendly, demoted in mobile SERP]
  B -->|Yes| D{Content parity with desktop?}
  D -->|No| E[Indexed mobile content only, desktop extras ignored]
  D -->|Yes| F[Full content indexed]
  F --> G{Core Web Vitals pass?}
  G -->|No| H[Page Experience signal negative]
  G -->|Yes| I[Eligible for full ranking]
  J[Legacy AMP URL] -.optional 301.-> A

Bad vs. expert

The bad approach

<!-- Desktop version: rich content, schema, full nav -->
<!DOCTYPE html>
<html>
<head>
  <title>Acme Widgets — The Original Hand-Made Widget Company</title>
  <meta name="description" content="Hand-made widgets since 1962. Free shipping over $50.">
  <script type="application/ld+json">
    {"@context":"https://schema.org","@type":"Organization","name":"Acme Widgets","sameAs":["..."]}
  </script>
</head>
<body>
  <nav><!-- 80 links --></nav>
  <main><!-- 2400 words, 8 images, FAQ accordion --></main>
</body>
</html>

<!-- m.acme.com/mobile version: stripped down -->
<!DOCTYPE html>
<html>
<head>
  <title>Acme</title>
  <!-- no description, no JSON-LD, no canonical to desktop -->
</head>
<body>
  <nav><!-- 6 top-level links --></nav>
  <main><!-- 600 words, 2 images, no FAQ --></main>
</body>
</html>

Googlebot Smartphone visits m.acme.com, sees 600 words and no schema, and that becomes the canonical understanding of the page. The desktop’s 2,400 words, FAQ schema, and Organization markup are invisible. Worse, the two versions can diverge over time because the CMS fields differ; eventually the mobile site lists products the desktop has discontinued. Cloaking-detection systems flag the divergence, and ranking degrades on both. This was the dominant failure mode of the 2016–2020 mobile-site era and is still the top recurring issue in mobile-first indexing audits.

The expert approach

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>Acme Widgets — Hand-Made Widgets Since 1962</title>
  <meta name="description" content="Hand-made widgets since 1962. Free shipping over $50." />
  <link rel="canonical" href="https://www.acme.com/" />

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Acme Widgets",
      "url": "https://www.acme.com/",
      "logo": "https://www.acme.com/logo.svg",
      "sameAs": [
        "https://www.linkedin.com/company/acme-widgets",
        "https://en.wikipedia.org/wiki/Acme_Widgets"
      ]
    }
  </script>
</head>
<body>
  <a href="#main" class="skip-link">Skip to content</a>
  <header><!-- Same nav, collapses to hamburger under 768px --></header>
  <main id="main"><!-- Same content, fluid layout --></main>
</body>
</html>

/* Mobile-first responsive baseline */
:root {
  font-size: 100%; /* respect user's browser default */
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1rem; /* 16px minimum, prevents iOS zoom */
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Touch targets: minimum 48x48 with 8px gutter */
.btn, a.nav-link, button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 16px;
  margin: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

input, select, textarea {
  font-size: 1rem; /* prevents iOS zoom-in on focus */
  min-height: 48px;
  padding: 12px;
}

/* Layout: mobile baseline, scale up at breakpoints */
.container { padding-inline: 16px; max-width: 100%; }

@media (min-width: 768px) {
  .container { padding-inline: 32px; max-width: 720px; margin-inline: auto; }
}

@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}

# Permanent redirect from legacy AMP and m.* to canonical
server {
  server_name m.acme.com;
  return 301 https://www.acme.com$request_uri;
}

location ~ ^/(.+)/amp/?$ {
  return 301 /$1;
}

A single responsive template, one canonical URL per page, identical content and schema across viewports. Touch targets meet 48×48, body text meets 16 px, viewport is properly declared. AMP and m. subdomains permanently redirect to canonical so legacy URLs consolidate signal instead of leaking it.

Do this today

1. Open Google Search Console → Page Experience and scroll to Mobile Usability. Every URL listed is a verified mobile-friendly failure; click each error category for the specific issue.
2. Run PageSpeed Insights on three top URLs with the Mobile tab. Read the Diagnostics → “Tap targets are not sized appropriately” and “Document doesn’t have a meta viewport tag” audits.
3. In Chrome DevTools, open the Device Toolbar (Cmd+Shift+M), pick Pixel 8 profile, and walk through your top three templates. Watch for layout breaks, hidden content, and unreachable CTAs.
4. Crawl with Screaming Frog using Configuration → User-Agent → Googlebot Smartphone. Compare the crawl to a desktop Googlebot crawl — any Word Count, H1, Canonical, or Schema column difference is an indexing risk.
5. If you run a separate m.example.com, plan its retirement now. Map every mobile URL to its desktop equivalent, deploy 301 redirects, drop the <link rel="alternate" media="only screen..."> from desktop, and remove the Vary: User-Agent header.
6. If you still serve AMP, decide. For non-news sites in 2026, retire it: 301 every */amp/ URL to canonical, drop <link rel="amphtml"> tags, remove the AMP build from CI. Validate the change in Search Console → Indexing → Pages doesn’t surface new errors.
7. Audit body font-size with the WAVE Browser Extension or DevTools Computed → font-size — anything below 16 px on body copy gets bumped up. Form <input> elements must also be 16 px to prevent iOS zoom.
8. Verify structured data parity with the Rich Results Test at search.google.com/test/rich-results — toggle between Desktop and Mobile user-agent and confirm the same schema types pass on both.
9. In Lighthouse → Mobile → Best Practices, run the audit and resolve every issue under Touch targets, Font sizes, and Tap targets. Re-run until the section scores 100.
10. Set a CrUX-based monitoring dashboard in PageSpeed Insights API or DebugBear filtered to formFactor=PHONE so mobile-specific regressions are visible separately from desktop.