How to Fix Mobile Usability Issues: Google Search Console Error
Mobile usability of a website is a most important issue that can adversely affect search engine ranking and search visibility of the site. Google clearly declares that mobile friendliness of a site is an important ranking factor and a part of its core search algorithm. Since for most websites their majority of 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 (as follows) that ‘new issues type mobile usability detected’ in your site, you should take immediate action.
Let me tell in details how to fix the mobile usability issues for Google oer 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 ‘Enhancement’ group on the tab bar at 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:
Error types can be maximum six 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 specific error types.After you clicking on an ‘error report’, you’ll find the affected pages displayed against the error type. You can also click on ‘View Details’ for deeper knowledge of the error or ‘Test Live Page’ to have a view of how your affected page looks to Google Mobile Boots and users having 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. I’m providing you the details.
Fixing ‘Content Wider than Screen’ Issues
When horizontal scrolling 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. In order to fix the problem, reset values to ‘relative’ and positive numbers for CSS elements.
Fixing ‘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 websites are placed so close that a mobile user find it difficult to tap a 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.
Fixing ‘Text Too Small to Read’ Error
This is another CSS error as well it can exist in viewport. This type of error reports in Google Search Console indicate that mobile users find it difficult to read the text of 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 font to proper scaling. As in the earlier cases, scale the font value to ‘relative. Font ‘min-width: 575 px’ is the ideal scaling.
Fixing ‘Incompatible Plugin Use’
This error report indicates that the plugin used in the affected page is not compatible for mobile view. For example, ‘Flash does not work in mobile device. Be sure that you are using 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.
Troubleshooting ‘Viewport Not Set’ Report
Viewport is the user visible are of a website. It’s a crucial element in responsive website design that make webpages scalable in accordance to the screen resolution of the viewing devices. Viewport varies with the device sizes – it become 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 pages 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.
Handling 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 set 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 ‘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 turned to ‘Started’. However, complete validation takes some days depending upon how frequently Google Boots crawl your pages. Frequency of Google crawling depend 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 work. 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 cash where you need external help.
Google Search Console provide you option to share the error reports and take help from other.
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 of your search console will not be shared. Google is highly careful to safeguard your privacy and all account information.