Mobile SEO: A Practical Guide to Mobile First Search

None of this guarantees rankings. It makes sure Google sees your best content and that the people who land on your site can actually book.

What mobile first indexing means

Google’s mobile indexing guide says it uses the mobile version of a site’s content, crawled with its smartphone crawler, for indexing and ranking. Google calls this mobile first indexing. In October 2023 it announced the switch was complete, and said a mobile page now needed to be as complete as its desktop version.

In practice, the phone version of your site is the one that counts. If your phone layout hides your service list, your reviews or your service area to save space, Google may never count them.

Keep the same content on phone and desktop

With a responsive site, the content and code are the same on every device, so this mostly takes care of itself. The trouble starts with older setups that send phones a cut down page. Google’s guide asks site owners using those setups to keep these the same on both versions:

• The main text, headings and images.
• Titles, meta descriptions and structured data.
• Robots meta tags. A noindex tag on the mobile version can stop Google from indexing the page.

Tucking text into a tap to open section is fine as long as the text is already in the page. What Google warns against is content that only loads after someone taps, swipes or types. Google won’t do that, so it won’t see the content.

To check what Google sees, paste a page address into the URL Inspection tool in Search Console and look at the rendered page.

Use responsive design

Use responsive design. Google accepts three setups, but it recommends responsive design because it’s the easiest to build and maintain. Google’s guide lists all three:

1. Responsive design serves the same code at the same address and changes the layout to fit the screen.
2. Dynamic serving uses the same address but sends different code depending on the device.
3. Separate URLs send phones to a different address, often something like m.yourdomain.com.

Google recommends responsive design because it’s the easiest to set up and maintain. One address per page also means fewer chances to get redirects and canonical tags wrong. If you still run a separate mobile site, Google’s guide says the desktop address should be the canonical (the main version), with the mobile page marked as its alternate. A move to one responsive site is usually the cleaner fix.

A responsive page needs one line in its code called the viewport tag. web.dev’s responsive design basics explains that it tells the browser to match the page to the screen width. Without it, phones show a tiny desktop page that people have to pinch to read. The same guide recommends a maximum width of 100% on images, so a wide photo can’t push the page sideways.

The quick test: open your site on your phone. If you can scroll left and right, something is too wide. If you have to zoom to read, the layout isn’t adapting.

Core Web Vitals on phones

Core Web Vitals are Google’s three measures of how a page feels to use. Here are the targets for a good experience, from web.dev:

• Largest Contentful Paint (LCP): the main content should appear within 2.5 seconds.
• Interaction to Next Paint (INP): the page should respond to a tap within 200 milliseconds.
• Cumulative Layout Shift (CLS): the layout should stay steady, with a score of 0.1 or less.

web.dev suggests measuring at the 75th percentile of page loads, split between mobile and desktop. That split matters. A page that feels fine on your office computer can be slow on a phone on a weak signal in a customer’s driveway.

Google’s page experience guide says Core Web Vitals are used by its ranking systems. The same page says good scores don’t guarantee top rankings, and that chasing a perfect score just for SEO may not be the best use of your time. Aim for good, not perfect.

To check yours, open the Core Web Vitals report in Search Console, which shows mobile and desktop separately. Then test your main service pages in PageSpeed Insights. It reports on both, so look at the mobile results first.

The usual fixes on a small business site:

1. Resize and compress big photos, especially the large image at the top of the page.
2. Don’t lazy load that top image. web.dev’s LCP guide explains that lazy loading makes an image start loading later than it otherwise would.
3. Set a width and height on images and embeds, so text doesn’t jump down while they load.
4. Remove chat widgets, sliders and tracking tags nobody uses.

Our technical SEO guide covers speed and the other site checks in more detail.

Make text readable without zooming

Make body text large enough to read without pinching. Google’s Lighthouse tool has a font size check that flags pages where too much of the text is under 12 px: it says text that small is often hard to read on phones, and it flags a page when 40% or more of its text is below that size. Treat 12 px as the floor, not the goal. Your main body text should be comfortably bigger.

