Got scared when the “Googlebot Cannot Access CSS and JS files” appeared on your screen? Whether it showed up on the Dashboard of your Google Webmaster Tools page or in form of an e-mail from Google, let the feeling pass. The damage likely isn’t done yet, and won’t be, as long as you act quickly. If you don’t, your WordPress website can take a huge hit, because your Google rankings will go down. And why would you risk it? As long as you stick to the instructions below, the solution isn’t too complicated. Here’s how to fix “Googlebot cannot access CSS and JS files” error in WordPress.
Why does Google ask for access to your CSS and JS files?
In short, because it’s in their interest to recommend fast and responsive websites with a good user experience, and CSS and JS play a major role next to the actual content. Furthermore, accessing and analyzing CSS and JS tells Googlebot whether the website is mobile-friendly, which is very important nowadays. We already mentioned the penalty if you don’t resolve the issue.
Why am I experiencing the “Googlebot cannot access CSS and JS files” error?
Most likely, you installed a security WordPress plugin (or any WordPress plugin or theme that caused conflict), played around with WordPress configuration, appointed a new website Administrator, or your hosting applied such changes.
Whatever the case might be, the problem can be resolved by following these 3 major steps to locate blocked files, then unblock them.
Steps required to display a list of blocked JS and CSS files
Before we start, we need to clarify something. Google Search Console tools was previously named Google Webmaster tools. Besides the name change, the options are nearly identical. Here’s how to see a list of CSS and JS files that are forbidden to the Googlebot:
- After you’re logged in, head over to the Google Search Console page.
- In the left-hand side menu, click on Crawl, then select Fetch as Google.
- Leave the text field blank and click on Fetch and Render.
- After a few seconds, you’ll see two screenshots of your website homepage.
Certain elements will be missing from the screenshot on the left side. - The URLs of the CSS and JS elements that were forbidden to Google will appear in the list below.
Click on the robots.txt Tester option next to the element (Optional)
After you do this, Google Search Console will show your WordPress website robots.txt file on-screen. It will also highlight the line in the code that’s blocking that element. Unless there are only a few CSS/JS files on the list, which is unlikely, it’s not worth wasting time clicking on each one separately. We recommend proceeding to the set of instructions below.
Guide to edit robots.txt in WordPress
The robots.txt file is responsible for defining access permissions to various bots and crawlers, including Google’s. To solve the “Googlebot cannot access CSS and JS files” error in WordPress, you must reconfigure its contents.
Here are two ways to view the robots.txt file in WordPress:
1. Use YoastSEO File Editor
If you installed a WordPress plugin named YoastSEO, use this shortcut:
- Access your WordPress Admin Section.
- In the menu on the left, click on SEO.
- When it expands, select Tools.
- Select File Editor.
- Navigate to the contents of your robots.txt file.
2. Access robots.txt via FTP
We’ve made an entire guide on how to access your WordPress website via FTP. Once you do that, proceed in this way:
- Look for the robots.txt file in the root folder. It might be titled public_html or www)
- Right-click on the file and select View/Edit.
- The text document will open.
Getting rid of the CSS and JS warning by deleting certain lines in robots.txt
Regardless of the method you used, depending on your WordPress configuration, you’ll most likely see these lines in robots.txt:
User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/
As you can see, Googlebot is forbidden from accessing the listed directories, which is the source of the “Googlebot cannot access CSS and JS files” WordPress error. But which directory, precisely?
How to determine which line to delete
Unless you followed the “optional step” tens of times, there’s no precise answer. Instead, we recommend using this troubleshooting guide to narrow down the issue:
- Delete the Disallow: /wp-includes/ line and save changes.
- Use Google Search Console’s Fetch and Render tool again.
- Check whether there are still files ending in .css and .js on the list.
- If there are none, and both screenshots look identical, you’ve solved the problem.
However, we still recommend continuing. These steps can stop the “Googlebot cannot access CSS and JS files” warning from appearing again:
- Delete both Disallow: /wp-content/plugins/ and Disallow: /wp-content/themes/ lines, and save the robots.txt file.
- The error should be gone now. Verify this by running the Fetch and Render tool again.
- In the unlikely chance that it’s not, use the tool again and delete the highlighted line. The number of CSS or JS files should be very small at this point.
What to do if robots.txt is empty or doesn’t exist
This defies logic – if there’s nothing blocking the Googlebot, you shouldn’t get the error. In this case, your hosting is actively blocking the bots instead. Luckily, you can try to resolve the non-existent robots.txt problem by doing this:
- Create a robots.txt file of your own, in the same folder (root/public_html/www).
If the file is there but empty, skip this step. - Invert the process by adding these two lines:
User-agent: *
Allow: /wp-includes/ - Save the changes and utilize the Fetch and Render tool.
- If you see more blocked JS or CSS lines, add these lines underneath:
Allow: /wp-content/plugins/
Allow: /wp-content/themes/ - If this didn’t solve the problem, stop. Contact your hosting Customer Service instead. You’re entitled to it, and they’re responsible and available 24/7.