What’s considered the best SEO-friendly JavaScript? Google has improved much over the years, and one of those innovations (besides the usage of A.I.) is the ability to crawl and process JavaScript. But not all scripts are equal.
In this blog post, learn about the elements of JavaScript that are pertinent for SEO and ways to utilize it in an SEO-friendly way.
What is the DOM?
The DOM (document object model) is all the HTML elements applied in the browser. “The DOM represents the [page] as nodes and objects” (Mozilla). This means, it presents a hierarchical structure to the HTML tags being used to render the page, which can be manipulated by scripts such as JavaScript. When you see carousels, accordions, and other interactive elements on a webpage, it’s usually JavaScript manipulating the DOM.
You can view the DOM by right-clicking on any area of a page, and then selecting “Inspect Element” (Google and Firefox) or “DOM Inspector” (Firefox).
Page Source vs. DOM
Page source is the raw HTML sent from the server to the browser. There’s no hierarchy applied, and front-end scripts can’t manipulate it. The DOM takes the raw HTML and applies hierarchy, and scripts can then apply further changes.
You can view the page source on any browser by holding the CTRL key (or CMD on Mac) and then pressing “U.” Or, you can go to the “View” menu in a browser and then select “View Source” (or “View Page Source”).
Query Selectors
Vanilla JavaScript, and jQuery, allow you to target specific DOM nodes (HTML elements) by using CSS selectors—syntax which allows you to use CSS language to target specific elements. W3Schools has an exhaustive table that shows various examples of CSS selectors.
In vanilla JavaScript, you can use the functions “document.querySelector(),” “document.querySelectorAll(),” “document.getElementById(),” and “document.getElementsByClassName().” The parameter for these functions accept CSS selectors for targeting specific elements.
In jQuery, you can use $(‘{CSS selector}’).[function()] to target a specific DOM element and apply a function to it (replace “{CSS selector}” with the actual CSS selector, and replace “[function()]” with the name of an actual function).
Vanilla has another function called “document.write()” which can be used to add content to a page. I haven’t experimented with this function, but I don’t think it manipulates the DOM to the same extent as query selectors (I might be wrong, so please do your research on this supposed fact).
Manipulate Existing Page Source Elements Via DOM
So, what is the most SEO-friendly JavaScript? The answer is…scripts that manipulate existing page source elements.
Let’s look at an example. The HTML below has the class “title” for the H1 tag coming from the page source. It’s currently blank.
<h1 class="title"></h1>Now, we use one of the query selector functions to add the text “Happy Happy Title” in the DOM for this tag.
document.querySelector("h1.title").innerText = "Happy Happy Title";The above JavaScript code will populate the H1 tag with the text “Happy Happy Title” in the DOM.
<h1 class="title">Happy Happy Title</h1>When the JavaScript code was executed, it added the text to the H1 tag in the DOM. And guess what? Google can detect the content of the H1 tag because the H1 tag already exists in the page source.
Search Engine Land ran an experiment and found that Google could detect HTML elements in the DOM. When I read this article, I executed my own experiments with JavaScript-based content and experienced the same results for multiple HTML tags, even META tags. There was one exception: hyperlinks. When Google manipulated anchor tags already in the page source, the search engine eventually detected the hyperlinks (after some weeks). But, I worked on a website that had JavaScript-generated hyperlinks for pagination, and after some weeks, had found that Google never detected other paginated pages. This led to my conclusion that Google could only detect DOM changes where the elements were already in the page source.