Is the Google Search Console showing you the “Googlebot cannot access CSS and JS files” error in your WordPress website? This error message is mostly sent to you as an email or indicated on your Google Search Console dashboard. It usually comes with links to instructions showing you how you can fix the issue, but sometimes the instructions may be a little complicated. In this article, I will show you how to fix the “Googlebot cannot access CSS and JS files” error in WordPress.
Why Does Google Need Access To Your CSS and JS Files?
Google uses the CSS and JavaScript files to analyze the performance of a website and check if the website offers a user-friendly experience, thereby determining its ranking. Googlebot also uses CSS and JavaScript files to analyze if the website is mobile-friendly.
Blocking the Googlebot from accessing the CSS and JS files on your website is not a good idea, but sometimes a security plugin or you may accidentally block them.
This could block the Googlebot from indexing the CSS and JS files, affecting the SEO of your website and reducing your site’s ranking.
Now let’s see how to fix the “Googlebot cannot access CSS and JS files” error in WordPress.
How to Fix “Googlebot Cannot Access CSS and JS Files” Error in WordPress
First, you have determined which of the files on your site the Google bots are unable to access. You can do this using the Google Search Console tools.
Simply log into the Google Search Console dashboard, then on the menu at the left-hand side of the page, click Crawl and select Fetch as Google. This will display your website to you as it is seen by the Googlebot.
Now click on Fetch and Render, and then wait for a few seconds. Two screenshots will appear showing you what the user sees and what Googlebot sees when they visit your site’s homepage.
If certain elements that are in the right screenshot are missing from the left screenshot, which means Googlebot is unable to access the CSS/JS files of your website.
A list containing the links of CSS and JS elements that the Googlebot is unable to access will appear below.
You can also click on Google Index and select Blocked Resources to see links to all the resources on your site which are inaccessible to the Googlebot.
Once you have found the entire file on your website that is causing the “Googlebot cannot access CSS and JS files” error, you will now need to access your website using an FTP client and edit your robots.txt file.
Once you have connected the FTP client to your website, go to the root directory (usually titled public_html or www) to find the robots.txt file. Once you find the robots.txt file, right-click and select View/Edit.
You can also use the Yoast SEO plugin to edit your robots.txt file. Simply go to your WordPress admin dashboard, select SEO > Tools, then click on File Editor.
You will mostly see these lines in your robots.txt, indicating that access has been disallowed to some WordPress directories on your website:
User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/
If you find these lines, it simply indicates that Google’s access to your site’s CSS and JS files is being blocked and you have to remove these lines.
First start with removing the Disallow: /wp-admin/ line, then save the changes, and run the Fetch and Render again. If both screenshots are the same, with no missing elements, then that means the error has been fixed.
But to stop the “Google cannot access CSS and JS files” error from appearing again, you will have to delete both the Disallow: /wp-content/plugins/ and Disallow: /wp-content/themes/ lines and save the changes to the robots.txt file.
When you are done, go back to the Google Search Console and run the Fetch and Render again. This way you will ensure that the error is gone.
But there are times when you check for the robots.txt file but the file is empty or doesn’t even exist. In such cases, the reason for the error is probably because your hosting providers are actively blocking the bot’s access to default WordPress folders.
To fix this issue, you will have to your own robots.txt file to override the file’s blocked access.
Simply go to your root directory, create the robots.txt file and add the following lines:
User-agent: *
Allow: /wp-includes/js/
When you are done, save the robots.txt file and go back to your Fetch and Render tool.
If you still receive more blocked CSS and JS lines, go back and add these lines to your created robots.txt file.
Allow: /wp-content/plugins/
Allow: /wp-content/themes/
These should fix the “Google cannot access CSS and JS files” error. But if you keep getting the error message, you should go ahead and contact your web hosting providers for assistance.