+91 88777 26781
care@businesskrafts.com

How to Fix Mobile Usability Issues: Google Search Console Error

Google Boot Issues

Updated on

The mobile usability of a website is one of the most critical issues that can adversely affect search engine ranking and search visibility of a website. Google declares that the mobile-friendliness of a site is an important ranking factor and a part of its core search algorithm. Since most of the website users come from mobile devices, your site should compile with the mobile user experience policies of Google and other search engines. Whenever you get an email that reads ‘new mobile usability issues detected’ for site example.com, you should take immediate action.

Email Message: Mobile Usability Issue Detected

Let me tell in detail how to fix the mobile usability issues of your website for Google or other search engines.

Step 1: Check for the Errors in Detail

To find the issue details, either click on the button ‘Fix Mobile Usability Issues’ at the bottom of the email or directly visit your Google Search Console account. Click on the ‘Mobile Usability’ tab under the ‘Enhancement’ group on the tab bar on the left side of the screen. You can find the error notice at the top left of the mid-screen and details of error types and counts at the bottom as follow:

Mobile Usabitity Issues in Google Search Console
Mobile Usability Issue Types and Counts

There can be a maximum of six types of errors as follow:

  1. Content is wider than the screen
  2. Clickable elements too close together
  3. Text too small to read
  4. Incompatible plugin use
  5. Viewport not set
  6. Viewport not set to ‘device-width’

You can click on the error type to know which exact pages are affected by the particular error types. After you click on an error report, you’ll find the affected pages displayed against the error type. You can also click on ‘View Details’ for a more profound knowledge of the error or ‘Test Live Page’ to have a view of how your affected page looks to Google Mobile Boots and users who have smaller devices. You can also read the HTML code and identify the errors. Inspect all issues that affect your page.

Step 2: Fix the Issues

Now start fixing the issues one by one. Follow the following suggestions.

Fix ‘Content Wider than Screen’ Issues

When horizontal scrolling is required to see the complete text and images on a page, Google Boots, after crawling your site, explain the issue as ‘content wider than screen’. It is a CSS error. While CSS declaration for images and other contents are set to ‘absolute’ value or the images are set to be best viewed on a specific screen resolution, such error arises. To fix the problem, reset values to ‘relative’ and positive numbers for CSS elements.

Fix ‘Clickable Elements Too Close Together’ Issues

It is a space management error. This type of error report indicates that buttons, navigation links, and other touch elements in a website are placed so close that a mobile user finds it difficult to tap the desired touch element without taping other nearby touch elements. To fix such errors, make sure that the viewport is properly defined to be responsive for all device types. For an HTML website, set the viewport initial scale to 1.0. If you are using a WordPress site, make sure that you are working on a responsive theme with appropriate plugins.

Fix ‘Text Too Small to Read’ Error

It is another CSS error, and it can also exist in the viewport. This type of error report by Google Search Console indicates that mobile users find it difficult to read the text of the webpage due to illegitimate smaller font size, or they require to zoom the text to be readable to normal eyes. To fix such issues, set viewport properly, and set the font to proper scaling. As in the earlier cases, scale the font value to ‘relative’. Font ‘min-width: 575 px’ is the ideal scaling.

Fix ‘Incompatible Plugin Use’

his error report indicates that the plugin used on the affected page is not compatible with the mobile view. For example, ‘Flash does not work on mobile devices. Be sure that you are using the latest responsive plugins for your HTML or CMS (such as WordPress) site. Uninstall if any plugin is not mobile-friendly or outdated. If you have been using an older version of HTML, upgrade it to HTML5. Webmasters of WordPress sites, be careful of updating plugins regularly.

Troubleshoot ‘Viewport Not Set’ Report

The viewport is the user-visible area of a website. It’s a crucial element in responsive website design that makes webpages scalable by the screen resolution of the viewing devices. Viewport varies with the device sizes – it becomes smaller in mobile devices and larges in a desktop computer.

To resolve any viewport related issue, you need to add the following viewport meta tag in the header section of each page of your HTML5 website.

<head>  
...  

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

