Since Google announced that mobile-friendliness will become a ranking factor in the mobile search results on April 21, 2015, they started “poking” people, making them aware of their mobile usability issues.

That’s what happened to us several days ago. As I was happily working on some stuff, my phone “told” me I’ve got mail, and guess what! It was from Big G, telling me the following delightful news:

Google systems have tested 40 pages from your site and found that 30% of them have critical mobile usability errors. The errors on these 12 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

Oh, hell no! Last time I checked, everything was fine!

I usually check Google Webmaster Tools (and Bing, but not that often) once every few days, but, to be honest, I didn’t check Mobile Usability in the last 2 weeks or so. I thought nothing can go wrong in two weeks, especially if we haven’t modified anything, but I should know better after all that we’ve experienced in all these years! Things can go wrong anytime! I seem to never learn this lesson properly.

Here’s how the mail looks like, by the way:

It offers some useful resources, except for the easy steps to make a CMS mobile-friendly (I only checked the WordPress part), if you ask me.

It basically tells you that if you have a responsive theme, then it’s great! If you don’t, buy one! Or hire someone to make a mobile-friendly version of your site. Apart from that, it just tells you how to verify if your site is mobile-friendly or has mobile usability issues.

Anyway, I freaked out a bit when I read the mail because I was expecting the worse, as usual! I was wondering what could it be, since I unblocked everything that was needed from robots.txt and everything was fine, except for some “Touch elements too close”, but that’s a development problem.

How to check what resources are blocked

I checked Mobile Usability in Google Webmaster Tools, and yes, it was a bit of a chaos. Over there, we had 13 pages (the mail said 12…) with errors regarding:

1. Touch elements too close. This means that the buttons and links are not far enough apart, but, as I said, that’s a theme development issue. Premium WordPress themes are not perfect and they will never be, except if you hire someone with exceptional knowledge to make one from scratch.
2. Content not sized to viewport. Basically, this means that a page requires horizontal scrolling or zooming out in order to view the whole content.

So, I clicked the second one, because the viewport is creating the critical mobile usability issues, and there I found all the faulty pages with blocked resources.

Keep in mind that these were just the ones with critical issues! The other pages had issues too, but somehow they weren’t critical.

If you want to find out how many of your pages have blocked resources, go to Google Index -> Blocked Resources in Google Webmaster Tools. There you will also find which resources are blocked.

Now, I took several of those links and checked them with Fetch and Render, which you can find in Crawl -> Fetch as Google.

Here’s how you do it:

1. Insert your URL in the box like this: your-page/. Don’t insert the whole link, with the domain and stuff. If you want to check your homepage, don’t insert anything in the URL box, leave it blank;
2. Choose Smartphone from that drop-down list;
3. Press the Fetch and Render button;
4. After the Googlebot finished analyzing your page, Partial (in our case) should appear under Status. Click on the row to find out more details, including the blocked resources that the Googlebot can’t get.

When performing these tests, “Complete” is the best status you can get, but “Partial” isn’t always bad, as you will find out. Other statuses from this list should worry your more.

Here’s how Googlebot saw the page VS how a user would have seen the page:

As you can see, the user wouldn’t have had a problem seeing the page properly on his phone (I checked myself), but the Googlebot can’t see, because it’s a bot, thus it needs to check and crawl all your scripts and stylesheets to make sure that you’re site is mobile-friendly.

That’s why you shouldn’t block JS and CSS files! So no more disallowing /wp-content/, /wp-includes/, etc.

Moving forward, I saw that these CDN resources were blocked (click to enlarge):

This is just one example. Some pages had less, more, or different resources blocked.

Seeing that, I said: “Oh, this should be easy… I’ll just talk to the MaxCDN support and they’ll unblock those resources.”. It wasn’t so easy, though. First, let me tell you that the guys/girls from MaxCDN’s support are just awesome. They are extremely nice, helpful and knowledgeable!

Now, after talking with someone there, I found out that I have to enable the custom robots.txt on my MaxCDN account and unblock the resources. What? I didn’t even know something like that existed. We haven’t been using MaxCDN for a very long time and we also haven’t explored it properly.

They said they aren’t authorized to help me with the custom robots.txt (don’t know why), but at least they told me the syntax is the same. I wasn’t sure about that, so that piece of information helped me. After doing some more research and reading some articles, just to make sure, I got the correct idea of what to do, so I started implementing the solution.

How to unblock the resources using MaxCDN’s custom robots.txt

• After logging in, look for Contact Zones at the bottom and click on Manage.

• Click the SEO tab;
• Enable Robots.txt and check the Use custom robots.txt box. Make sure you have the Canonical header enabled as well.
• Allow the resources you found as blocked after using Fetch and Render.

In our case, we only had to allow /wp-content/ and /wp-includes/. I chose to allow the whole main folder, because every link had different subfolders blocked: /wp-content/cache/, /wp-content/plugins/, /wp-content/themes/, etc.

I really didn’t want to spend time fetching and rendering 40 pages, just to pick the exact subfolders. After checking several links, I’ve noticed that there’s always /wp-conntent/ and /wp-includes/ involved, so I just allowed them. I’m not saying you should do the same, though.

After this, I used Fetch and Render on several links and the blocked resources were gone. I also checked several links with Google’s mobile-friendly tool and they passed the test! They used to fail before.

NOTE: After updating the robots.txt in your MaxCDN account, wait several minutes until using Fetch and Render again. I made the mistake of not waiting and I panicked when I saw that the problem wasn’t solved, but luckily I tried again several minutes later and it worked.

Now, even though the blocked CDN resources are gone, the status of the Fetch and Render is still Partial, because there are still three external links remaining (click to enlarge):

But I don’t have to worry about these external resources, which are quite common. The ssl.gstatic.com has to do with Google, and the others are from a social sharing plugin. I won’t get mobile usability issues because of them. Even Google says so in this post:

Webmaster Tools attempts to show you only the hosts that you might have influence over, so at the moment, we won’t show hosts that are used by many different sites (such as popular analytics services). Because it can be time-consuming (usually not for technical reasons!) to update all robots.txt files, we recommend starting with the resources that make the most important visual difference when blocked.

If there are external resources which are causing issues, then you should contact the site’s webmaster and ask him to unblock them.

Submitting your URLs to Google’s index

After solving the mobile usability issues, you can Submit to index, because the changes you made can influence your rankings in search results. When the changes aren’t important, you should avoid submitting your links to index. Submit to index will make Google crawl your new changes and index your page faster.

After pressing Submit to index, you have two choices:

1. Crawl only this URL. You are allowed to submit only 500 URLs per month.
2. This URL and its direct links. You are allowed 10 submissions per month for this option.

The first one will probably be your best choice. That’s what I usually use.

Conclusion

First of all, it’s very important to have your site submitted to Google Webmaster Tools, as you can see. GWT is getting more and more enhanced, and it’s a vital tool when it comes to your site’s status.

Secondly, it’s very important to check it once every few days, and don’t check just some parts of it, check all the important parts: mobile usability, blocked resources, crawling errors, sitemap, etc. New issues always appear, and it’s better to fix them as soon as possible.

And third, when you want to purchase a responsive theme for WordPress or other CMS, make sure you check it first, using tools like Google’s PageSpeed Insights, Mobile-Friendly Test, etc.

Hope you enjoyed the article and found it useful! If you have any questions or thoughts, please leave a comment!