What is mobile-first indexing?
Mobile-first indexing doesn't mean Google only looks at mobile sites. It means Google's primary crawler is now a mobile user-agent (Googlebot Smartphone), and the mobile version of your page is what Google considers the "official" version for ranking purposes.
Before 2016, Google indexed the desktop version of pages. The mobile version was an afterthought. This was backwards given that most users were already on mobile.
As of 2024, Google has fully migrated to mobile-first indexing for all sites. There's no opt-out.
What this means practically:
- If your mobile page has less content than your desktop page, Google sees the stripped-down version.
- If your mobile page has different meta tags, headings, or structured data than desktop, Google uses the mobile version.
- If your mobile site is slow, your rankings suffer — even for desktop searches.
The viewport meta tag — the foundation of mobile-friendliness
Every mobile-friendly page needs this one tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />Without it, mobile browsers render the page as if it were 980px wide (the desktop width) and then zoom out, making everything tiny. The viewport tag tells the browser: "Render this at the actual device width and don't zoom out."
This is the most critical mobile SEO fix. Without it, nothing else matters — text is unreadable, buttons are untappable, and users leave immediately.
Check for this on every page you own. It's easy to miss on older pages or CMS templates that weren't updated for mobile.
What makes a site truly mobile-friendly?
The viewport tag is necessary but not sufficient. A truly mobile-friendly site also has:
Readable text without zooming: Base font size should be at least 16px. Text at 12px or smaller forces users to pinch-zoom to read — Google counts this as a mobile usability problem.
Tap targets large enough to hit: Buttons, links, and interactive elements should be at least 48×48px. Tiny links clustered together cause accidental taps — Google flags this as a mobile issue.
No horizontal scrolling: Content should fit within the viewport width. Horizontal scrolling is one of the worst mobile experiences and a direct ranking signal.
Responsive design: The layout adapts to screen size using CSS media queries, Flexbox, or Grid. Elements don't overlap or overflow.
No intrusive interstitials: Pop-ups that cover the whole screen on mobile — especially on page load — are penalized by Google's intrusive interstitials penalty.
Common mobile SEO mistakes
1. Hiding content on mobile
Some designers hide sections of content on mobile using CSS (display: none). Google can see hidden content but may give it less weight than visible content.
2. Mobile page has different content than desktop
If your mobile page has a shorter version of an article "for easier reading," Google indexes the shorter version. Make sure the core content is the same on both.
3. Videos that don't work on mobile
Flash video is completely dead on mobile. Always use HTML5 video or embed from YouTube/Vimeo.
4. Fonts too small
Default 16px is fine. Going below 14px is risky. Below 12px is a definite mobile usability issue.
5. Forms with tiny input fields
Mobile users need to tap form fields. Small inputs with no spacing cause frustration and form abandonment.
6. Navigation not adapted for touch
Hover menus don't work on touchscreens. Make sure your navigation works with tap-only interaction.
How to test mobile-friendliness
Google's Mobile-Friendly Test: Search "mobile-friendly test" in Google and use the tool at search.google.com. It shows a mobile preview and lists any issues.
Google Search Console: Under "Core Web Vitals" and "Page Experience," Search Console shows mobile usability issues across your entire site.
Chrome DevTools Device Mode: Press F12, click the device icon (or Ctrl+Shift+M), and select a mobile device to simulate. Check for overflow, font sizes, and tap target sizes.
Real device testing: Nothing beats testing on an actual iPhone and Android device. Simulators miss some real-world issues like touch event handling and font rendering.
Responsive design vs. separate mobile site
There are three approaches to mobile:
1. Responsive Design (recommended): One URL, one HTML, CSS adapts the layout for different screen sizes. This is Google's preferred approach because there's no risk of different content on mobile vs. desktop.
2. Dynamic Serving: Same URL, but the server sends different HTML based on user-agent. Works fine but requires careful implementation to avoid serving different content.
3. Separate mobile site (m.example.com): A completely separate site for mobile. This creates content management overhead, potential duplicate content issues, and requires proper rel="alternate" and rel="canonical" implementation. Avoid unless you have a strong reason.
Hawk Eye does this instantly
Hawk Eye's Mobile Friendliness module checks six key mobile signals on the current page and gives you a 0–100 score: viewport meta tag presence, responsive viewport setting, horizontal scroll detection, small text elements, small tap targets, and whether the page uses Flexbox or Grid layout. It's like a mini Lighthouse for mobile — in one click, without leaving your browser.
Add Hawk Eye to Chrome — FreeKey Takeaways
- Google indexes the mobile version of your site first — if it's broken on mobile, your rankings suffer.
- The viewport meta tag (width=device-width, initial-scale=1) is the foundational mobile SEO requirement.
- Text must be readable without zooming (16px+) and tap targets must be at least 48×48px.
- Don't hide content on mobile — Google indexes what it sees on the mobile version.
- Responsive design (one URL, CSS-based layout) is Google's preferred mobile approach.