Everything you need to become confident in JavaScript SEO is right here.
Discover how SEOs feel about JavaScript, plus data from Sitebulb’s JavaScript crawler.
Get the free, on-demand JavaScript SEO training in partnership with WTS & GrayDot.
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.
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.
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.
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.
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.
Kick-start your learning with these JavaScript SEO resources.
The following are the most common JavaScript-related SEO issues found by Sitebulb since November 2023 and revealed in our 2024 JavaScript SEO Report.
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 hintURLs 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 hintURLs 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 hintURLs 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 hintURLs 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 hintURLs 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 hintURLs 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 hintURLs 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 hintURLs 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 hintURLs 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 hintPutting 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
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.
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.
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).
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 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!
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.
Put your JavaScript SEO learning into practice.
To really take your JavaScript SEO learning to the next level, check out these advanced resources.