A viewport tag gives the browser instructions on how to control the page’s dimensions and scales. The width=device-width part sets the width of the page with the screen width of the device. The initial-scale=1.0 part sets the initial zoom level when the page is viewed on a browser.

To learn more about the issue, you may visit Google’s blog for developers.

Handle the Issue – Viewport Not Set to ‘Device Width’

This error report indicates that although the viewport meta tag is in the header section, the width=device-width and initial-scale=1.0 parts are not defined. Such error sets a fixed width viewport property. Adding the property initial-scale=1.0 instructs browsers to establish a 1:1 relation between the CSS pixels and device-independent pixels. This tag also fixes issues related to orientations of viewing devices.

Step 3: Validate Fix

Login to your Google account and visit Search Console. Click on the Mobile Usability tab. Click on each error type. On the next screen, you’ll find the ‘Validate Fix’ button as follow:

Screenshot: Validate Fix

Click on the tab to inform Google that you have already fixed the issue. Google will start an initial validation, and the status will be to ‘Started’. However, the complete validation process takes some days that depends upon how frequently Google Boots crawl your pages. The frequency of Google crawling depends upon the frequency you update your website.

Step 4: Take Help of an Expert

If you could resolve the reported errors by following the above steps, you did a great job. However, it may happen that you are not the developer/designer of your website, and it’s not easy for you to create HTML tag and edit the CSS elements or validation failed, after all, your attempt to fix the issue. It is the case where you need external help.

Google Search Console provides you the option to share the error reports and take help from others.

To share the error reports, check for the ‘Validation Fix’ page of your Search Console account. At the top right, you’ll find a share tab as follow:

Screenshot: Share Error Report

Click on the ‘Share’ tab. A dialogue box will appear. In the box, make sure that link sharing is enabled. Click ‘Copy Link’ and then click ‘Done’.

Error Report Sharing Dialogue Box

Now, you can share the link with anyone whom you believe to be able enough to resolve your issues. Alternatively, you may choose us to help you by sharing the link through our contact form.

Note that while you’re sharing the link, you’re only sharing the reported issue details. Other information in your search console account will not be shared. Google is highly careful to safeguard your privacy and all account information.

Tags: , ,

19 Responses

  1. Birpal kaur says:

    This post is really useful.Please find another relevant post here:

    google search console crawl reports let you monitor

  2. Subrat Mishra says:

    Hi, few days ago Google Search Consol notified this issue. Then I searched on how to fix the issues and found your post. It was helpful for me. Thanks

  3. Arvind Babu says:

    Hi,
    Thanks for you useful post. It could help me in resolving the mobile compatibility issue for my site. I was unaware that it was happening due to an plugin. Simply uninstalled the plugin and things came back to normal.

  4. Amit Verma says:

    Thanks for the suggestion. This is helpful for me.

  5. Vicky Malhotra says:

    Thanks your article helped in my website. Now I can use my website without any fear.

  6. Rolica says:

    I think you can help with more suggestion. Sometimes, something may go wrong.

    • Prabash Sahoo says:

      Thanks for the suggestion. I’m reviewing it.

      • Madhukar Ghosh says:

        Thanks for the helpful article. I was in too much trouble due to the same issue detected in my site. It most too a month to fix the issue that only after reading this article. The issue was ‘viewport is not set to device width’. ‘Intial-scale=1.0’ set up helped me. I wish I would read the post.

  7. Nivedita says:

    I’m excited to share that I could solve all the mobile usability issues for my site diehardbeauty.com after reading your post. It’s quite usable. Thanks a lot.

  8. Rana Sarkar says:

    Hi,
    Although it’s pretty good, you can add more issue types. I’m hungry to get more from you.
    Best Regards,
    Rana

  9. Kartik Rao says:

    Thank you for the useful post. I got proper guidelines from you in fixing the issues. I just received a mail from Google that tells – ‘One or mobile usability issues for your site is fixed successfully.
    A lot of thanks.

  10. Jully Paul says:

    Thanks for helping me through the post. It’s simple to understand and easy to execute. Following your guidelines, I could resolved the issue.

Leave a Reply

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