1. Why JavaScript is dangerous for SEO: real-world examples
  2. Some things you need to know about google-javascript relationships
  3. JavaScript SEO best practices
  4. Tools to debug JavaScript implementation for SEO

JavaScript is a great option for making web pages more interactive and less boring.

But it's also a great way to end a website's SEO if it's implemented incorrectly.

Here's a simple truth: even the best things in the world have to be found.

No matter how good your website is, you'll be missing out on accessibility if Google can't index it due to JavaScript issues.

This post will tell you everything you need to know about JavaScript SEO best practices, as well as the tools you can use to troubleshoot JavaScript issues.

Why JavaScript is dangerous for SEO: real-world examples

“Since we redesigned our website in React, our traffic has dropped dramatically. What happened?"

This is just one of the many questions I've heard or seen on forums.


Read on below

You can replace React with another JS framework. it doesn't matter either of them can break a website if implemented without considering the SEO implications.

Here are some examples of what can potentially go wrong with JavaScript.

Example 1: The website navigation cannot be crawled

Website is not crawlable: JS SEO error

What is wrong here:

The links in the navigation do not comply with web standards. As a result, Google cannot see or follow them.


Read on below

Why is it wrong:

  • This makes it difficult for Google to determine the internal pages.
  • Authority within the website is not properly distributed.
  • There is no clear evidence of relationships between the pages of the site.

As a result, a website with links that Googlebot cannot follow cannot use internal linking.

Example 2: The image search has decreased after improper implementation of Lazy Load

Image search decreased after improper implementation of Lazy Load

What is wrong here:

Lazy loading is a great way to reduce page load time. However, if implemented incorrectly, this can also be dangerous.

In this example, the delayed loading prevented Google from seeing the images on the page.

Why is it wrong:

  • The content “hidden” during delayed loading may not be recognized by Google (if implemented incorrectly).
  • If the content is not discovered by Google, the content will not be rated.

As a result, image search traffic can suffer greatly. This is especially important for companies that rely heavily on visual search.

Example 3: The website was switched in such a way that it reacts without taking SEO into account

The website has been set to respond without taking SEO into account

What is wrong here:

This is my favorite example from a website that I checked out a while ago. The owner came to me after all the traffic was just filling up. It's like they accidentally tried to kill their website:


Read on below

  • The URLs could not be crawled.
  • The images were not crawlable.
  • The title tags were the same on all websites.
  • There was no text content on the internal pages.

Why is it wrong:

  • If Google doesn't see any content on the page, that page will not be rated.
  • If multiple pages look the same to Googlebot, only one of them can be selected and the rest can be canonicalized for Googlebot.

In this example, the web pages looked the same to Google, so they were deduplicated and the home page used as the canonical version.

Some things you need to know about google-javascript relationships

When it comes to how Google treats your content, there are a few important things to know.

Google does not interact with your content

Googlebot cannot click the buttons on your pages, expand / collapse the content, etc.


Read on below

Googlebot can only display the content in rendered HTML with no additional interaction.

For example, if you have an expandable section of text and its text is available in source code or rendered HTML, Google will index it.

On the contrary, if you have a section where the content is not initially available in the page source code or DOM and only loads after a user has interacted with it (e.g., clicked a button), Google won't get that content displayed.

Google doesn't scroll

Googlebot doesn't behave like a normal user of a website. The pages are not scrolled. So if your content is "hidden" behind an endless number of scrolls, Google won't see it.

See: Google's Martin Splitt for Indexing Pages with Infinite Scroll.

Google does not see the content that is only being rendered in a browser or on a server.

This is why client-side rendering is a bad idea if you want Google to index and rate your website (and when you need traffic and sales).


Read on below

Ok, is JavaScript really that bad?

Not when JavaScript is implemented on a website using best practices.

And that's exactly what I'll cover below.

JavaScript SEO best practices

Add links according to web standards

While "web standards" can sound intimidating, it really just means that you should link to internal pages using the HREF attribute:

Your relevant anchor text

