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 ended 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. In this article, we’ll explain the mobile-friendly issue of the webpage in detail. Let’s dig in.
Initially, I got the same error on this website for mobile pages. I checked many solutions on the internet to solve this issue but found that the current Google mobile testing tool is not working properly. But this is not the truth; the tool is working perfectly, and there is no error in its result. Let’s understand the reasons for a page is not mobile-friendly and how to fix it.
What are mobile-friendly web pages?
The web pages that fit with the mobile screens are mobile-friendly. The content adjusts according to the screen width. So that mobile users can view a page in its initial view.
- Missing maximum screen with tag,
- robots.txt file blocking the resources,
- An issue in the AMP page,
- Using 3rd partly overflow widget.
Your page is not mobile-friendly in the mobile usability test.
This error occurs when you check your webpage for mobile friendliness. And it is all because your page may not use a mobile-friendly theme, or your page content is wider than the screen.
If it is the first case, please use a mobile-friendly theme, and for the second case, 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 if 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
<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 the devices but not for google bot. 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 to allow or disallow the section and provide the sitemap path. If the current robots.txt file blocks the web crawler from accessing the page resources like JS or CSS files. That is responsible for a responsive website, and robots.txt prevents the resources, resulting in the page not being mobile-friendly.
How to fix this 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 permit the crawler to crawl JS or CSS or even the wp-content page. If you recently made changes with 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.xml
After 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.
The page is Mobile-Friendly initially, but after validation shows the same error.
If this is the case, when you check your page for Mobile-Friendly Test, the results show Your Page is mobile-friendly, and when you start validation of the page for errors in the Google Search Console. But still, after validation, you receive an email stating that the problem is not solved.
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’ve to check mobile usability in Google Search Console. Please do not perform the Mobile-Friendly Test, as that 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 AMP pages.
When you perform the above test for mobile usability in Google Search Console, it will give you the final result that you may expect. Suppose you got errors with the AMP-enabled page and no error after disabling AMP. In such a case, try changing 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 error.
If the above two methods failed, 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 time out 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.
In this tutorial guide, we understood how to solve the mobile-friendly test 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 in fixing the mobile-friendly error for Google Search Console. In case of any doubt, feel free to ask in the comment section provided below. Thank you.