Your Ultimate Guide to JavaScript SEO

It’s no secret that SEO as a whole has recently moved towards the usage of different front-end languages. The usage of Google Tag Manager (GTM) requires a basic knowledge of HTML and (sometimes) Vanilla JavaScript.

Speaking of JavaScript, there has been a recent discussion regarding why and how Google crawlers read JavaScript. Some pertinent questions emerging:

• Does Google read JavaScript?
• What exactly should I change if my site heavily uses JavaScript?
• What is Server-Side Rendering?
• Should I use it for every single JavaScript framework on my site?

We’ve dissected these questions below and tried to answer each of them in detail:

A Brief Introduction to Modern JavaScript Applied to SEO 

If you’re not front-end development savvy, JavaScript is a rendering programming language which (today) is used for animation purposes via what’s called DOM Methods. In its more sophisticated form, it’s used to build native web applications with frameworks like React and Vue. While React and Vue are very popular and many sites are starting to use these frameworks, as an SEO professional, you’re more likely to encounter legacy architectures like WordPress operating with Vanilla and jQuery. To be precise, the application of JavaScript in such CMSes predominantly relates to slideshows, accordions and other forms of text animations.

Why is JavaScript an SEO Matter? 

Google states that the Googlebot can crawl, index and rank every piece of content contained within any form of JavaScript. However, in reality, the topic is far more complex. Googlebot can indeed crawl static languages (i.e. HTML and CSS), but when it comes to object-ready programming languages, it acts differently. In 2017, technical SEOs started to point out, what’s known today as the rendering queue. This is a hypothetical timeframe Googlebot uses to index any form of text included within any client-side JavaScript (we’ll get to it in a second). 

With this in mind, it’s quite easy to understand why JavaScript has become a delicate subject for SEOs. Having vital content blocked because it’s in that rendering queue could instantly slow down your rankings. This issue is pronounced within CMS architectures like WordPress, which are very JavaScript-dependent. 

Should That Be My Top Priority? 

No, but yes at the same time: a common misconception is that what’s included within JavaScript automatically gets deleted by Google, but this isn’t true. Just because a piece of content is included within JavaScript, it doesn’t mean it won’t rank it may just take longer. Currently, a rendering queue for simple pieces of text after the first crawl is fluctuating at around the 72 hours mark. However, there have been cases where content took about five to six weeks to be indexed by Google because they were stuck in a jQuery-based accordion. So yes, remove your keyword-led content from JavaScript, but only if you’re 100 percent sure that its rendering queue is too long. 

Frameworks and Rendering Speed 

JavaScript has evolved a lot in the recent past. The introduction of ECMA scripts in 2014/15 has led to the introduction of faster, more efficient frameworks. React is (still) the most popular JavaScript library for UI frameworks. It’s hard to trace which library performs better in terms of rendering speed from Google’s perspective. There are dozens of variables to account for; the type of CMS used, multiple functions concatenation and other very technical aspects that shouldn’t really be associated with SEO. 

Given the recent data, we can safely say the React framework is the quickest in terms of rendering because of its simplicity. Once again, content animations and the like are mostly jQuery/Vanilla-based. It would be easier for a technical SEO specialist to encounter those frameworks as opposed to React architectures more common within UI and native apps. 

We, at Red Cow, always recommend the usage of React components when building web applications, which is why we are the most trusted Manchester SEO agency. 

Render/Fetch As Google: Is It Precise? 

Unfortunately not. To test your page’s JavaScript and their rendering queue, the best approach would be analyzing your site’s access log files. This way, you’re able to accurately assess the number of hits crawlers land on your pages, therefore understanding which pages have a better rendering queue. The old “fetch as Google” feature on Search Console may still be useful to check your page’s HTML hierarchy, but it definitely isn’t precise when it comes to understanding JavaScript. Plus, Search Console doesn’t always recognize that individual frameworks are hosted onto external CDNs. Or by telling you that a piece of content isn’t rendered because of JavaScript, it is missing the fact that such script is externally hosted, which is common practice for PWA and other forms of data-driven plugins.

Best Way to Structure Content with JavaScript Resources 

Separating content from JavaScript is entirely doable and completed in many ways. You can, for example, ask your developers to move all your DOM methods animations and features to Non-HTML tags to free every form of content from JavaScript. In case JavaScript is used for architectures and engines (i.e. Node, some React, Vue), you may want to consider using Server-Side rendering libraries (SSR), opposite to Client-Side Rendering (CSR). This process executes JavaScript and dynamic resources within your server, instead of in your browser of choice. Not only does this significantly benefit your rendering queue, but it drastically speeds up your page loading time. 

Wrapping Up

JavaScript is a complicated matter from a front-end perspective and far more complex in regards to its applications SEO-wise. Unfortunately, nowadays over 90 percent of the internet, runs on JavaScript or uses at least five scripts within its code. In a continually evolving sector like SEO, it’s mandatory to acknowledge the importance of being able to analyze and assess your site’s JavaScript.