Tips to resolve the new warning “Googlebot cannot access CSS and JS files”

Google Search Console has begun sending out a new warning ‘Googlebot cannot access CSS and JS files’ to webmasters who are blocking CSS and JavaScript on their websites.

This warning message means that your robots.txt file is telling Google not to use some of your CSS and/or Javascript files.

Google needs these files to test your site for mobile friendliness. Without them, your website ranking will go down.

This is not a penalty notification, but a warning that if Google cannot see your whole site, it may end up in poor website rankings.

This new warning is sent via both an email and as an alert in Google Search Console for affected websites. It is all about Google’s new focus on responsive design.

In this blogpost, we will explain you how to fix this warning “Googlebot cannot access CSS and JS files” on your WordPress site.

First of all, let us know why Google needs access to CSS and JS Files?

A web page relies on the availability of my_script.js, which is typically run by web browsers to provide the browsers with the core textual content of the page. If my_script.js is blocked from Google, we won’t be able to get the text content when Googlebot renders the web page.

Google is intensive on providing better search rankings to user friendly websites i.e. sites that are fast, have good user experience, etc. In order to find out the user experience of a website, Google needs access to visit the site’s CSS and JavaScript files.

By default, search bots are not prevented by WordPress from accessing CSS or JS files and this blocking is caused by some site owners who accidentally block them while trying to add further security measures or by using a WordPress security plugin.

This controls Googlebot from indexing CSS and JS files which may influence your website’s SEO performance.

How to Give Google Access to Your CSS and JS Files?

To give access to your .css and .js files, you need to first know which files in your site are being blocked from Google.

You can see how Googlebot sees your website by clicking on Crawl -> Fetch as Google in Google Search Console. Next, click on fetch and render button.

You can find the accurate resources that are blocked by Google by clicking on the “Show resources” link on the right-hand-side of Google’s tester and compare the files there to your robots.txt file to find out what needs unblocking.

You can also find a list of these blocked resources under Google Index -> Blocked Resources.
Clicking on each resource will show you the links to actual resources that cannot be accessed by Googlebot.

Most of the time, these are CSS styles and JS files added by your WordPress plugins or theme.

301 Redirect

Now you will need to edit your site’s robots.txt file by connecting to your site using an FTP client. The robots.txt file will be in your site’s root directory.

Look through the robots.txt file for any of the following lines of code:

  • Disallow: /.js$*
  • Disallow: /.inc$*
  • Disallow: /.css$*
  • Disallow: /.php$*

If you see any of these lines, remove them immediately because these lines only blocks Googlebot from crawling the files which it needs to render your website.

The next step is to run your site through Google’s Fetch and Render tool, which will confirm whether you have fixed the problem or not. If Googlebot is still being blocked, then Google’s Fetch and Render tool will provide you additional instructions on the changes to be made to the robots.txt file.

In addition, you can use the robots.txt testing tool in google Search Console to find out if there are further crawling issues.

How to edit robots.txt file through Yoast SEO Plugin ?

First, Log in to your WordPress admin

Then, Go to SEO -> Tools and Click on File Editor menu

Make the changes to your robots.txt file and save your changes.

If the site root does not contain a physical file, then WordPress generates a virtual robots.txt file. To override the virtual file, please follow these steps to create a physical robots.txt file.

  • Use your favorite text editor and create a text file.
  • Save the empty file with the name robots.txt.
  • Upload the file to your server root.

404 Errors

Now compare your fetch results, and you will see that most blocked resources issue should disappear now.

We hope this blogpost helps you in resolving ‘Googlebot cannot access CSS and JS files’ error on your WordPress site.