The interactive capabilities that JavaScript adds to websites make them more engaging for users, making it an essential component of the modern internet. However, if you’re not careful, JavaScript might harm your website’s ranking, cause indexing issues, and slow it down. So, is it still possible to utilise JavaScript and rank well? Yes, of course! Here is what you need to know about JavaScript SEO in order to improve the optimisation of your website.
What Is SEO in JavaScript?
The process of optimising a website’s JavaScript is known as JavaScript SEO, and it is done to increase the website’s ability to rank in search engines like Google. In general, JavaScript SEO is considered to be a form of technical SEO since we are optimising on-page components and because it directly impacts technical SEO metrics.
Does JavaScript hurt SEO?
There are many websites that use JavaScript. And although JavaScript has a lot of advantages, it may also hurt SEO. Although JavaScript isn’t necessarily harmful for SEO, it can hinder Googlebot’s ability to crawl and index pages if it is used incorrectly. Additionally, excessive JavaScript usage can lengthen loading times, which negatively impacts search engine rankings and the surfing experience for users.
Different websites utilise JavaScript in various ways. While some websites use JavaScript sparingly throughout their coding, others rely on it to power essential frameworks and functionality.
For instance, JavaScript frameworks like Angular and React may speed up the development of online apps. Furthermore, compared to the typical website, these frameworks demand far longer and more intricate JavaScript code.
For crucial content to be displayed on websites created using this app shell paradigm, where UI and data modules are kept separate, JavaScript code must be executed. As a result, certain websites are more vulnerable than others to SEO issues caused by JavaScript. If on-page information loads successfully for visitors but not for search crawlers, websites that rely on JavaScript to do so may have SEO problems.
How is JavaScript handled by Google?
Let’s take a deeper look at how Google really handles JavaScript before I begin optimising.
Crawling, rendering, and indexing are the three stages of Google’s processing of JavaScript. Crawling the URLs in its queue by Googlebot is the first step in the process. Using a mobile user agent, it makes a request to the server and downloads the HTML from the website. Google can only devote a certain number of computational resources (its crawl budget) to crawling every given site. JavaScript resources on the website are deferred for later crawling by Google in order to analyse the HTML resources first and conserve crawl resources.
Rendering enables Googlebot to run JavaScript code and view the website as a human would, allowing Googlebot to correctly index the website. Googlebot must first run and render the JavaScript code in order to understand the contents of sites that utilise a lot of JavaScript, and particularly those that employ the app shell paradigm to show crucial information in JavaScript.
Due to the JavaScript code being placed in the Web Rendering Services queue and waiting to be processed, this rendering process causes a delay. While it used to take a while, Google recently claimed that 90% of sites are now processed within minutes, with a rendering delay of just 5 seconds on average. Unfortunately, SEOs lack experience in that area. According to one research, Google needed nine times as long to crawl JavaScript as it did HTML. Additionally, robots.txt restrictions, timeouts, or mistakes can still stop Googlebot from rendering and indexing a website.
Googlebot indexes the website twice since it has to render JavaScript in order to do so. After rendering the JavaScript with a headless Chromium, Googlebot crawls the produced HTML once again and adds any newly found URLs to the list for additional crawling. The site is then indexed using the output HTML.
JavaScript rendering
Other than Googlebot, other browsers also need to display your websites. The code on your website is rendered so that users can see it graphically in their browsers. The sort of rendering a website employs to show its information causes several JavaScript-related indexing problems. Your JavaScript pages can be rendered in a variety of ways, some of which are better for search bots than others.
Rendering on the server
Server-side rendering (SSR), as its name suggests, refers to rendering that takes place entirely on the server. The finished HTML web page is subsequently sent to the browser for viewing and crawling by visitors and bots.
In terms of SEO, server-side rendering is seen as a wise decision because it may speed up content loading and prevent layout changes. Additionally, the server-side technique ensures that client-side technology doesn’t neglect any of your pieces and that they all really render.
Server-side rendering, nevertheless, can potentially lengthen the period of time it takes for a website to receive user inputs. As a result, some websites that extensively rely on JavaScript opt to deploy SSR on web pages that are crucial for SEO but refrain from doing so on pages where reliable functionality is essential.
Customer-Side Rendering
The rendering duty is transferred from the server to the client (the browser) via client-side rendering (CSR). The user receives some basic HTML and a JavaScript file for their own browser to render, as opposed to receiving completely rendered HTML straight from the server.
Client-side rendering is typically slower than server-side rendering because the browser must manage the rendering load. Since page speed is one of several technical SEO signals that Google utilises to rank pages, this may result in evident SEO problems. Additionally, slower load times can raise bounce rates. While a high bounce rate may not be a signal in and of itself, it may be a symptom of dissatisfied site visitors and a bad browsing experience. Moving away from client-side rendering might not be a terrible option if you want to boost site speed.
Interactive Rendering
Both client-side rendering and server-side rendering are used intermittently in dynamic rendering. The client-side version of the page will be delivered in response to requests from browsers, whilst the server-side version will be delivered in response to requests from bots that could have difficulties with JavaScript. This helps search crawlers reach sites that need to be indexed while preserving functionality on the most crucial pages.
This more adaptable rendering approach may be advantageous for a website with a lot of dynamic material that must be regularly updated and re-indexed. Dynamic rendering might sound like a good way to solve your rendering issues, but Google doesn’t actually recommend it. In reality, due to additional complications and resource needs, dynamic rendering is expressly described as a “workaround” and “not a long-term solution” on the Google search Central page for JavaScript. However, when necessary, it might still be a temporary solution.
Fixed Rendering
Pre-rendering, commonly referred to as static rendering, is the process of producing the HTML code for a page before it is built or deployed. On demand, the browser or client receives the pre-rendered HTML files directly.
In static rendering, the server creates HTML files with all the information and dynamic components required for the page. This indicates that a completely rendered HTML page is delivered to the browser or client without the need for extra processing or JavaScript execution.
The pre-rendered HTML files are simple for search engine bots to crawl, improving the website’s content indexing. Additionally, because static rendering doesn’t require any additional client-side rendering because the material is already included in the HTML file, it can dramatically reduce the time it takes for a website to load.
Which Rendering Format Is Best for SEO?
Google advises employing server-side rendering, static rendering, or rehydration—a technique that is somewhat akin to dynamic rendering—to combine client-side and server-side rendering. Client-side rendering is not strictly forbidden by Google, however it is less recommended due to its potential for issues. The interaction of the page with next paint (INP), which will be a component of Core Web Vitals starting in March 2024, might suffer as the amount of JavaScript in an app or page increases. According to Google, when it comes to client-side JavaScript, you should “serve only what you need, when you need it.”
Advice on How to Reduce JavaScript SEO Issues
It’s not very difficult to make your site’s JavaScript SEO-friendly, but there are a few best practises you should stick to for the greatest results. To assist you and your development team in creating a JavaScript approach that won’t affect your rankings, read the following SEO JavaScript suggestions.
1. Verify that JavaScript content is indexed by Google
Never assume that Google will interpret and index your JavaScript content automatically. Make sure for yourself by conducting a site search for a specific text string that is enclosed in quotation marks on your website (site: yourdomain.com “specific text”). You may be confident that it has been indexed if the page appears.
To delve a bit further and evaluate your JavaScript implementation, you can also utilise a variety of tools from Google (such as the URL Inspection Tool and the Mobile-Friendly evaluate) as well as third parties (Screaming Frog and JetOctopus). To learn more about utilising these tools to look for JavaScript-related indexation mistakes, refer to the “Testing and Troubleshooting” section at the bottom of this tutorial.
Remember that robots.txt might prohibit search crawlers from visiting particular pages, too. Make sure the robots.txt file is not blocking the page if Google just won’t index it. Because blocking JavaScript files in robots.txt may prevent Googlebot from correctly rendering on-page content and indexing the page, Google does not advise doing so.
2. Adhere to On-Page SEO Best Practises.
The on-page SEO procedure won’t alter just because you’re using JavaScript instead of HTML. Tags, titles, characteristics, and other customary technical and on-page optimisations are still necessary. In fact, Google has advised against using JavaScript to create or maintain canonical tags.
3. Make Use of Strong Internal Links
Search engine bots cannot locate all the pages in your site architecture and will have difficulty indexing or rating them if there are no internal links. Links should ideally be in HTML rather than JavaScript for JavaScript SEO purposes so that they may be crawled right away rather than after rendering.
If you do utilise JavaScript to dynamically add links to your code, make sure to still mark them up correctly in HTML. I also advise utilising Google’s URL Inspection Tool to confirm the presence of the anchor text in the final HTML output. Additionally, Google advises against connecting using HTML elements like div or span or JavaScript event handlers since they might interfere with Googlebot’s ability to crawl the link.
4. Avoid Using Hashes in URLs
Fragmented URLs can be used by SPAs (single-page applications) to load several views. However, Google cautions against using hashes in broken URLs and advises against relying on them to operate with Googlebot. Instead, they advise making use of the History API to load various pieces of material according to URL.
5. Employ Lazy Image Loading
Delaying the loading of less-important or invisible page assets is known as lazy loading. It is frequently used to enhance both UX and performance. But if you don’t take care with what you put off and how you do it, you can run into indexing problems.
When viewing material, Googlebot just adjusts the size of its viewport rather than scrolling. This might prevent content from being displayed and prevent scheduled scroll events from triggering. When using lazy loading, Google offers numerous suggestions for making sure all of the content on your page is loaded.
For your photos, it’s usually preferable to use lazy loading. Content that loads slowly runs the risk of timing out and not being indexed.
6. Eliminate Double Content
According to Google, duplicating material is not a reason for a manual action unless it is intentionally misleading or harmful. However, it still has the potential to deplete your crawl budget, stall indexing, and make your pages fight with one another for ranking. Choose whatever version of the material you want indexed and add canonical and noindex tags to the others since JavaScript sometimes generates many URLs for the same piece of information.
7. Conduct routine site audits
It’s crucial to ensure that JavaScript code is being displayed and indexed correctly as a page’s size and complexity increase. Don’t forget to include JavaScript SEO in your regular SEO checklist. Regular site audits may assist you find anything you might have overlooked during your original round of implementation testing.
Troubleshooting and testing
You may use a variety of tools to check whether Google is having trouble indexing the JavaScript on your website or if your most recent Google JavaScript SEO changes are effective.
Google’s web tools, particularly the URL Inspection Tool and the Mobile-Friendly Test tool, should be your first port of call. These tools aren’t ideal because they don’t utilise the same cached version of your page as the renderer; instead, they create a version of your page in real-time using resources that are accessible. However, they are still able to provide you with a very realistic picture of how Google is treating your JavaScript.
To check any JavaScript that might not be working correctly, you can tab between the code on your website and a snapshot of what Google sees using the Mobile-Friendly Test Tool. After the test is complete, click “View Tested Page” to access this functionality. The “More Info” option also provides further information about which page resources failed to load and why, along with any possible error messages coming from the JavaScript console.
Similar to this, Google’s URL Inspection Tool gives you a glimpse of how Googlebot perceives your site so you may examine its components visually. You can easily see whether one of your script-heavy pages hasn’t been indexed and may need care by looking at the index status of your pages, which is also displayed.
You may test and debug using a number of third-party tools in addition to these online tools. JavaScript screenshots of your webpages may be rendered by crawler tools like Screaming Frog and JetOctopus. However, take in mind that since different crawlers are producing them, these renderings could not exactly match those that Googlebot would create.
Help From Technical SEO Professionals
There are many of moving components in JavaScript SEO. You don’t have to handle these technical SEO challenges by yourself if you have a committed partner. Victorious can assist you and your development team in making sure that your site is appropriately optimised and that your SEO efforts support your corporate objectives. To find out more, get in touch for a free consultation.