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 this is not the truth; the tool is working perfectly, 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.
👉JOIN OUR WHATSAPP GROUP 1 FOR QUICK MOVIES UPDATES👈
- 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 may happen due to the stylesheet CSS or function JavaScript file 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.
The 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 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. 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. If 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 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 allow the crawler to crawl JS, CSS, or even the wp-content page. If you recently made changes to 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.
Initially, the page is Mobile-Friendly, 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. 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 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.
