+91 88777 26781
care@businesskrafts.com

How to Fix Mobile Usability Issues: Google Search Console Error

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 issues type mobile usability detected’ in your site, 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 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 affecting 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’. This is a CSS error. While CSS declaration for images and other content is set to ‘absolute’ value or 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

This is a space management error. Such 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 In order to fix such errors, make sure that viewport is properly defined to be responsive for all device type. For an HTML website set 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

This 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 in order to be readable to normal eyes. In order 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’

This error report indicates that the plugin used in the affected page is not compatible for the mobile view. For example, ‘Flash does not work in the 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 any older version of HTML, upgrade it into 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 in accordance with the screen resolution of the viewing devices. Viewport varies with the device sizes – it becomes smaller in mobile devices and larger in a desktop computer.

In order 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 <meta> viewport tag gives the browser instructions on how to control the page’s dimensions and scaling. 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 on 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 viewport meta tag is added 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 propertyinitial-scale=1.0instructs 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 ‘Validate Fix’ tab 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 turned to ‘Started’. However, complete validation takes some days depending 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. This 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.

In order 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 to 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 about your search console will not be shared. Google is highly careful to safeguard your privacy and all account information.

Loved it? Please share and like us.

Tags: , ,

18 Responses

  1. 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.

  2. 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.

  3. 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

  4. 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.

  5. 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.

  6. Vicky Malhotra says:

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

  7. Amit Verma says:

    Thanks for the suggestion. This is helpful for me.

  8. 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.

  9. 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

Leave a Reply

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