How to Fix Mobile Usability Issues: Google Search Console Error
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.
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:
There can be a maximum of six types of errors as follow:
- Content wider than the screen
- Clickable elements too close together
- Text too small to read
- Incompatible plugin use
- Viewport not set
- 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>
<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
initial-scale=1.0 parts are not defined. Such error sets a fixed width viewport property. Adding the property
initial-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:
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:
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’.
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.