Black Friday: New customers get 20% off any Sitebulb annual plan FOREVER! Offer ends Dec 2. Sign up now!

Learn JavaScript SEO

Everything you need to become confident in JavaScript SEO is right here.

2024 Report and Training

What is JavaScript SEO?

JavaScript SEO is an increasingly important component of technical SEO. It aims to eliminate any negative SEO impact resulting from the use of JavaScript (JS) in building webpage content. In essence, JavaScript SEO is about making websites that are built using JavaScript easy for search engines to crawl, index, and rank well.

So, does JavaScript hurt SEO?

Not necessarily. JavaScript is a programming language that makes websites more engaging and user-friendly. In that sense, this is a good thing for SEO. However, JavaScript can become problematic when search engines come to render it in the browser. This is called client-side rendering.

So, is client-side rendering bad for SEO?

Client-side rendering can be problematic for SEO if there are critical elements, such as links, metadata, directives, and images, which only become 'visible' to search engines after rendering.

Can Google see JavaScript content?

Yes, Google can ‘see’ JavaScript content once it is rendered. But there is a delay between Google indexing the HTML of a page and full rendering JavaScript. 

Doesn’t Google render JavaScript pages?

Google’s JavaScript documentation says that every page gets rendered for indexing. However, the rendering process is expensive and resource-heavy, which limits Google’s ability and efficiency to render all JavaScript content on all websites across the internet. 

This is what we’ve seen; it’s also what many JavaScript SEO experts are seeing…

The clip above is from the start of our Real-World JavaScript SEO Problems webinar; Aleyda Solis, Arnout Hellemans, and Sam Torres discussed several scenarios in which Google’s JavaScript rendering and indexing process is flawed. 

The bottom line is that Google isn’t always indexing what you think it is.

This is a problem for SEOs.

Core Learning Resources

Kick-start your learning with these JavaScript SEO resources.

Common JS SEO Issues

The following are the most common JavaScript-related SEO issues found by Sitebulb since November 2023 and revealed in our 2024 JavaScript SEO Report.

<h1> only in the rendered HTML

URLs that contain an h1 only in the rendered HTML, after JavaScript execution. While Google is able to render pages and see client-side only content, it may be worth adding important content in the response HTML.

Learn more about this hint

<h1> modified by JavaScript

URLs that have h1s that are modified by JavaScript. While Google is able to render pages and see client-side only content, it is worth double-checking that the rendered h1 is the one that you want website users (and search engines) to see.

Learn more about this hint

Page Title modified by JavaScript

URLs that have page titles which are modified by JavaScript. While Google is able to render pages and see client-side only content, it is worth double-checking that the rendered page title is the one that you want website users (and search engines) to see.

Learn more about this hint

Meta Description Only in Rendered HTML

URLs that contain a meta description only in the rendered HTML, after JavaScript execution. While Google is able to render pages and see client-side only content, it may be worth adding important content in the response HTML.

Learn more about this hint

Canonical Only in Rendered HTML

URLs that contain a canonical only in the rendered HTML, after JavaScript execution. Google do not recommended injecting canonical tags using JavaScript. To be certain that Google are definitely able to recognise and respect the canonical tag, you should include it in the response HTML.

Learn more about this hint

Noindex Only in Response HTML

URLs that contain a noindex in the response HTML, and not in the rendered HTML. When Google crawl new pages, they parse the response HTML; and for any URLs containing noindex, they skip the rendering process. So this means that these pages will not get queued for rendering, and therefore Google will not see in the rendered HTML that the noindex was not present, and the page will not get indexed.

Learn more about this hint

Page Title Only in Rendered HTML

URLs that contain a page title only in the rendered HTML, after JavaScript execution. While Google is able to render pages and see client-side only content, it may be worth adding important content in the response HTML.

Learn more about this hint

Canonical mismatch between rendered and response HTML

URLs that contain a different canonical link in the response HTML to the rendered HTML, after JavaScript execution. Google do not recommended injecting canonical tags using JavaScript, and in this case, since there is a mismatch between the response HTML and the rendered HTML, you may end up with search engines honouring the wrong one.

Learn more about this hint

Meta Description modified by JavaScript

URLs that have meta descriptions which are modified by JavaScript. While Google is able to render pages and see client-side only content, it is worth double-checking that the rendered meta description is the one that you want website users (and search engines) to see.

Learn more about this hint

Nofollow Only in Response HTML

URLs that contain a nofollow in the response HTML, and not in the rendered HTML. When Google crawl new pages, they initially parse the response HTML and collect links to add to the crawl queue, before rendering occurs - so if links are nofollow in the response HTML, this may slow down how quickly Google finds and indexes the linked URLs.

Learn more about this hint

JS SEO Best Practice Checklist

  • Ensure critical SEO links, content, and directives are in HTML
  • Follow Google’s pagination guidelines and avoid infinite scroll
  • Optimize large JS files and perform code coverage analysis to reduce JS bloat
  • Don’t rely on dynamic rendering as a long-term strategy
  • Incorporate JavaScript SEO auditing into your workflow

Adding JS SEO to your Audit Process

1. When auditing a new site

Putting together a new client proposal? Auditing JavaScript SEO and discovering issues can be a persuasive way to get clients onboard, especially as the use of JavaScript increases across the web landscape. Learn more: How to do a JavaScript Audit for SEO

2. Monthly monitoring for JS SEO issues

For certain businesses or websites where lots of JavaScript-heavy content is continuously being created, for example news publishers, regular monitoring for JavaScript SEO issues is highly recommended. It’s worth noting that you can compare audits in Sitebulb to see what JavaScript SEO issues have changed. Plus, if you use the Looker Studio Connector, you can see changes in the response vs rendered report over time. 

3. To investigate problems with a specific page

Want to see what’s going on with a particular page? Unless you factor JavaScript SEO into your workflow, you’re not necessarily seeing the whole picture when you analyze a page. If you paste the URL into Sitebulb’s Single Page Analysis tool, you can see the response vs rendered HTML straight away.

JavaScript Auditing Tools

This is not an exhaustive list – but we only list tools here that are either free, or where JavaScript auditing is included in the price of the tool (and not an extra cost).

View Rendered Source Chrome Extension

A lightweight Chrome Extension that shows you how the browser has constructed (rendered) a page's original HTML into a functioning DOM, including modifications made by JavaScript.

Differences between raw and rendered versions are highlighted line-by-line showing how JavaScript has modified a page at render time.

Sitebulb

Sitebulb uses the same Evergreen Chromium technology as Google to crawl and render JavaScript. So you can see exactly what Googlebot sees. And it’s included in every Sitebulb plan, Desktop or Cloud.

Not only can you view the response vs rendered code, you’re also given Hints and helpful explanations about the SEO issues flagged. Handy for communicating with clients and devs!

Screaming Frog

For fans of the green amphibian, yes you can audit JavaScript for SEO using Screaming Frog. It will provide you with raw vs render data in the tool’s traditional spreadsheet/list format.

Not everyone loves this format, as it can be laborious to wade through. However, if you enjoy spending hours poring over data, this option could be right up your street.

Practical How-To Resources

Put your JavaScript SEO learning into practice.

Advanced Learning Resources

To really take your JavaScript SEO learning to the next level, check out these advanced resources.