How to Fix ? “Your page is not mobile friendly”

In this article, we will troubleshoot the error thrown by google – “Your page is not mobile friendly” for a page on search

Example

Here is an example of the error shown by Google

Why this happens ?

When you see this error it can mean 2 things –

1- Your website actually is’t mobile friendly, and you should make sure you take necessary steps to make it mobile compatible.

On a CMS say – WordPress you can use a different theme that is mobile friendly to solve the issue or on a static HTML site improving CSS and using Media queries like in example below to style your site better

@media only screen and (max-width:620px) {

  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}

Here is a tool that I have built using pure HTML, CSS and JavaScript that is mobile compatible, you can check it’s code for guidance.

Also if you have a cache plugin in place make sure to clear your cache before re-running google mobile friendly test.

2- If you are seeing this issue on a mobile friendly website, step below will help solve that. For your website to get “page not mobile friendly” error it doesn’t necessarily have to be unresponsive, this issue can also be seen due to other reasons like google bot being unable to read all the files on the page.

Which can happen due to a restrictive robots.txt file, blocking access to Google bot for important directories and files of your website like style.css

When Google Bot access these files it means it can’t see your website properly when it scans it. Thats why it complains, and gives out a warning.

Let’s cover the Full topic through Video Tutorial

Video contains problem description and solution.

After you have seen the video you will have an understanding of the issue and solution.

Here is an example of restrictive robots.txt file for which google complains.

Here we are blocking important directories like “wp-content” and “wp-includes” from being seen by bots including google bot. And these folders together contain theme and plugin files which are important for the website to work and search bots to have access to crawl to be able to render these.

Performing Google Mobile-Friendly Tests and Solving the issue

Upon taking the Google Mobile-Friendly Test for the first time these are my results –

Where google doesn’t like the page and says it’s not mobile friendly and on the right hand side it shows a preview of how it see’s the website, and we can see it isn’t being able to render the page well, cause in reality my page is mobile compatible.

And if I dig a bit more into it, I can see google is partially loading and seeing the page which can be a problem for my SEO and Search rankings.

And with a little more digging, we can see all the files blocked by robots file and many of them are core CSS files of the website.

Loosening the grip on Robots file

Let’s loosen the restrictive nature of the file to allow css and js files readability by Google Bot to solve the issue.

Here is an example:

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes
Allow: /wp-admin/admin-ajax.php
Allow: /wp-content/plugins/.js
Allow: /wp-content/themes/.js
Allow: /wp-content/themes/.css
Allow: /wp-content/cache/.js
Allow: /wp-content/cache/.css
Allow: /wp-includes/.js
Allow: /wp-includes/*.png

Save the file. Job done, at this time you may want to do some quality assurance testing basically making sure the issue is fixed by taking the test again.

Fun fact: Many people these days are choosing to use empty robots files on their websites, you may also want to try, here is a good read from Yoast

1 – Take Google’s Mobile-Friendly Test for your website here: GOOGLE TEST MY WEBSITE

2- Enter your website URL and see the results.

3- Submit the page to Google’s index queue.

Final Results

Final results of this troubleshooting session below –

All looks good. Hurray

Hope the article was helpful in solving the issue for you.