Mobile-first indexing means Google crawls and indexes the mobile version of your pages, not the desktop version. Whatever a visitor on a phone can see is what Google uses to understand and rank the page. If content, links or structured data exist only on desktop, Google may not see them at all, so your mobile pages must be complete.
Does mobile-first indexing apply to every site?
Yes. Google finished moving sites to mobile-first indexing and, since July 2024, crawls with its smartphone crawler for practically all sites. Pages that cannot be accessed on mobile risk not being indexed. There is no separate setting to opt in or out.
What does Google expect from the mobile version?
Google expects the mobile page to have the same primary content, metadata and structured data as the desktop page. Its mobile-first indexing best practices cover the main points, summarised below.
- The same main text, headings, images and videos on mobile and desktop.
- The same title, meta description and robots meta tags.
- The same structured data, with URLs pointing to the mobile versions where they differ.
- Images and videos with the same quality, alt text and crawlable URLs.
- No content that loads only after a user taps, swipes or types, because Google will not perform those actions.
Content inside tabs or accordions is fine on mobile, as long as it is in the HTML when the page loads.
What is a responsive design and why is it recommended?
A responsive design serves the same HTML at the same URL to every device and uses CSS to adapt the layout to the screen. Google recommends it because it is the easiest to maintain and avoids content differences between versions. Separate mobile sites (such as m.example.com) and dynamic serving still work, but they need extra care to keep content and links in sync.
What is the viewport meta tag?
The viewport tag tells mobile browsers to fit the page to the device width instead of showing a shrunken desktop page. Every page should have it in the <head>, as shown below.
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, phones render the page at a desktop width of around 980 pixels and scale it down, so text becomes tiny and visitors have to zoom and scroll sideways.
Should you disable pinch-to-zoom?
No. Settings such as user-scalable=no or maximum-scale=1 stop visitors from zooming in, which makes the page hard to use for people with low vision. Accessibility guidelines require that text can be enlarged. Remove those values and keep the simple viewport tag shown above.
What causes a fixed-width layout?
A fixed-width layout is one where an element is wider than the phone screen, so the page scrolls sideways. The table below lists common causes and fixes.
| Cause | Fix |
|---|---|
Containers set to a pixel width, such as width: 1200px | Use max-width: 100% or percentage widths |
| Large images without responsive CSS | Add max-width: 100%; height: auto; |
| Wide tables, such as fee or timetable tables | Wrap them in a container with overflow-x: auto |
| Embedded maps, videos or forms with fixed sizes | Make embeds responsive with CSS aspect-ratio |
| Long unbroken text, such as URLs | Use overflow-wrap: anywhere |
Course fee tables and batch timetables are frequent offenders on education sites. Test them on a real phone, not only in a desktop browser window.
How do you test a page for mobile now?
Google retired its Mobile-Friendly Test and the Search Console Mobile Usability report in December 2023. The tools below do the same job.
- Chrome DevTools device mode, to view the page at phone widths.
- Lighthouse in Chrome or PageSpeed Insights, which test on a simulated phone.
- The URL Inspection tool in Search Console, which shows the page as Googlebot smartphone rendered it.
- A real low-cost Android phone on mobile data, since that matches many visitors in India.
Speed matters too, because mobile visitors feel slow pages most; see Core Web Vitals. If your mobile content depends on JavaScript, read JavaScript SEO.
Common mistakes
- Hiding sections, reviews or FAQs on mobile to "save space".
- Blocking CSS or JavaScript files in robots.txt, so Google cannot render the mobile layout.
- Missing structured data on a separate mobile site.
- Loading course listings only after a "Load more" tap.
- Pop-ups that cover the main content on phones.
How to check this with Spider
A Spider page audit checks for a viewport tag, whether zoom is disabled, whether the page uses responsive CSS and whether any element forces a fixed width. A site crawl runs the same checks across your site, so you can find the templates that break on phones and fix them once.
Check this on your own site
Spider's free check tests this and about 100 other things on any page, and links each problem to a guide like this one.
