Overview – When you perform a mobile-friendly test on your web page, it shows “your page is mobile-friendly”. But when you validate affected URLs in Google Search Console, It ends with a result as “your page is not mobile-friendly“.
So the problem here is webpage passes the mobile-friendly test when you manually check but return an error in Google Search Console Tool. This article will explain various reasons of the page isn’t usable on mobile and how to fix the issue.
Initially, I got the same error on this website for mobile pages. I checked many internet solutions to this issue, and according to all of them, the current Google mobile testing tool is not working properly. But I found that the tool is working as expected, and there is no error in its result. Let’s understand why a page is not mobile-friendly and how to fix it.
What are mobile-friendly web pages?
A web page is mobile-friendly when it satisfies the following requirements.
- The content fits within the mobile width – this is the main reason for GSC mobile-friendly issue.
- The text size is large enough to read,
- Clickable items are large enough to click.
The web pages that fit with the mobile screens, properly readable text size, and clickable elements are large enough to click. The content adjusts according to the screen width. So that mobile users can view a page in its initial view.
Google search console can display a mobile-friendly web page error even if a single line crosses the maximum screen width. This happens because the stylesheet CSS or function JavaScript file is not loading as expected. There may be a few other reasons; these are:-
- Missing maximum screen with tag,
- robots.txt file blocking the resources,
- Issues with the AMP page,
- Using 3rd partly overflow widget.
Page is NOT mobile-friendly – mobile usability test.
This error occurs when you check your webpage for mobile friendliness. There may be either one or both reasons from the two:-
- Your page may not use a mobile-friendly theme.
- Your content is wider than the screen.
If it is the first case, please use a mobile-friendly theme, and for the second, please review your content by visiting the site from your mobile device. Check whether it is wider than the screen or not. If there is no such issue, then follow the guide below.
In case you’re using pop-up windows, then it may be possible that the pop-up window you’re using is of fixed size for both mobile and desktop versions. In this case, your page is not responsive due to that pop-up only.
If you are not using a responsive theme or missing the viewport meta tag, this could be why. You’ve to implement the following code in between <head> and </head> section.
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>The robots.txt file blocks resources.
This error occurs when your page is mobile-friendly for all devices but not for Google Bots. And the search engine brings down the website in SERP. Unfortunately may lead to a loss of mobile users of the website. In other words, it affects the organic traffic of your website.
This is all due to the robots.txt file of your website. The function of the robots.txt file is to control the web crawlers/Bots to allow or disallow the section and provide the sitemap path. Suppose the current robots.txt file blocks the web crawler from accessing the page resources like JS or CSS files. These elements are responsible for a responsive website, and robots.txt prevents these resources, making the page not mobile-friendly.
How to fix the robots.txt issue?
For this, you’ve to make changes in the robots.txt file of your website or blog. In WordPress, the robots.txt file may not allow the crawler to crawl JS, CSS, or even the wp-content page. If you recently changed WordPress’s default robots.txt file, please revert all the changes. You can also apply the default robots.txt file.
The default robots.txt file for the WordPress
User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
Allow: /
Sitemap: https://example.com/sitemap_index.xmlAfter changing the robots.txt file, please validate the mobile-friendly page error. Then, you’ll get a message of a successful operation.
In the above robots.txt file, you allow the crawler to visit all the sections of the blog or website. That may cause duplicate content issues. To avoid this and boost the SEO of WordPress, install and set up Yoast SEO Plugin or Rank Math SEO plugin.
Mobile-Friendly in usability test, but NOT after validation.
If this is the case, when you check your page for Mobile-Friendly Test, the results show Your Page is mobile-friendly. But when you submit the page for validation in the Google Search Console, you receive an email stating that the problem is not solved after validation.
Now first, we’ve to understand the problem. Which section is wider than the screen after the validation result? Is your webpage support AMP? Then you’ve to check whether your AMP page has issues.
That means the mobile version of your website is mobile-friendly but not the AMP version.
Perform Mobile-Friendly Test for Google
In the above case, you must check mobile usability in Google Search Console. Please do not perform the Mobile-Friendly Test, which will display an error after validation. To do this, perform a live site test to demonstrate the final result. You can try it by disabling the AMP page and enabling the AMP pages.
When you perform the above test for mobile usability in Google Search Console, it will give you the final result you may expect. Suppose you got errors with the AMP-enabled page and no error after disabling AMP. In such a case, try changing the CSS for the object, causing the AMP version’s errors or disabling the AMP for the particular page.
The Page resource couldn’t be loaded, other errors.
If the above two methods fail, page resources could be the reason. The website breaks the connection for Google bots.
In such a case, contact your hosting provider to increase the connection time out or request a time of at least 60 seconds for your website. That means the connection can stay for 60 seconds, at least for a session, to load all resources.
Conclusion
In this tutorial guide, we understood all the causes of the mobile-friendly issue of your website. The methods we discussed are:- page is loading pop-ups that are not mobile-friendly, resources are blocked by robots.txt file, AMP issue, and server timeout error.
I hope this article helps you fix the mobile-friendly error for Google Search Console. In case of any doubt, feel free to ask in the comment section below. Thank you.
thank you so much, could you please help me to fix my site issue
I have read your full Blog. Your blog is Great. Can you fix my website issue, please? Four issues were detected by the google search console regarding mobile usability on my website. I am unable to correct the issue on my website.
1. Text Too small
2. Clickable Elements too Close together
3. Content wider than screen
4. Viewport not set
Please help me.
Please
Sania. This worked for me on number 4. Viewport not set:
Add this line anywhere in the head of your page:
Thanks. I’ve just allowed some directories on robots txt. I hope this will fix the issue.
Hello Sir
By web site not crawling Can you suggest
https://www.outsourcebimservicesindia.com/
Thanks for your info my site have same issues.