That way, Google can easily find the links and follow them (unless you add a nofollow attribute to them, but that's a different story).

Do not use the following techniques to add internal links on your website:

By the way, the last option can still be used successfully on a page if you want to bring people to a specific part of that page.

However, Google does not index every single variation of your URL with the "#" suffix.


Read on below

See: Google SEO 101: Do & # 39; s and Don & # 39; s of Links and JavaScript.

Add images according to web standards

As with internal links, image usage should also conform to web standards so that Googlebot can easily recognize and index images.

In order to be discovered, an image should be linked via the HTML tag "src":

Many JavaScript-based lazy loading libraries use a "data-src" attribute to store the URL of the real image and replace the "src" tag with a placeholder image or GIF that loads quickly.

For example:

saves additional information about the image.

It helps optimize page speed and works well when implemented correctly.

If you want Google to capture your real picture instead of the placeholder, this is how you swap the placeholder image for the target image shows the path to the target image.

During the last Google Search Central Live event, I created a live case study debugging issues with images being delayed loading using a JavaScript library.


Read on below

Alternatively, you can remove JavaScript using native deferred loading. Many browsers now support this.

Use server-side rendering

If you want Google to read and rate your content, make sure that content is available on the server, not just on a user's browser.

Alternatively, you can use dynamic rendering, which detects search engines and serves static HTML pages while serving HTML + JavaScript content to users in their browsers.

Make sure that the rendered HTML has all of the important information you want Google to read

You need to make sure that the correct information is displayed in the rendered HTML, such as:

  • Copy on the side.
  • Images.
  • Canonical label.
  • Title & Meta Description.
  • Meta robot tag.
  • Structured data.
  • hreflang.
  • All other important tags.

You need to make sure that rendered HTML is displaying the correct information.

Gone are the days when you only had to check the source code of a page to verify that it contained the correct content.


Read on below

JavaScript has made it more complicated in that it can add, remove, or change various elements. A look at the source code is not enough. Instead, you need to review the rendered HTML.

Step 1: Check the extent to which a website relies on JavaScript to serve the content

The first thing I usually do when I see a website that is based on JavaScript is to check how much it depends on it. The easiest way to do this is to disable JS in your browser.

I'm using the Web Developer Chrome Extension for this.

Simply open the settings, click on Disable JavaScript and reload the page:

Open the settings, click on Disable JavaScript and reload the page.

Once you do this you will see what a page would look like without a JS.


Read on below

In the example above, you can see that without JavaScript, no content is available.

Note that this method only provides an overview of how much JavaScript affects the delivery of content. It doesn't tell you whether or not Google will index it.

Even if you see a blank page like the one above, it doesn't mean nothing is working. It just means that a website relies heavily on JavaScript.

That's why you need to test the rendered HTML using the tools I'll show you in the next step.

Step 2: check that Googlebot is getting the correct content and tags

Google Mobile-friendly testing tool

Google's mobile-friendly testing tool is one of the best and most reliable tools for checking HTML with mobile rendering because you get information straight from Google.

What do you have to do:

  1. Download the mobile-friendly tool.
  2. Check your url.
  3. Take a look at the information on the HTML tab:

Google's HTML check for the mobile-friendly test tool

This is where the technical SEO side comes in as you need to review the code to make sure it contains the correct information.


Read on below

Note: You can also use the Rich Results Test Tool to perform these checks:

Test tool for extensive results

URL inspection tool in the Google Search Console

The URL inspection tool also gives you access to your page's raw HTML, which Googlebot uses to evaluate your page content:

URL inspection tool in the Google Search Console

The mobile-friendly test tool compared to the URL inspection tool

Ok what is the difference between these tools and which one is preferred?


Read on below

The short answer is that there is no difference in output because the mobile-friendly test and the URL inspection tool use the same core technology.

However, there are some differences in other aspects:

  1. To use the URL inspection tool, you must have access to the Google Search Console of the website you are reviewing. If you don't have such access, use the mobile-friendly test (or the rich results test).
  2. The URL inspection tool can show you two versions of the same page – the most recently crawled version and the live version. It's useful when something has just been corrupted by JavaScript and you can compare the new implementation to the previous one.

The Mobile-Friendly Test and the Rich Results Test only give you the output for your current live page version.

Other debugging tools

Show the rendered source Chrome extension

I love this extension as it shows the difference between the source code and the HTML being rendered. It gives you an overview of what JavaScript changes on the page:

An overview of what JavaScript changes on the page

Note: Make sure that you are comparing the HTML rendered from mobile devices to the desktop.


Read on below

To do this, you must first load a mobile view into the Chrome inspection tool and then use the View Rendered Source extension:

Load a mobile view into the Chrome inspection tool, then use the View Rendered Source extension

JavaScript rendering check

I think this is the easiest to use JS debugging tool as you don't even have to review the code.

It will check the main elements in the page source code for you and compare them to the same elements in the rendered HTML (check the mobile version again):

JavaScript rendering check

In this example, I see JavaScript changing the main elements on the page, such as: B. the title tag, canonical, internal links.


Read on below

It's not always a bad thing, but as an SEO professional, you need to investigate whether or not these changes will harm the page you are reviewing.

You can also use the SEO Pro extension to display the title tag and other important tags in rendered HTML, not in the source code:

Use the SEO Pro extension to display the title tag and other key tags contained in rendered HTML.

I prefer to use a combination of the above tools to investigate JavaScript SEO issues or to ensure best practices are being implemented.


Read on below

More resources:

Photo credit

All screenshots by the author, March 2021


Please enter your comment!
Please enter your name here