It’s been a couple days since “Mobilegeddon” was unleashed onto the world by Google. The search engine’s new mobile-friendly first algorithm looks at websites and if they are not mobile-friendly, they plummet in the search results on mobile devices. Surprisingly, or maybe not, a large percentage of top websites are not mobile friendly (up to 40% of Top Sites according to USA TODAY). This will result in a huge cost for companies to either adapt their current website to mobile or perform a complete rebuild. Of course as a web developer both full time and as a freelancer, I could not be happier 🙂 !
But that’s not what this post is about, this post is designated to those that have already made their website mobile-friendly, through responsive design (which should always be the way IMHO) or by creating a separate mobile site. You spent 10’s maybe 100’s of hours creating an amazing website that looks great no matter what device a user is using, yet when you test your website on Google’s Mobile Friendly Testing Tool your site suddenly comes up as Not Mobile-Friendly!
What’s wrong? Your site is responsive, when you look at it on your phone it looks great, the links are all clickable, images are scaled appropriately, navigation is useable – yet Google says your site isn’t mobile-friendly?
It says your links are too close together, text is hard to read, page size is wrong, etc. and shows you an image of your site. But take a close look at that image…
Now I know this website is mobile-friendly, I built it as so. But in Google the screenshot looks like a full site with no, or partial styling. This is why Google thinks your site is not mobile-friendly, because it sees your website this way. The reason is most likely due to resources being blocked by Google, either deliberately in your robots.txt file or even not specifically allowed in your robots.txt file as in my situation.
The Collaborative for Educational Services website is built using Drupal 7, a very popular open source CMS framework, and has a lot of caching and performance enhancing configuration setup in order to allow it to run as smooth as possible. One of the things we do is compress our CSS and JS files. This creates a cached file of all the CSS and another for all the JS and sticks it into a separate folder than our theme. Google doesn’t pick this up, resulting in none or partial styling being rendered in their tester.
In order to fix this, you need to specifically allow Google to view your CSS and JS folders. In this case, the problem lies in the cached locations, which are at:
/sites/default/files/css and /sites/default/files/js
To do so, open your robots.txt file in the root of your website directory. If you do not have one, create a new one and add the following:
User-agent: * Crawl-delay: 10 # JS/CSS Allow: /sites/default/files/css/*.css Allow: /sites/default/files/js/*.js
The 2 Allow lines tell Google or any other search engine crawler to look at any .css or .js file located in /sites/default/files/css and /sites/default/files/js folders.
Now let’s see what Google’s Mobile-Friendly Tester says about our site…
Yay! Everything looks as it’s supposed to and we are now verified as a Mobile-Friendly website!
The solution above is specific to Drupal, if you run a website that does not rely on a CMS framework, or any other preinstalled site building files, you will want to change this path to your site’s CSS and JS folder.
I hope you will find this post helpful!