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.
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 is 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 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:
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:
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 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.