A few more things to check on your phone:

• Light grey text on a white background is hard to read outside in sunlight.
• Long paragraphs look like a wall on a narrow screen. Break them up with clear headings.
• People should be able to pinch to zoom. Don’t switch that off to protect the design.

Short paragraphs and clear headings help your desktop visitors too. Our on page SEO guide covers how to write and structure the page itself.

Make tap to call easy

On a phone, the most valuable thing a visitor can do on a service business site is call you. Make your number a link. MDN’s guide to links shows the format: a link that starts with tel: followed by the number. On a phone, tapping it opens the dialer with your number filled in.

Put the number in the header of every page, written out as text, not inside an image. Repeat it next to each main call to action. If you use a sticky call button at the bottom of the screen, make sure it doesn’t cover your form fields, your menu or your cookie banner.

Buttons also need to be big enough for a thumb. web.dev’s tap target guide recommends a minimum of about 48 by 48 pixels, roughly the size of a finger pad. It also suggests about 8 pixels of space between targets, so a tap on one doesn’t hit the next. Footer links crammed side by side and tiny menu icons are the usual offenders.

People on phones also search by voice, often with questions like “emergency plumber near me.” Our voice search SEO tips cover how to answer those.

Avoid popups that cover the page

Google’s guide on intrusive interstitials describes them as page elements that block the content, usually to promote something. It says they make it hard for Google to understand your content, which may lead to poor search performance. They annoy visitors too, and that’s often the bigger cost.

Google’s advice:

• Use a small banner that takes up a fraction of the screen instead of a full page overlay.
• Don’t cover the whole page.
• Don’t send visitors to a separate page to collect consent or details.

Notices you’re legally required to show, like an age check, are treated differently. Even then, Google recommends overlaying the content rather than redirecting to another page.

On service business sites, the common problems are a coupon popup that fires the moment the page opens, a chat window that covers the call button, and a cookie banner that fills half the screen. Load the offer later, shrink the banner and check that the chat icon sits clear of your buttons.

Build forms that work on a phone

A contact form that is fiddly on a phone loses jobs you never hear about. web.dev’s form best practices give the basics:

• Give every field a visible label.
• Use the right field type, such as email for email addresses and tel for phone numbers, so the phone shows the right keyboard.
• Add autocomplete values so the phone can fill in name, email and address for the visitor. The web.dev autofill guide shows how.
• Mark required fields, and explain the mark at the top of the form.
• Name the button after what it does. “Request my quote” tells people more than “Submit.”

Ask only for what you need to call back: name, phone number, ZIP code and what the job is. Every extra field is another reason to quit halfway. After someone sends the form, show a clear thank you message so they know it went through.

Then test it on a real phone. Fill it in with your thumb, make a mistake on purpose and check that the error message makes sense and your typing is still there.

A 15 minute phone test

In 15 minutes on your own phone you can check the things that cost calls: tapping your number, reading a service page, closing any popup and sending the form. Run it on your phone, then on a family member’s phone if it’s a different brand:

1. Search Google for your business and open your site from the results.
2. Check that the page fits the screen with no sideways scrolling.
3. Read a service page without zooming.
4. Tap the phone number and check that the dialer opens with the right number.
5. Open the menu and reach every main service in a few taps.
6. Note any popup or banner that blocks the page.
7. Fill in and send the contact form.
8. Test your homepage and one service page in PageSpeed Insights and read the mobile results.

Write down what broke. Most of these problems sit in the site template, so one fix often repairs every page at once. Run the test again after any redesign, new theme or plugin update.

Get help with mobile SEO

If your site fails more than a couple of these checks, the fix is usually in the design or the template. Our technical SEO services page explains what we check and fix, and our web design services page covers new sites and redesigns. To see what your site needs first, request a free mobile SEO audit. We’ll send the findings within 2 business days. Free audit. No obligation. No hard sell.

Common questions