Together with HTML and CSS, JavaScript is one of the core building blocks of modern websites.

You can build a static page of text and images with pure HTML and CSS, but to create dynamic, engaging, and responsive experiences, you need a scripting language. JavaScript is the front-runner.

While you can use JavaScript to create feature-rich, interactive web pages, it can also slow down page rendering and create other issues that affect how search engines crawl and index your content.

Let’s dive into why having a good understanding of how JavaScript pages are constructed using the DOM, and the potential pitfalls for search bots, has become essential knowledge for anyone involved in SEO.

What is the DOM?

To understand how JavaScript can impact SEO, we first need to talk about how JavaScript can change the contents of your web pages using the DOM. Here’s an overview of how a web page is served:

  • When you visit a website, your browser requests the page you’re trying to visit.
  • That request is forwarded to the relevant web server.
  • The server then returns an HTML file to the browser.
  • Your browser then uses the file to determine what to display (i.e. render).

That last step actually breaks down into multiple stages. When your browser receives an HTML file, it parses the HTML (including fetching and executing anything in script tags), converts each set of tags into tokens, and combines them to build the DOM.

The DOM (Document Object Model) represents the elements that make up the web page and how they relate to each other. The browser has to construct the DOM before it can display anything.

The DOM comprises a series of HTML tags in a tree-like structure. It starts with the root html tag, which branches into head and body tags. Further nodes are added to each of these (such as div, h2, and ul tags) according to the contents of the page.

The DOM tree reflects the hierarchies of tags and their relationships (parent, child, sibling) to each other. You can view the DOM for any web page by right-clicking the page and selecting “Inspect” (or “Inspect element”, depending on your browser).

At this point, you may be wondering why the DOM is needed – why doesn’t the HTML file just define the structure of the page from the outset and save the browser a job? The answer has to do with the increasing use of scripts, particularly JavaScript, to create interactive pages.

If you want to change what is displayed without reloading the whole page, you need a way to modify the page structure on the fly.

The DOM was introduced to provide that interface. When a script is executed, it can modify the DOM and change what is displayed without making another request to the web server for a new HTML file.

An easy way to check if a page uses JavaScript is to look at the page source (in your browser, open a page, right-click on it, and select “View page source”). You’ll see the contents of the file sent to your browser when you opened the page.

If it contains script tags, there’s a good chance those scripts are JavaScript. Have a look at the rest of the file and see how much of it you can relate to the rendered page, and contrast that with what you see when you use “Inspect”.

If the page relies on JavaScript to build its content, it won’t be possible to work out what is displayed without executing the scripts.

The browser has to run the scripts to determine how to construct the DOM. If any of those scripts are run again (e.g. because a user clicks a button on the page), the DOM is updated.

How does the DOM affect SEO?

It all boils down to how search engines crawl your pages and index content. When a search engine crawler, such as Googlebot, crawls a webpage, it starts by sending a request to the web server, just as your browser does.

When it receives the HTML file, it parses that HTML, looking for links to other pages, and adds these to the crawl queue.

Then it decides whether the page is one it hasn’t seen before or if the content has changed significantly since its last visit. If either of these is the case, it sends the page to the indexer.

The indexer then goes through the page’s contents to understand what it’s about and adds that information to a database.

When you use JavaScript to populate the page content (rather than including the content in the page source), search engine crawlers and indexers can’t immediately see the content; they must execute the JavaScript first.

Google can index content built with JavaScript, but rendering is often deferred. According to Google’s JavaScript SEO documentation, pages are queued for rendering after the initial crawl, and may stay in that queue for a few seconds or considerably longer.

When resources allow, Google renders the page in a headless browser (a browser that doesn’t have a visual output), so the DOM is constructed. Google then reads the rendered DOM to index the page content.

That timing varies by site and crawl demand, so don’t assume Google sees exactly what your users see – check it instead.

Note: Google has led the way with indexing JavaScript-heavy pages. Other search engines have followed suit to varying degrees, but not all search engines, social media sites, or AI crawlers can index JavaScript content. Vercel’s analysis of AI crawler traffic found that the main crawlers used by OpenAI, Anthropic, and Perplexity don’t render JavaScript, so content that only exists in the rendered DOM may be invisible to tools like ChatGPT and Claude.

