Google mobile usability errors - resources blocked by robots.txt

Question

I received an email from Google saying my site has some mobile usability issues. The email said the following:

We’ve found critical mobile usability issues in pages on my website. Mobile usability errors can severely affect the user experience of your site. Pages with mobile usability issues may be ranked lower in Google search results on mobile devices.

We recommend following Google’s Mobile Usability guidelines to avoid negatively affecting your site ranking on Google Search.

I did some mobile-friendly tests on my site with Google webmaster mobile-friendly tool:

When I did these tests for different pages I got variations of this message:

This page uses 23 resources which are blocked by robots.txt.

Most of the resources it lists as blocked are in /wp-content or /wp-contains.

I want to know how I can fix these issues in my robots.txt.

Answer 1

I want to mention that the page-speed insights tool made by Google allows individual pages to be checked for speed and mobile usability and provides results for both desktop and mobile devices. It will provide detail on what you can do to make the site mobile friendly. It may also give a yellow warning message to those sites that might not pass the mobile friendly test.

But if you want to pass the test, make sure the pages you make for mobile devices contain:

1. content which entirely fits within a 320 pixel width
2. the proper meta viewport tag
3. sufficient size lettering for mobile users to read
4. sufficient spacing between buttons to avoid accidental taps

And most importantly, make sure the pages load fast.

Answer 2

The blocked resources are not generally a problem. These messages are just informational most of the time. These messages are not why your site is deemed to be mobile unfriendly since they are not included in the test. In fact, you can just plain ignore blocked resources unless they are not intended to be blocked. Since you are running WP and these are in /wp-content and /wp-contains folders, these are likely blocked by design and not a problem for you to fix.

You want to log into your Google Webmaster Tools (search console) account and migrate to Search Traffic -> Mobile Usability. At the bottom of this page, you will see a short list of issues found. To the right, you will see a button with >>. Click each one one at a time. You will see a list of pages that have failed the mobility test. Often, these have failed for the same reasons. Click any of the pages. You will see several options including Check Live Version Fix the page and use this option to test if your fix passes the test. Do this for a same set of pages. You will likely find that you only have a few minor things that effect all of these pages and that a few quick fixes can solve your problems. Work through enough of the various pages to get a good feel of what errors you have and that you have indeed fixed your problems. You will not likely have to test all of the pages- just a good sample.

When fixing this problem, you will not be working with your robots.txt file, but rather HTML and your CSS (style) file. Most of your work will likely be in your CSS file.