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

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

However, while you can use JavaScript to create feature-rich, interactive web pages, it can also slow down page rendering times and create several other issues that can impact your site’s search rankings.

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, and that’s what we’re going to focus on here.

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.

You’re probably already familiar with the following overview of how a web page is served:

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

However, that last step actually breaks down into multiple stages. When your browser receives an HTML file, it has to parse the HTML (including fetching and executing anything contained in <script> tags), convert each set of tags into tokens, and put these together to construct the DOM.

The DOM – or 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 branch 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 element”.

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 is 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 element”.

If the page source contains JavaScript, it won’t be possible to work out what is displayed without executing the script.

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?

So how is the DOM relevant to SEO? It’s all about how search engines crawl your pages and index their content.

When a search engine crawler, such as Googlebot, crawls a webpage, it starts by requesting 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 so, it sends it to the indexer.

The indexer goes through the page’s contents to understand what it is 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.

Although Google now indexes JavaScript pages, it doesn’t do so immediately. Instead, it passes it to a rendering queue when it encounters a JavaScript-heavy page.

It then 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 DOM to index the page content.

Note: Google has led the way with indexing JavaScript-heavy pages. While other search engines have followed suit, not all search engines or social media sites can index JavaScript content.

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 static 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 has been clear that it’s best to use static links in the <a href=”/link-to-new-page”>link text</a> format, rather than using <span href=”/broken-link”>, <a onclick=”goto(‘/broken-link’)”> or other 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 identify previously visited pages. Instead, use the History API.

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) cannot scroll or click the way a user can.

To ensure your content is indexed, you can load content into the page DOM before the user clicks to display it. Where the amount of content means this isn’t practical, another option is to follow Google’s recommendations on infinite scroll with pagination.

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 Live Test feature in Google Search Console to check how Google renders your pages.

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 good practice to block Google from executing JavaScript in robots.txt.

Although that recommendation has since changed, we still find sites blocking JavaScript for search bots, which means they can’t see all your content.

Optimise the critical rendering path

JavaScript slows down page load times 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, and use the async attribute to indicate scripts that don’t need to block the parsing process.

Not only does this create a better user experience, it also reduces the time Google has to spend on an individual page, leaving more time in the crawl budget for the rest of your site.

If Google does not think the JavaScript changes the page enough to warrant downloading, it may not render and index that content.

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.

In addition to the abovementioned issues, slow load times can harm your SEO efforts.

Wrapping up

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

Here, we’ve looked at the important role that the DOM plays in getting your content indexed, and some of the most simple but effective best practices you can apply to improve your ranking in search results.

To learn more about different JavaScript rendering options, have a look at how JavaScript rendering works or get in touch today.