Mobile SEO: Google’s Mobile Usability Factors

By Matthew Edgar · Last Updated: May 19, 2023

Google began evaluating mobile usability ranking factors in 2015. This has now been incorporated into Google’s Page Experience factors, alongside Core Web Vitals and HTTPS. While Page Experience factors are not a direct ranking factor, meeting Google’s Page Experience factors can help give your website’s rankings a boost. That is especially true in more competitive search results.

In this article, let’s review Google’s mobile usability factors, how you can test your website’s mobile usability and other things you need to keep in mind when optimizing the mobile version of your website.

Google’s Mobile Usability Factors

Content Wider Than Screen

The most common mobile usability error is that the content is wider than the mobile screen size. When this happens, some parts of the website require horizontal scrolling to see.

The most common reason for this error that we’ve seen on client websites is that something breaks on the website, causing the mobile website to not load properly. For example, an image may not be sized correctly and that causes the mobile website to scroll left and right. Or, the CSS files are unable to load correctly causing the content to not fit the screen (see the example screenshot below for a demonstration of that issue).

Fixing this error typically requires addressing whatever broke on the website. In the example screenshot, fixing this error would require figuring out why the CSS didn’t load successfully.

In other cases, the design itself is incorrect and there isn’t anything else broken. When that is the problem, the CSS file needs to be reviewed and sizes need to be adjusted to use relative width and position values and also to make sure images, videos, and other features scale appropriately on mobile designs.

Text Too Small to Read

The website’s text should be readable without needing to zoom into the page. Typically, that means using a font size of at least 12 pixels for the main text on the page, though font sizes as small as 9 pixels will pass Google’s mobile usability tests.

When designing your website, you want to make sure you size your text correctly so that people can easily read it on mobile devices. Remember that 12-pixel font sizes are the typical minimum. Your audience may benefit from larger font sizes.

If this error occurs, similar to content being wider than the screen, it can be due to something else breaking on the website instead of an issue with your website’s design. If the CSS doesn’t load correctly, the font can appear to be too small. Or a JavaScript file may not execute correctly, which can cause the text to appear to be too small. Fixing this error, then, often requires addressing another underlying issue which is making the font appear smaller.

Clickable Elements Too Close Together

Links need to be placed far enough apart so that the correct link can be easily tapped. If the links cannot be easily tapped, the website will be difficult for people to use.

This typically means tap targets, like buttons, should be 48×48 pixels with at least 6-8 pixels between them. That size will allow people with average fingertip widths to easily navigate through the website.

Fixing this requires using appropriate sizing of elements and padding in between tap targets. If you have an issue with clickable elements, one way to view the current sizing and padding is by using Google Chrome’s Developer Tools.

To do this, begin by opening your website in Chrome. Right-click anywhere on your website and click “Inspect”. This will open up Chrome Developer Tools. In the upper corner, click the device icon so that you are viewing your website as if on a mobile device. This emulates a mobile screen on your desktop computer.

You can choose which type of mobile device to emulate as well.

Once viewing your website on an emulated mobile screen, right-click a tap target and click “Inspect”. Developer Tools will update to highlight that specific element. Once it does, you can click on the “Computed” tab (next to “Style”) to see the computed styles for a particular element, including showing the size and current padding.

In the example shown in the screenshot below, the element’s size is 349×21.594 with 12 pixels of padding on the top and bottom, 17 pixels of padding on the left, and 16 pixels of padding on the right.

Viewport Not Set / Not Set to device-width

The viewport meta tag tells the browser how to adjust its size and layout to fit different screens. To be usable, this tag should be set to “device-width”.

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

If the meta viewport is not set, mobile devices will use an incorrect width for displaying content. That causes the website to appear zoomed out on mobile devices, making the text too small to read.

If the meta viewport is not set to “device-width”, then the browser will be unable to adjust the website’s design to fit different mobile screen sizes. Given how many mobile screen sizes are in use, defining a fixed width is not a viable solution.

Adding in the meta viewport tag is typically an easy solution depending on the exact cause. This tag can sometimes be accidentally removed when deploying a new set of code or can be removed due to a bug in JavaScript code.

Incompatible Plugins

If your website uses plugins (especially Flash) that don’t work on most mobile devices, that will fail Google’s mobile usability guidelines. Your website will also fail for many users. Flash usage is declining but if your website still uses Flash or other similar plugins, update your website to more broadly supported technologies, like HTML5, CSS3, or jQuery.

• Ensuring that your website’s text that is readable without zooming.
• Sizing content to the screen so users don’t have to scroll horizontally or zoom in order to view what is contained on the page.
• Placing links far enough apart so that the correct one can be easily tapped.

Testing Mobile Usability

Google Search Console

You can review mobile usability issues in Google Search Console with the “Mobile Usability” report.

Lighthouse

You can run a Lighthouse report to evaluate, among other things, mobile usability factors. To run Lighthouse, open your website in Google Chrome. Right-click anywhere on your website, then click “Inspect”. This will open Chrome Developer Tools. From here, click “Lighthouse”. On the Lighthouse report, make sure “Mobile” is selected under the device options and that “SEO” is selected under Categories. Once those are selected, click “Analyze page load”.

After the page is analyzed, the SEO reports will show any mobile usability errors under the “Mobile Friendly” section. Remember that the Lighthouse scores are not used directly by Google and are only meant as a general indication of performance across the specific items evaluated by Lighthouse.

Mobile Performance in GA4

Along with testing out your website in Lighthouse and reviewing mobile usability in Google Search Console, remember to review your website’s mobile browser sizes and compare the ways users interact on the different devices. What differences do you see on smaller or larger mobile screens? Are those differences positive (more conversions on certain sizes) or negative (accidental behavior)? How can you alter your responsive design to work across different size screens?

As well, visit your website on these different size screens and see what kind of experience you have (or, have a sample group of users visit on these sizes and see where they struggle). What is harder or easier to use as the screen size changes and how could that affect conversions or engagement?

Final Thoughts

While Google’s factors are a good starting point, remember that to truly deliver a good mobile experience, you have to go beyond Google’s guidelines. It is important to take a broader approach to mobile usability. Nielsen Norman Group has a study guide full of great resources to help you improve your website’s mobile user experience.

While that broader approach won’t directly influence Google’s evaluation of a website, websites that are friendlier on mobile devices will tend to get shared more, get linked to more, and, overall, have a stronger reputation that will attract visitors and help the website rank higher.

Need Help?

Want help improving your website’s technical SEO factors? Contact me today to discuss how I can help review and improve your current technical structure.

Prefer a more DIY approach? Order my book, Tech SEO Guide, a reference guide to help you address the technical SEO  issues on your website.