DOM SEO best practices

Now that we’ve understood what the DOM is and why it’s relevant to how search engines crawl and index your site, let’s look at what you can do to help search engines find everything you want them to find when they visit your pages.

Use crawlable links

Ensuring search engine crawlers can discover your content is essential for SEO. One way that happens is by crawlers following links within each page.

However, Google can only reliably follow standard links created with an anchor element and an href attribute. It may not recognise elements that imitate links using other HTML elements or JavaScript event handlers.

Whether you’re including links in the HTML or adding them to the DOM via JavaScript, ensure your links point to resolvable URLs so that Googlebot can crawl them.

Don’t use fragment identifiers (#) in URLs (e.g. a href=”/#/link-to-child-page”) to load different pages or views. Instead, use the History API to update the URL as the content changes.

Hidden content

It’s fine to use lazy loading, expandable sections, and infinite scroll to display content to your users progressively. However, when implementing these features, you must ensure search engines can still discover the content.

Google’s Web Rendering Service (responsible for rendering your JavaScript-heavy pages so they can be indexed) doesn’t scroll or click the way a user does, so content that only loads after an interaction can be missed. Google’s lazy-loading guidance recommends loading content when it becomes visible in the viewport, rather than relying on scroll or click events.

To ensure your content is indexed, make sure it’s present in the rendered DOM when the page loads, even if it stays visually collapsed until the user clicks to expand it. Where the amount of content means this isn’t practical, pair infinite scroll with crawlable, paginated URLs, as Google recommends.

Handled well, these patterns work for users and search engines alike – we look at that balance in more detail in our post on JavaScript for the modern web and good user experience.

Check for JS errors

It may seem obvious, but checking that your JavaScript executes correctly is essential. If a script designed to load content into the page returns an error, that content will not be visible to search engines.

You can use the URL Inspection Tool’s Live Test in Google Search Console to check how Google renders your pages. Compare the rendered HTML and screenshot with what you see in your browser.

If the preview differs from what you see when you load the page in a browser, it could be caused by JS errors or blocked JS files.

Check you’re not blocking JavaScript

Several years ago, it was common practice to block search engines from crawling JavaScript files in robots.txt. Google has advised against this for years, but we still find sites blocking JavaScript (and CSS) files for search bots. This means Google can’t render the page properly and may not see all your content.

Optimise the critical rendering path

Heavy or poorly prioritised JavaScript slows pages down for both human users and search engines.

To deliver content as quickly as possible, it’s good practice to ensure the most critical scripts are fetched and executed first. Use the async or defer attributes for scripts that don’t need to block the parsing process.

This creates a better user experience and makes rendering more efficient, as Google spends less time and fewer resources on each page. That matters most on large sites, where crawl budget is a real constraint.

It’s also a reminder that DOM optimisation isn’t just a search engine concern: content that loads quickly and reliably is content people can actually use.

Consider your rendering options

Sites that use JavaScript heavily can be slow to load because the browser has to execute the JavaScript before it can finish constructing the DOM and displaying content.

There’s a bigger risk, too. If critical content only appears after JavaScript runs – and scripts fail, are blocked, or aren’t rendered – Google may index a thinner HTML snapshot than users see. Put essential content in the initial HTML response where you can, and confirm the rendered DOM with the Live Test.

Your rendering approach makes the biggest difference here. Server-side rendering (SSR) and static generation send ready-made HTML to browsers and crawlers, client-side rendering (CSR) leaves the browser to build the page, and hybrid approaches mix the two. Frameworks like Next.js support all of these, but the setup doesn’t always suit SEO – we cover the common SEO issues on Next.js websites separately.

Wrapping up

There are many elements to optimising JavaScript-laden sites for SEO.

Here, we’ve looked at the important role the DOM plays in getting your content crawled and indexed, and some simple but effective best practices you can apply to make sure search engines – and AI crawlers – can see it.

To learn more about CSR, SSR, and hybrid rendering, read our guide to how JavaScript rendering works, or get in touch today.