Your wordpress blog is mobile friendly (or in other words fully responsive), and yet when you test your blog using Google's Mobile Friendly Test tool, you get 'Not Mobile-Friendly' message for some pages on your site and the reasons cited are as follows:
- Content wider than screen/Content not sized to viewport.
- Touch elements too close/Links too close together.
Let's see why this happens and how this can be rectified.
Check to See if the Webpage in Question is Responsive
Mobile friendliness is not website specific but web page specific. Or in other words, even if the homepage and article pages of your blog are fully responsive, there is a possibility that your contact page might be unresponsive.
So start by testing the specific page which fails Google's mobile responsive test using an independent tool like the one offered by Studiopress. Just enter the URL of the page in the space provided and click enter to start the test. Check to see if the page is loading properly for all screen resolutions.
If your site fails this test for some resolutions, you might want to make changes to your CSS media queries to make your site responsive for all screen widths.
Now let's see how this can be resolved by identifying and unblocking blocked resources.
Using Google Webmaster Tools to Identify Blocked Resources
A simple way to identify resources that are being blocked is to use Google's Webmaster Tools.
To do this, Login to your Google Webmaster Tools and go to Crawl > Fetch as Google
Once here, enter the path to your page, select SmartPhone and then click on 'Fetch and Render' as shown in the image below:
If the status of the Fetch and Render shows 'partial' then it means that some resources on that particular page have been blocked from crawler access. To get a list of these blocked resources, click on the listing and you should be taken to a page with a list of blocked resources as shown in the image below:
Check to see if your root or folder level Robots.txt file or .htaccess file is blocking any of these resources and unblock them.
Alternative Method: Instead of checking page by page, you can get a list of all blocked resources by going to Google Index > Blocked Resources. Here are the steps to do this:
- Login to your Google Webmaster Tools and go to Google Index > Blocked Resources.
- Click on your website name under Host to be taken to a page with a list of all blocked resources.
- Click on individual blocked resources to be taken to a list of pages using that blocked resource.
- Click on any one page URL and then Click on 'Robots.txt Tester' in the following page.
- The Robots.txt tester page should tell you what part of your Robots.txt file is blocking this resource.
Editing Your Robots.txt File
Once you have identified the blocked resources, you need to now edit your Robots.txt file to unblock them.
So check to see if your Robots.txt file is blocking wp-contents folder. If that is the case, add the following to the top of your Robots.txt page right below User-agent*:
User-agent: * Allow: /wp-content/uploads/ Allow: /wp-content/themes/
You can also only allow Googlebot-Mobile to access required resources as follows:
User-agent:Googlebot-Mobile Allow: /wp-content/uploads/ Allow: /wp-content/themes/
To be more specific you can allow access only to the Style and JS folders of certain plugins and the theme that you are using:
Making Ads and Externally Hosted Resources Responsive
If you are running ads on your site, temporarily remove these ads and test your site. If the test passes, then try making your ads responsive. Similar remove any externally hosted resources present on your page and see if your page passes the test. If so, you will need to make those external resources responsive.
If you are using plugins to add extra functionality to your site namely a gallery or a author box or social media links, make sure that these units are responsive. Also make sure that the CSS and JS for these plugins are accessible and are not blocked from crawlers.