SEO

Google’s Mobile-Friendly Update: Is Your Site Ready?

How Google's mobile-friendly update works, how to check whether your pages pass, and the fixes that matter most for small business sites.

Quick answer: Google’s mobile-friendly update, which began rolling out on 21 April 2015, gives a ranking boost in mobile search results to pages that work well on phones. It is judged page by page, it only affects searches made on mobile devices, and it is a yes or no test rather than a sliding score. To check your site, run your key pages through Google’s Mobile-Friendly Test and look at the Mobile Usability report in Search Console, then fix the issues it lists, which are usually the viewport setting, text size, tap targets and content wider than the screen.

Many business owners heard about this update under a less friendly name in the weeks before it launched, and a lot of the early coverage made it sound as if sites would vanish overnight. That did not happen. But the update is real, it is still running, and every month we see small business sites that fail the test on pages that matter. If a large share of your visitors arrive on a phone, this is worth an afternoon of your time.

What the update actually does

Google already knew for years that people were searching on phones more and more. Sending a phone user to a page that needs pinching and zooming is a poor result, so Google decided to favour pages that display properly on small screens when the search comes from a mobile device.

A few points are often misunderstood:

  • It only affects mobile search results. Desktop rankings are not changed by this signal.
  • It works page by page, not site by site. If your home page passes and your old blog posts do not, the blog posts are the ones that lose out.
  • It is a pass or fail label. A page is either mobile friendly or it is not. There is no extra credit for being very mobile friendly.
  • It runs in real time. When Google recrawls a page you have fixed, the page can start getting the benefit. You do not have to wait for another update.
  • Relevance still wins. Google has been clear that a page with the best answer can still rank well on mobile even if it is not mobile friendly. The label is one signal among many.

Since the update, mobile search results show a “Mobile-friendly” label next to pages that pass. Searchers notice it, and it can affect clicks as well as rankings.

How to check whether your site is ready

The Mobile-Friendly Test

Google’s Mobile-Friendly Test is the quickest check. Paste in a URL and it tells you whether the page passes, shows a screenshot of how Googlebot sees it on a phone, and lists reasons if it fails. Test more than your home page. A sensible sample is:

  • The home page.
  • Your main service or product pages.
  • A typical blog post.
  • Your contact page and any landing pages you send ad traffic to.
  • Any page built from a different template, such as a gallery or an old microsite.

The Mobile Usability report in Search Console

If your site is verified in Search Console, the Mobile Usability report lists pages with problems across the whole site, grouped by issue type. This is the better view for larger sites, because it catches the old templates you may have forgotten about. If you have not set up Search Console yet, our Google Search Console guide walks through it.

Check on real phones

Tools are useful, but nothing replaces picking up an iPhone and an Android phone and trying the things your customers do: find your phone number, fill in the enquiry form, open the menu, read a product page. A page can pass Google’s test and still be awkward to use.

The most common reasons pages fail

No viewport setting

The viewport meta tag tells the phone’s browser how wide the page should be. Without it, the browser shows a shrunken desktop page. The usual line looks like this:

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

Adding the tag alone is not enough if the layout itself is fixed width, but it is the first thing to check.

Fixed width layouts

Older sites were often built at a fixed width, such as 960 pixels. On a phone, that layout cannot shrink, so content spills off the side. The fix is a responsive layout that uses flexible widths and CSS media queries to rearrange content on smaller screens.

Text too small to read

If people have to zoom to read, Google flags it. A base font size around 16 pixels for body text is a safe starting point, with line spacing that leaves room to breathe.

Tap targets too close together

Links and buttons packed tightly together are hard to hit with a thumb. Menus, footer links and pagination are the usual culprits. Give them enough size and spacing that a finger can hit the right one first time.

Content wider than the screen

Large images, tables, embedded videos and code that sets fixed widths can all push the page wider than the screen. Images should scale with max-width: 100%, and wide tables need either a simpler layout on phones or a container that scrolls sideways.

Blocked CSS and JavaScript

If your robots.txt blocks the folders that hold your CSS and JavaScript files, Googlebot cannot render the page properly and may decide it is not mobile friendly even if it looks fine to people. This was common on older WordPress setups that blocked the wp-includes or plugin folders. Use the Fetch and Render feature in Search Console to see the page the way Google does.

Flash

Flash does not play on iPhones and iPads, and Google treats Flash content as a problem for mobile users. If you still have a Flash intro, banner or video player, replace it with HTML5 video or plain images.

Your options for fixing a site

Responsive design

This is what Google recommends and what we usually advise. One set of URLs, one set of content, and a layout that adapts to the screen. It is easier to maintain, there is no duplicate content to manage, and links all point to the same pages.

Dynamic serving

The same URLs serve different HTML depending on the device. It can work well, but it needs the Vary: User-Agent header and careful testing, and it is more work to keep both versions in step.

A separate mobile site

Some sites use a separate m. subdomain. This is the hardest option to get right for SEO. You need matching annotations between the two versions (rel=”alternate” on the desktop page and rel=”canonical” on the mobile page), redirects that send each phone user to the right equivalent page, and content that stays in sync. Many separate mobile sites quietly drop content or redirect every phone user to the mobile home page, which frustrates people and Google alike.

A new theme or rebuild

If your site runs on a CMS such as WordPress, switching to a well built responsive theme can fix most issues quickly. For older custom sites, a rebuild of the templates may be the cleaner option. Our guide to what a website costs can help you set a sensible budget.

Beyond passing the test

Passing the test is the minimum. A site that is genuinely pleasant to use on a phone tends to keep visitors and turn more of them into enquiries. A few things to look at once the basics are fixed:

  • Speed. Mobile connections are often slower. Compress images, cut unused scripts and turn on caching.
  • Pop ups. Large overlays that cover the page on a phone are irritating and hard to close. Use them sparingly or not at all on small screens.
  • Forms. Ask for fewer fields, use the right input types so the phone shows the number keypad for phone numbers, and make the submit button easy to hit.
  • Click to call. Make your phone number a tappable link. For local businesses, this is often the most used feature on the page. The local SEO checklist covers other quick wins for local searches.
  • Navigation. Keep the menu short and the most common tasks one or two taps away.

FAQ

Will my desktop rankings drop if my site is not mobile friendly?

No. The update only affects rankings for searches made on mobile devices.

My site passes the test. Do I need to do anything else?

Check the other templates on your site, keep an eye on the Mobile Usability report after changes, and test your forms and checkout on real phones.

Does Google penalise separate mobile sites?

No, they are supported, but they need correct annotations and redirects to avoid problems. Responsive design is simpler to get right.

How quickly will fixed pages benefit?

As soon as Google recrawls them. You can speed this up for important pages with Fetch as Google and the submit to index option in Search Console.

Need help getting your site ready?

If your key pages fail the test, or you are not sure where to start, we can audit your templates and fix the issues that hold your mobile rankings back. See how we help businesses get found in search.

About the author

Imran M

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready to improve your website?

Let's build a faster, higher performing website.