Mobile-Friendly Test: Is Your Page Ready for Phones?

Google indexes the mobile version of your pages. With mobile-first indexing complete, the smartphone Googlebot is the crawler that decides what gets indexed, so a page that only works on a desktop screen has a problem with search and with most of its visitors.

Google retired its own Mobile-Friendly Test on December 1, 2023. This mobile-friendly test fills the gap with static checks of the page’s code: the viewport tag, responsive CSS with media queries, fixed-width elements, a legible base font size, tap-target hints, responsive images, plugins and intrusive interstitial hints.

How to test if a page is mobile friendly

1. Enter the page URL

   Test each key template (home, article, product, contact), because mobile problems usually come from the template.

2. Review each check

   See which mobile basics pass and which fail, with the element or rule behind each warning.

3. Fix and confirm

   Apply the fixes, run the test again, then look at the page on a real phone.

What replaced Google’s Mobile-Friendly Test

On December 1, 2023, Google shut down the Mobile-Friendly Test tool, its API and the Mobile Usability report in Search Console, and pointed site owners to Lighthouse. Today you have three good options:

• This test for a quick check of the mobile basics in the page code.
• Lighthouse in Chrome DevTools, or PageSpeed Insights, for a rendered mobile run.
• URL Inspection in Search Console, whose live test shows a screenshot of the page as the smartphone Googlebot renders it.

How Google crawls mobile pages is explained in our mobile-first indexing glossary entry.

The viewport tag and responsive CSS

Without a viewport tag, phones lay the page out at a desktop width of around 980 pixels and shrink it to fit. This line belongs in every page’s <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Don’t add maximum-scale=1 or user-scalable=no; blocking zoom fails people who need larger text. Then let the layout adapt with media queries and flexible widths:

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}
img, video { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }

Fixed widths such as width: 1200px on a wrapper, a wide data table or an embedded iframe are the usual cause of sideways scrolling on phones.

Text, tap targets and images

• Font size: use 16px for body text; much smaller and people have to zoom to read.
• Tap targets: WCAG 2.2 asks for targets of at least 24 × 24 CSS pixels (success criterion 2.5.8), and many design systems, Google’s Material Design among them, recommend 48 × 48. Leave space between neighboring links.
• Responsive images: serve smaller files to small screens with srcset and sizes; the image SEO checker flags oversized files.
• Plugins: Flash and similar plugins no longer run in modern browsers; use <video> or a standard embedded player.

<img src="cake-800.jpg"
     srcset="cake-400.jpg 400w, cake-800.jpg 800w, cake-1600.jpg 1600w"
     sizes="(max-width: 640px) 100vw, 800px"
     width="800" height="533" alt="Slice of lemon cake">

Interstitials and pop-ups

Google’s guidance on intrusive interstitials warns against pop-ups that cover the main content right after someone arrives from search, standalone interstitials that must be dismissed first, and layouts where the top of the screen looks like an ad. Cookie consent and other legally required notices, age checks and reasonably sized banners are fine. On a phone, a slim banner that leaves the content readable beats a full-screen modal. For mobile load times, run the page speed test as well.

Tips for a better mobile experience

• Test on a real phone as well as an emulator; touch, fonts and browser bars behave differently on hardware.
• Keep the same content, headings, structured data and meta tags on mobile as on desktop, because the mobile version is what Google indexes.
• Use relative units such as rem, % and vw for layout and type so the page adapts to any screen.
• Give form fields the right input types, such as email and tel, so phones show the matching keyboard.
• Check sticky headers and chat buttons on small screens; together they can cover a large share of the viewport.

Limits to keep in mind

This is a static check of the page’s HTML and code, not a rendered screenshot: we don’t run JavaScript or lay the page out on a phone-sized screen, so overflow or overlapping elements that appear only after rendering can slip through. Use Lighthouse, PageSpeed Insights or Search Console’s URL Inspection for a rendered view, and finish with a real device. For the wider picture of how a page performs in search, run the SEO analyzer.

Last updated Oct 30, 2026 by the Yes SEO team.