What Is JavaScript SEO?
The area of technical SEO known as JavaScript SEO is concerned with improving the ability of search engines to crawl, render, and index websites built with JavaScript. This involves a range of tasks, such as optimizing JavaScript-injected content, properly implementing lazy loading, adhering to best practices for internal linking, identifying and resolving JavaScript-related issues, and more.
If you require a refresher on basic JavaScript, I recommend reading my guide: The Basics of JavaScript: A Beginner’s Guide.
How Does Google Crawl and Index JavaScript?
Google processes JavaScript in three stages, which are as follows:
- Crawling
- Rendering
- Indexing
Googlebot, the search engine’s web crawler, puts pages in a queue for both crawling and rendering. It crawls every URL in this queue by sending a request to the server, which then responds with an HTML document. Googlebot then examines the HTML to determine which resources it requires to render the page’s content.
It is essential to note that rendering JavaScript demands substantial resources. For example, consider the computing power Googlebot needs to download, read, and execute JavaScript for nearly two billion websites with trillions of pages. Hence, Google defers rendering JavaScript by queuing any unexecuted JS code to process later when resources become available.
Once enough resources are available, a headless Chromium browser (i.e., Chrome browser without a user interface) renders the page and executes the JavaScript. After rendering, Googlebot examines the HTML again for links and queues the URLs it discovers for crawling.
In the final phase, Google uses the rendered HTML to index the page.
Server-Side Rendering vs. Client-Side Rendering vs. Dynamic Rendering
The way your website renders JavaScript code determines the majority of Google’s indexing issues related to JavaScript. This can occur through server-side rendering, client-side rendering, or dynamic rendering.
Server-Side Rendering
Server-side rendering (SSR) involves rendering JavaScript on the server, which then serves a pre-rendered HTML page to the client (browser, Googlebot, etc.).
When you visit a website, your browser sends a request to the server holding the website’s content. The server processes the request and sends back the rendered HTML, which the browser displays on your screen.
SSR can benefit a page’s SEO performance in several ways. It can reduce the time it takes for a page’s main content to load, minimize layout shifts that may harm the user experience, among others. However, implementing SSR can increase the time it takes for the page to allow user inputs, which is why some websites use SSR for some pages and not others.
Under hybrid models like this, SSR is typically reserved for pages that matter for SEO, while client-side rendering (CSR) is reserved for pages that require a lot of user interaction and input.
Despite its benefits, implementing SSR can be complex and challenging for developers. Nonetheless, several tools can help implement SSR, including Gatsby and Next.js for the React framework, Angular Universal for the Angular framework, and Nuxt.js for the Vue.js framework.
Client-Side Rendering
Client-side rendering (CSR) is the opposite of SSR. With CSR, JavaScript is rendered on the client side using the Document Object Model (DOM), which includes the browser or Googlebot.
Unlike server-side rendering, where the content is received from the HTML document, in CSR, a minimal HTML document with a JavaScript file is received, which then renders the rest of the website on the browser.
Websites that use CSR usually have complex user interfaces or numerous interactions.
Dynamic Rendering
Dynamic Rendering is an alternative to server-side rendering, which detects bots that may encounter issues with JavaScript-generated content. It delivers a server-rendered version of the content without JavaScript to ensure that it is accessible to all users, while showing the client-side rendered version to users.
Although dynamic rendering can be helpful for sites that have rapidly changing content that needs quick indexing or relies on social media and chat apps, it creates additional complexities and resources for Google, making it an ineffective long-term solution.
If crawlers important to your site cannot support some of the features of your JS, you may consider using dynamic rendering as a temporary solution. However, there are alternative approaches available, and Google’s guidelines provide more information on setting up dynamic rendering and using alternative approaches.
How to Make Your Website’s JavaScript Content SEO-Friendly
To ensure that your JS content is properly crawled, rendered, and indexed by search engines, you can take several steps.
Use Google Search Console to Find Errors
Googlebot, unlike a browser, has its own behavior. Therefore, just launching your site does not guarantee that Google can render its content. However, you can follow several steps to ensure that search engines crawl, render, and index your JS content.
One way to check whether Google can render your pages is to use the URL Inspection Tool in Google Search Console. Simply enter the URL of the page you want to test at the top and click “Test Live URL.” After a minute or two, the tool will show a “Live Test” tab, and you can click “View Tested Page” to see the page’s code and a screenshot. You can check for any discrepancies or missing content by clicking on the “More Info” tab.
It’s worth noting that one common reason why Google can’t render JS pages is that your site’s robots.txt file accidentally blocks rendering. To prevent crucial resources from being blocked from being crawled, you should add the following code to the robots.txt file:
User-Agent: Googlebot
Allow: .js
Allow: .css
It’s important to keep in mind that Google does not index .js or .css files in search results. These files are used to render a webpage, and blocking them can prevent your content from being rendered and indexed.
Ensure Google Is Indexing JavaScript Content
After confirming that your pages are rendering properly, the next step is to ensure that they are being indexed. You can do this either in Google Search Console or directly on the search engine.
To check on Google, use the “site:” command. Replace “yourdomain.com/page/” with the URL of the page you want to check.
site: yourdomain.com/page/
If the page is indexed, it will show up as a result. If it’s not, then the page isn’t in Google’s index.
If the page is indexed, you can check whether a section of JavaScript-generated content is indexed. Use the “site:” command again, but this time include a snippet of JS content on the page. For example:
site:yourdomain.com/page/ “snippet of JS content”
If the section of JS content is indexed, you will see it within the snippet.
You can also use Google Search Console to check whether JavaScript content is indexed. Use the URL Inspection Tool and click the “View Crawled Page” button to check the page’s HTML source code. Look for snippets of JavaScript content in the HTML code.
If you don’t see your JS content, it could be for several reasons:
- The content cannot be rendered
- The URL cannot be discovered because JS is generating internal links pointing to it in the event of a click
- The page times out while Google is indexing the content
JavaScript SEO Best Practices
- Blocking .js files in your robots.txt file may prevent Googlebot from crawling and indexing those resources. Ensure that these files are allowed to be crawled.
- Due to timeout errors, JavaScript content may not be indexed if it takes too long to render.
- Internal links should be used instead of buttons, as search engines do not click buttons. This helps Googlebot discover your site’s pages.
- When lazy loading a page with JavaScript, ensure that content that should be indexed, particularly text content, is not delayed. Focus on lazy loading images instead.
- Google often ignores hashes, so generate static URLs for your site’s web pages. URLs should be in this format: yourdomain.com/web-page, rather than yourdomain.com/#/web-page or yourdomain.com#web-page.