Troubleshooting «Page is not usable on mobile»

If you find an issue called "Mobile Usability - Page isn't usable on mobile" in the console while checking the page, when in fact the page is well optimized for mobile devices, it's easy to fix. [Please make sure that the page is actually optimized for mobile devices before fixing the problem in this way.]

The most common cause of the problem is an incorrect robots.txt file that prevents the bot from crawling some styles or scripts, which causes the bot to see the page differently than it is displayed in the browser. Below is an instruction on how to fix it.

Step-by-step instructions for fixing the error "The page is not optimized for mobile devices"

Disclaimer: As I noted above, make sure your page has no optimization issues. It's not just about the template: see if images, blocks, tables, and the like do not go beyond the screen width on mobile. If this is the cause of the problem with mobile optimization, then this is what needs to be fixed. It is better to check directly by opening the page on a mobile device, or by turning on the mobile view mode in the browser (emulates the screen sizes of different mobile devices).

Time to complete 10 minutes

Tools:

✅ Search Console

✅ Robots.txt

Step one: Request live page validation

In the "Check all URLs on the resource..." field, insert the desired page and wait until the data is loaded from the Google Index. After that, click the "Check page on the site" button and wait for the scan to finish.

Step two: find problematic elements

After checking the page, click "View Verified Page", go to the menu on the right, click the "More Info" button and expand the "Page Resources" line. There you should find the resources blocked by the robots.txt file. You should be interested in the css and js files (and possibly image formats and other visual elements) that failed to load.

Step three: edit robots.txt

Edit your robots.txt so that the bot can crawl css and js. If you're having trouble with this, you can read the help. My rule that allowed the bot to read these files can be seen in the screenshot below.

Step Four: Submit the new robots to Google

Let Google update the robots.txt for this property using https://www.google.com/webmasters/tools/robots-testing-tool. To do this, click the Submit button.

Step Five: Check the page again and re-crawl

After the robots with the new rules are taken into account by Google, double-check the page on the site (the "Check page on the site" button) and examine the result. This check should show that css and js are no longer blocked by the robot and the mobile optimization problem should be gone. Once you see that the issue has been fixed, request indexing.

Instead of conclusions

Why fix such errors if the user - the user of your site - still sees the normal version of the mobile page, you ask? The answer is very simple - it improves rankings. The fact is that Google sees pages as they are stored in its Index Cache, and if a page with mobile version problems is stored there (from the point of view of Google bots), then the search engine thinks that your page is really not optimized. Given that the Mobile First Indexing update has been running since 2018, which indexes and ranks primarily the mobile version, having an adaptive for different devices is required for good positions.