_edited.png)
Lately, I've been working with a couple of clients whose websites are extensively built on JavaScript. It's clear that JavaScript is very popular and web developers have a strong preference for JavaScript due to its flexibility and functionality. However, it's important to note that without proper optimisation, JavaScript can inadvertently become a stumbling block for SEO.
I have found it quite challenging and tricky to explain the nuances of how JavaScript affects SEO to my clients. This topic is inherently technical, requiring a deep dive into the intricacies of how Google indexes and ranks websites. While there's no shortage of detailed articles on the subject, I've noticed a gap in content that's both concise and accessible to those without a technical background. Hopefully, this article will bridge that gap. In this article, I aim to offer a straightforward explanation of JavaScript's complex relationship with SEO, all in terms that are easy to grasp for anyone, regardless of their familiarity with the topic.
To start, it's essential to have a basic understanding of how Google evaluates and ranks websites before we delve into how JavaScrip interferes with this process.
How does Google index and rank a website?
We're now approaching what might be considered the most technical aspect of this discussion – Google's indexing process. It's crucial to grasp this concept because, before Google can determine where a web page should appear in search results, it must first understand what the page is about and include it in its vast library of indexed pages.
Googlebot maintains a crawl queue with URLs to be indexed.
During idle periods, Googlebot fetches the HTML of the next URL in the queue.
Googlebot parses the HTML and assesses if JavaScript execution is necessary for content rendering; if required, the URL goes to a render queue.
The renderer executes JavaScript if needed and sends rendered HTML to the processing unit.
The processing unit extracts URLs from the links on the webpage and adds them to the crawl queue for future indexing.
Content is then added to Google's index.
How does JavaScript affect Google’s indexing process?
There's a distinction between the processing stage (parses HTML) and the renderer stage (executes JavaScript) to manage resources as executing JavaScript is resource-intensive.
If your site is primarily built with HTML, Google can quickly grasp its content, often stopping early in the process (at step 3). However, if your site is heavy on JavaScript, Google needs to engage in additional steps (step 4 and 5) to fully understand and render your page's content. This not only takes more time but also consumes more resources. Moreover, whenever you update your site, Google must go through these steps again to catch up with the changes.
The below table shows the comparison between indexing HTML vs JavaScript:
Criteria | HTML | JavaScript |
Crawling Process | When Google crawls HTML, it directly fetches the static content of the page. This content is immediately available and doesn't require any additional processing to be visible. | For JavaScript-based content, Googlebot fetches the JavaScript files and then executes them to render the content. This process is more complex and can take more time. |
Crawling Speed | Crawling HTML is faster because the content is readily available. | Crawling and rendering JavaScript can be slower because Googlebot has to execute the scripts to see the content. |
Indexing | Content from HTML is indexed directly after crawling. | There might be a delay in indexing JavaScript-rendered content because it has to be first executed and rendered. |
Resources | Requires fewer resources from both the server and Googlebot. | Requires more computational resources to execute the scripts. |
Updates & Changes | Any changes made in the HTML content get reflected immediately in the next crawl cycle. | Changes in JavaScript might take longer to be reflected in search results due to the rendering process. |
Of course, if we deep dive into each of the areas, there will be much more to discuss about how JavaScript can negatively impact SEO performance. However, for those just starting to explore this topic, this overview should suffice to understand why SEO experts often caution against relying too heavily on JavaScript for web pages.
How to check if your website heavily relies on JavaScript?
Wondering if your website is too dependent on JavaScript? Understanding its impact on your site's performance is crucial. Here's a straightforward way to check: see how your site functions without JavaScript. Disabling JavaScript and observing how your site performs can be very telling. If your site still looks good and operates smoothly, showing all the essential functions, that's a great sign. On the other hand, if disabling JavaScript causes key elements like the navigation menu, links, and text to vanish, it's a clear indicator that your website might be too reliant on JavaScript. This reliance could be hindering your site's SEO performance, suggesting it might be time to consider adjustments for better SEO results.
To disable JavaScript on your website, do the following:
Open your webpage
Click the lock icon next to your webpage’s URL on the toolbar
Go to “Site settings”
Set permission for JavaScript to “Block”
After you've disabled JavaScript, go back to your webpage and hit the "Reload" button. This refresh will show you what your site looks like without JavaScript's functionality. If you decide you want to turn JavaScript back on, simply click on the lock icon once more. There, you'll find the option to re-enable JavaScript, restoring your site's interactive features.
Taking the SOUP website as an example, when JavaScript is disabled, the site still functions well and retains most of its elements. This indicates that it doesn't rely heavily on JavaScript. In contrast, disabling JavaScript on the website https://mymerch.com.au/ results in a blank page, showing that without JavaScript, the site's content disappears. This is a clear sign that the site is heavily dependent on JavaScript.
Now let’s look at SEMRush to see how this website has performed in organic search:
As we can see, the site ranks for only 48 keywords, with its highest ranking being #1 for "mymerch", which is its branded term. However, most of the other high-ranking terms are unrelated to the company’s product offerings and are not the targeted commercial keywords. Their organic search visibility is almost 0.
JavaScript SEO best practices
Your web developers might have already shared how JavaScript and its frameworks like AngularJS, Vue, Backbone, or React enable the creation of dynamic, interactive web pages that enhance user experience. This is absolutely true. However, the flip side is that the more interactive your website becomes, the harder it is for search engine bots to "understand" it. For these bots, straightforward HTML is much easier to process than the complex scripts of JavaScript.
This doesn't mean your website should avoid JavaScript. In fact, it's nearly impossible to find modern websites without any JavaScript. The key issue for SEO arises when a site is overly dependent on JavaScript for its core functionality.
JavaScript and SEO aren't inherently at odds. There are numerous strategies to optimise JavaScript-heavy sites for search engines. Success in this area often depends on the collaboration between web developers and SEO specialists. I've worked with a few developers who are open to such collaboration, aiming to minimise JavaScript's impact on SEO, as well as those who prioritise user experience over search engine visibility. It's important to remember that SEO stands for both "Search Engine Optimisation" and "Search Experience Optimisation”, so we, as the SEO specialists, always take both search engines and human users into consideration when it comes to optimising a website.
One effective and handy solution we've found is using a pre-rendering service like Prerender.io. Pre-rendering means that when a page is requested, it doesn't need to be rendered in real-time. Instead, a fully rendered version of the page is immediately available for both users and search bots. This approach can bypass the need for search engines to process JavaScript, as they're presented with a static HTML version of the page.
The pre-renderers do get to know if the search bots or crawlers are detecting your web pages, then they provide a cached static HTML version of your website. If a user sends the request, the normal page will be loaded. So basically, step 4,5 in Google's indexing process can be removed, because the pre-rendering tool can provide a full version of the webpage, with only static HTML and no JS, in step 3.
However, there are a couple of considerations:
Pre-rendering services, including Prerender.io, are not free. That said, their costs are generally reasonable and can be a good investment for improving your site's SEO.
Each time you update your site, you'll need to pre-render these changes to ensure the static version of your site is up-to-date.
That covers the essentials of JavaScript SEO. Given its complexity and technical depth, it's understandable that even seasoned SEO specialists might find it challenging and not be able to handle it properly. If you're concerned—or even slightly unsure—about how JavaScript might be affecting your website's SEO, don't hesitate to reach out to us at SOUP. As the leading independent marketing agency in Australia, we serve clients nationwide with dedication and expertise. We also offer a free SEO technical audit to identify any potential issues and provide you with advice on the best ways to address them, so feel free to register to receive one for your website with no obligations!
If you are on a budget, don't worry! We have different SEO packages that suit different business needs, or we can also customise an SEO plan for you. Check them out and reach out to us if you have any questions.