SEO100
SEO method 18 of 100

Mobile-First Indexing and Responsive Design: A Practical Guide

Beginner High impact A few hours Technical SEO

Updated · First published

Short answerGoogle indexes and ranks the mobile version of your pages, and the switch finished in July 2024. Responsive design is the setup Google recommends. Keep the same content, headings, structured data and meta tags on mobile as on desktop, and never hide main content behind a tap that Googlebot cannot make.

Mobile-first indexing means Google uses the mobile version of a page to index it and decide how it ranks. If your phone layout is missing text, links or markup that your desktop layout has, Google does not see them. The rollout took almost seven years: Google announced in October 2023 that mobile-first indexing had landed, and the last sites that Google still crawled as desktop moved to the smartphone crawler from 5 July 2024. Sites that do not work on mobile at all are no longer indexed.

What is mobile-first indexing?

Google crawls with Googlebot Smartphone, a crawler that behaves like a phone browser. Whatever it finds on that version is what lands in the index. A desktop-only extra, such as a long text block shown only on wide screens, counts for nothing.

Two retired tools matter here. Search Console’s Mobile Usability report and the Mobile-Friendly Test were removed in December 2023. Use Lighthouse, PageSpeed Insights and the URL Inspection tool instead.

Why does mobile-first indexing matter for SEO?

Mobile is now the version Google judges. Three things follow:

  • Content you hide on mobile stops counting. Text, links and images that exist only on desktop are not indexed.
  • Speed is judged on phones. Core Web Vitals are reported for mobile and desktop separately, and PageSpeed Insights tests a mid-tier phone on a mobile network (see page speed).
  • Founders still build on a laptop. The page looks fine in the browser you use and breaks on a 375-pixel-wide screen, so check the phone view on purpose.

Which setup should you use: responsive, user-agent serving or separate URLs?

Setup How it works Verdict
Responsive design One URL and one HTML file, CSS adapts to screen width Google calls it the easiest pattern to implement and maintain. Pick this
Serving by user agent One URL, different HTML for phones and desktops Needs a Vary: User-Agent header and strict content parity
Separate URLs (m.example.com) A second site for mobile Needs matching content, matching status codes and correct canonical and alternate tags. Move to responsive if you can

How do you prepare your site for mobile-first indexing, step by step?

  1. Add the viewport tag. Put <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of every page. Without it phones show a shrunken desktop page.
  2. Use responsive CSS. Fluid widths, flexible images (max-width: 100%) and media queries make one design fit every screen. Most modern themes and site builders already do this.
  3. Match the content. Google’s guide says mobile pages should carry the same main content as desktop, with the same headings. Accordions and tabs are fine for saving space, because the content is still in the page.
  4. Do not make Google tap. Google says it will not click, swipe or type to reveal content, so main content must not wait behind those actions. Lazy-load below-the-fold images with the browser’s native loading="lazy", and make sure they load when scrolled into view.
  5. Match structured data and metadata. Both versions need the same structured data (Google names Breadcrumb, Product and VideoObject as the types to prioritise) and equivalent titles and meta descriptions (see structured data).
  6. Do not block resources on mobile. Use the same robots meta tags on both versions and leave CSS, JavaScript and images crawlable (see robots.txt and noindex).
  7. Make tap targets and text readable. Use body text of 16 px, give buttons and links space to tap, and avoid horizontal scrolling. These serve visitors and conversions rather than ranking directly (see accessibility).
  8. Keep pop-ups out of the way. A full-screen overlay on a phone ruins the visit (see intrusive interstitials).
  9. Test with Google’s own view. In Search Console, use URL Inspection and Test live URL, then view the tested page and its screenshot. This shows what Googlebot Smartphone renders.

How do you measure the result?

  • URL Inspection: the “Crawled as” line should read Googlebot smartphone, and the rendered screenshot should show your full page.
  • Core Web Vitals report: compare mobile and desktop. The two can differ, and mobile is the one Google judges.
  • Page indexing report: look for rows such as “Blocked by robots.txt” or soft 404 that hit mobile URLs only.
  • Analytics: compare mobile bounce rate and conversion rate against desktop. A big gap points to a layout or speed problem on phones.
  • Real devices: open your top five pages on an actual phone, on mobile data, every few months.

What mistakes should you avoid?

  • Trimming content for mobile. A shorter mobile page is the page Google indexes. Hide nothing that you want to rank for.
  • Serving the phone version a different error status. On separate-URL sites, mobile and desktop must return matching status codes.
  • Redirecting all mobile URLs to the mobile homepage. Google lists this as a setup error. Each desktop URL should map to its own mobile equivalent.
  • Content that loads only after a tap or swipe. Googlebot does not perform those actions.
  • Blocking the mobile site’s CSS or JavaScript in robots.txt. Google then cannot render the page.
  • Forgetting the m-dot server load. Separate mobile sites must handle the crawl rate Google applies to mobile URLs.

Where can you learn more?

The Fe/male Switch landing page analyzer checks speed and layout elements of a page and gives a quick read before you test on a real phone. Next steps on SEO100: check your page speed on mobile, then review your structured data for parity.

Earlier versions of this directory listed this as: Mobile-first indexing, Mobile-First Indexing Setup, Mobile responsiveness.

Learn SEO as part of building a startup

Fe/male Switch is a startup school and game where you build a real company step by step. Its free digital marketing module covers SEO, and the free startup tools help with the rest.