How to Debug JavaScript SEO issues in Chrome

I have talked about how to simulate the Googlebot crawler to debug crawling and indexing issues.

In this guide, I will talk about how to use a very simple manual technique to efficiently diagnose rendering issues in Google’s index.


Note: The technique of using rendered HTML from Google tools was dreamed up by Oliver Mason, SEO Consultant, ohgm. The original technical SEO, who writes edge case studies.


How to manually diagnose rendering issues

Right, onto debugging rendering issues in Google Search.

Step 1: Find the right page

Find the page you want to inspect and open it in 2 tabs in Google Chrome.

I usually try to focus on page templates on large websites. This helps to see issues which might scale across the website.

In this example, I wanted to test to see if Google was having any issues rendering the content of my newsletters over at The SEO Sprints (which uses the substack platform).

Graphical user interface, text, application, Teams

Description automatically generated

Step 2: Grab the Rendered HTML from the index

Once you’ve found the page and have it open in two tabs, then all you need to do is head over to either the Google Search Console URL Inspection tool or the Mobile-friendly testing tool. The tool you use will depend on your level of access.

The URL Inspection tool uses the rendered HTML from the most recent crawl in Google’s index.

This rendered HTML is the artifact that Google stores in its search index – which is used to assess the quality and relevance of your content.

A screenshot of a computer

Description automatically generated
Google URL Inspection Tool > View Crawled Pages

It is for this reason that gaining access to Google Search Console is critical to really understand how Google renders your pages.

This doesn’t mean that the mobile-friendly tool is not useful in debugging rendering issues but due to the different configuration settings between GSC testing tools and Googlebot’s systems the results might be different.

For the best results always go with the Google URL Inspection tool > View Crawled Page (not the live test version).

If you don’t have access to GSC then use the mobile-friendly test tool.

Capture rendered HTML from Google’s Index

Once you’ve picked the tool follow these steps:

  1. Submit the chosen URL into the URL Inspection tool
  2. Navigate to the “View Crawled Page” button
  3. Then will open the Crawled page > HTML sidebar and all you need to do is just click on the Copy icon.
Graphical user interface, text, application, email

Description automatically generated
Copying the Google Rendered HTML from GSC URL Inspection Tool

Step 3: Inspect the Rendered HTML from Google

Now head back over to your two tabs.

Right-click and inspect the element on one of the tabs. Then will open Chrome DevTools and display the rendered HTML in your browser.

Right-click on the <html> <html/> element at the very top of the code and then choose to edit as HTML. Hit CTRL+A to highlight all the rendered HTML from the browser and hit delete.

Text

Description automatically generated

Next, paste the copied rendered HTML from Google Search Console into the editable HTML of the page.

Graphical user interface, text, application, email

Description automatically generated

That is it.

Step 4: Compare Google rendered HTML vs Current Page

Return to your two tabs in Chrome and compare the two pages side by side.

Graphical user interface, text, application

Description automatically generated
Googlebot Rendered HTML vs Chrome Rendered HTML

Check to see if Google has missed or is not rendering any content on the page quickly and easily.

Step 5: Inspect in Google Chrome DevTools

When noticing the differences between the two pages remember to check the Google Search index rendered code in Inspect element tab of Chrome DevTools.

It is easy to get excited about differences but always remembers to check the code to make sure there is missing content and links.

For example, the substack personalised links if you hover over my author profile picture are missing from the rendered HTML from Google’s index vs page loaded incognito.

Graphical user interface, text, application, email

Description automatically generated
Personalized internal links are not indexable by Googlebot

This makes sense if you read around how the Web Rendering Service works – it is stateless across page loads. It does not sign in or store any data from page to page (unlike your browser).

How can you use this technique to debug JavaScript SEO issues?

There are a number of problems that can help debug and uncover Javascript SEO issues.

Content and links loaded by user events (scroll or click).

The UK ecommerce brand Fatface uses an infinite scroll to load more product listing pages on its category pages. If we use the mobile-friendly test tool (yes I know not as accurate) and copy-paste the rendered HTML into Chrome, we can instantly see a difference between the two pages.

If you keep scrolling on the rendered HTML from Google, you can see that not all the PLPs load on the page.

A collage of a person

Description automatically generated with medium confidence
Fatface uses an infinite scroll to load content and internal PLP links

If we scroll down and check the code for the website, you can see that after a certain point the internal links to deeper level PLP are missing in the rendered HTML.

Graphical user interface, text, application

Description automatically generated

Missing Navigation Links

A few years ago I noticed ASOS was not rendering the main navigation in the mobile-friendly testing tool. It turns out that a lot of other SEO issues impacted ASOS’s SEO traffic to drop.

ASOS not loading the main navigation to Googlebot

Lazy loading images not rendering properly

Developers can rely on JavaScript to lazy load images from third-party CDNs and sometimes it can be a problem for Googlebot to access these resources.

An ecommerce website not loading images properly

Other JavaScript SEO issues

There are a number of other issues which you can also detect:

  • Critical content not rendered by Googlebot
  • Critical resources (CSS and JS) not accessed by Googlebot
  • Strange client-side redirects stopping Googlebot from accessing the website
  • Etc.

Summary: I, Web Rendering Service

There we go, a simple and efficient way to diagnose JavaScript SEO issues using Google Chrome.

Frequently Asked Questions

Why is the layout different to my page?

The rendering of the page might look a bit off compared to your current page. This isn’t always an issue if the rendering snapshot is mobile-friendly, URL Inspection Tool and Rich Result desktop testing tools show it renders fine.

Do I trust what I see in the browser?

I always check the rendered HTML in the code in both Chrome and in the URL Inspection or mobile-friendly testing tool to make sure the links and content are there.

What if I can’t use the URL Inspection Tool?

I’d recommend using the mobile-friendly testing tool or the rich result tool. Both tools use the Web Rendering Service – the one issue is that these tools don’t wait around if the website is slow, unlike the real WRS. Although this does highlight bigger web performance issues.

About Author
Technical SEO Consultant

Adam Gent is a Freelance Technical SEO and Product Manager. He specialises in working with development teams to deliver technical recommendations that drive results.