How to Diagnose and Solve JavaScript SEO Issues in 6 Steps

How to Diagnose and Solve JavaScript SEO Issues in 6 Steps

Step 1: Use the URL inspection tool to see if Google can render your content The URL inspection tool (formerly Google Fetch and Render) is a great free tool that allows you to check if Google can properly render your pages. You blocked crucial JavaScript files for Googlebot. Step 2: Make sure you didn’t block JavaScript files by mistake If Google cannot render your page properly, you should make sure you didn’t block important JavaScript files for Googlebot in robots.txt TL;DR: What is robots.txt? The previous Google Fetch and Render had such an option: Advanced Now, we can use Chrome Developer Tools for that. For educational purposes, we will be checking the following URL: http://botbenchmarking.com/youshallnotpass.html Open the page in the most recent version of Chrome and go to Chrome Developers Tools. Step 3: Use the URL Inspection tool for fixing JavaScript errors If you see Google Fetch and Render isn’t rendering your page properly, it may be due to the JavaScript errors that occurred while rendering. Step 4: Check if your content has been indexed in Google It’s not enough to just see if Google can render your website properly. You have to make sure Google has properly indexed your content. Step 5: Make sure Google can discover your internal links There are a few simple rules you should follow: Google needs proper links to discover the URLs on your website. Checking if Google can see menu links Another important step in auditing a JavaScript website is to make sure Google can see your menu links.

The Simplified Guide to Google’s RankBrain Algorithm
How to Be the Content in the Enviable Google Answer Box
Amazon to Test New Ground for Its Sponsored Products Ads: the Rest of the Internet

It’s rather common for companies to build their websites using modern JavaScript frameworks and libraries like React, Angular, or Vue. It’s obvious by now that the web has moved away from plain HTML and has entered the era of JS.

While there is nothing unusual with a business willing to take advantage of the latest technologies, we need to address the stark reality of this trend: Most of the migrations to JavaScript frameworks aren’t being planned with users or organic traffic in mind.

Let’s call it the JavaScript Paradox:

  1. The big brands jump on the JavaScript hype train after hearing all the buzz about JavaScript frameworks creating amazing UXs.
  2. Reality reveals that JavaScript frameworks are really complex.
  3. The big brands completely butcher the migrations to JavaScript. They lose organic traffic and often have to cut corners rather than creating this amazing UX journey for their users (I will mention some examples in this article).

Since there’s no turning back, SEOs need to learn how to deal with JavaScript websites.

But that’s easier said than done because making JavaScript websites successful in search engines is a real challenge both for developers and SEOs.

This article is meant to be a follow-up to my comprehensive Ultimate Guide to JavaScript SEO, and it’s intended to be as easy to follow as possible. So, grab yourself a cup of coffee and let’s have some fun — here are six steps to help you diagnose and solve JavaScript SEO issues.

Step 1: Use the URL inspection tool to see if Google can render your content

The URL inspection tool (formerly Google Fetch and Render) is a great free tool that allows you to check if Google can properly render your pages.

The URL inspection tool requires you to have your website connected to Google Search Console. If you don’t have an account yet, check Google’s Help pages.

Open Google Search Console, then click on the URL inspection button.

In the URL form field, type the full URL of a page you want to audit.

Then click on TEST LIVE URL.

Once the test is done, click on VIEW TESTED PAGE.

And finally, click on the Screenshot tab to view the rendered page.

Scroll down the screenshot to make sure your web page is rendered properly. Ask yourself the following questions:

  • Is the main content visible?
  • Can Google see the user-generated comments?
  • Can Google access areas like similar articles and products?
  • Can Google see other crucial elements of your page?

Why does the screenshot look different than what I see in my browser? Here are some possible reasons:

Step 2: Make sure you didn’t block JavaScript files by mistake

If Google cannot render your page properly, you should make sure you didn’t block important JavaScript files for Googlebot in robots.txt

TL;DR: What is robots.txt?

It’s a plain text file that instructs Googlebot or any other search engine bot if they are allowed to request a page/resource.

Fortunately, the URL Inspection tool points out all the resources of a rendered page that are blocked by robots.txt.

But how can you tell if a blocked resource is important from the rendering point of view?

You have two options: Basic and Advanced.

In most cases, it may be a good idea to simply ask your developers about it. They created your website, so they should know it well.

Obviously, if the name of a script is called content.js or productListing.js, it’s probably relevant and shouldn’t be blocked.

Unfortunately, as for now, URL Inspection doesn’t inform you about the severity of a blocked JS file. The previous Google Fetch and Render had such an option:

Advanced

Now, we can use Chrome Developer Tools for that.

For educational purposes, we will be checking the following URL: http://botbenchmarking.com/youshallnotpass.html

Open the page in the most recent version of Chrome and go to Chrome Developers Tools. Then move to the Network tab and refresh the page.

Finally, select the desired resource (in our case it’s YouShallNotPass.js), right-click, and choose Block request URL.

Refresh the page and see if any important content disappeared. If so, then you should think about deleting the corresponding rule from your robots.txt file.

Step 3: Use the URL Inspection tool for fixing JavaScript errors

If you see Google Fetch and Render isn’t rendering your page properly, it may be due to the JavaScript errors that occurred while rendering.

To diagnose it, in the URL Inspection tool click on the More info tab.

Then, show these errors to your developers to let them fix it.

Just ONE error in the JavaScript code can stop rendering for Google, which in turn makes your website not indexable.

Your website may work fine in most recent browsers, but if it crashes in older browsers (Google Web Rendering Service is based on Chrome 41), your Google rankings may drop.

Need some examples?

  • A single error in the official Angular documentation caused Google to be unable to render our test Angular website.
  • Once upon a time, Google deindexed some pages of Angular.io, an official website of Angular 2+.

If you want to know why it happened, read my Ultimate Guide to JavaScript SEO.

Side note: If for some reason you…

COMMENTS

WORDPRESS: 0
DISQUS: 0