3️⃣ steps to debug JavaScript SEO issues

Published about 2 months ago • 1 min read

JavaScript is a great option to make website pages more interactive and less boring.

But it’s also a good way to kill a website’s SEO if implemented incorrectly.

TV gif. Mariska Hargitay as Olivia Benson on Law and Order SVU leans forward on her desk and looks forward with a disappointed expression. She hides her face with both of her hands, looking down towards the desk. — Tired Oh No GIF by Law & Order

That’s why, as a technical SEO, you need to be comfortable debugging JavaScript issues.

Here’s how you do it in 3 steps 👇👇👇

Step 1: Disable JavaScript in the browser using Web Developer Chrome extension

The easiest way to do it is to disable JavaScript in your browser. I use the Web Developer Chrome extension for that. You just need to open settings, click ‘Disable JavaScript’ and reload the page:

Step 2: Check how much a website relies on JavaScript to serve the content

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

Note that this method just gives you an overview of how much JavaScript influences content delivery. It does not tell you if Google will index it or not.

Step 3: Check if Googlebot is served the right content and tags

The tools you can use for that:

Google Search Console Inspect URL
Google Rich Results test tool
SEO Pro extension

🚀 Psst... Did you know...

The Tech SEO Pro course has a dedicated JavaScript SEO module that will help you to learn how to make sure the JavaScript used on a website is SEO-friendly.

I'll show you a 3-step framework of JavaScript debugging (so you’ll know exactly how to do it in different settings and with any frameworks)

Check out Tech SEO Pro now>>

Grab this free resource 👇

3 steps to debug JavaScript SEO issues

Download a free PDF with a copy of this email, so it's easy for you to get back to it when you need (no signup required) 👇👇👇

Download a free PDF

Optimize critical rendering path

Do you know what the Critical rendering path is? It’s what your browser goes through in order to build a beautiful usable page from your source code. It requires communication between the server and browser: Steps to render a page in a browser (Critical rendering path) Begin constructing the DOM by parsing HTML incrementally Request CSS and JS files Parse CSS and construct CSSOM Execute JS, build a render tree Merge Document and CSS Object Models Run layout and paint Optimizing critical...

about 1 month ago • 1 min read

5+1 tools to check rendered HTML of any page

This shouldn’t come as a surprise to you: Google uses rendered HTML of your page to evaluate the page’s optimization. First, let’s make sure we’re on the same page here. What is rendered HTML? Rendered HTML is displayed after CSS and JavaScript are processed. It means that if you’re only relying on the source code for your SEO efforts, it’s easy to miss many important things that can be altered by JavaScript, such as: Rewritten title tag A sneaked noindex tag A removed canonical Added/removed...

about 1 month ago • 1 min read

🚨 Source code vs rendered HTML: Critical Differences you must know

Critical knowledge alert 🚨🚨🚨 As a technical SEO, it’s crucial you know the difference between source code and rendered HTML them. Source code It is the initial code of the page before any JavaScript files are executed and CSS files are parsed. It’s the code you see when viewing the source code of a page in your browser. Rendered HTML It is displayed after CSS and JavaScript are processed. When you inspect an element on a page using Chrome dev tools, you’re looking at the rendered HTML. Why is...

about 2 months ago • 1 min read