The DOM: what is it?
Not many SEOs are familiar with the DOM or the Document Object Model.
The illustration below demonstrates what happens when a browser requests a web page, and how the DOM is involved.
The DOM, as it is used in web browsers, can be defined as API (application programming interface) for markup and structured data such as XML or HTML.
The DOM is the interface, or the “bridge,” between programming languages and web pages. The DOM is the content of a web page, not (only) source code. This makes it crucial.
We were excited to learn that Google could read DOM documents, and understand signals, and content that was dynamically added, including title tags, page text, header tags, and meta-annotations like rel=canonical. Keep reading for more details.
The tests and their outcomes
- Dynamically inserted content
- Dynamically inserted metadata and page elements
- An essential example with rel=“nofollow”
The result: Google immediately followed the redirects. From an indexing perspective, these were read as 301s — the end-state URLs replaced the redirected URLs in Google’s index.
The result: The links were fully indexed and followed.
- Functions outside of the href Attribute-Value Pair (AVP) but within the a tag (“onClick”)
- And so on.
The result: The links were thoroughly crawled and followed.
The following test, similar to the onchange test before, looked at other event handlers. In particular, we were considering the concept of using mouse movements as the event handler and then disguising the URL using variables that are only activated during the event handler’s (in this example, onmousedown and onmouseout) firing.
The result: The links were crawled and followed.
The result: The link was crawled and followed.
Dynamically inserted content
Dynamically added text, graphics, links, and navigation are undoubtedly significant. To fully comprehend the theme and content of a website, a search engine needs high-quality text content. The importance of SEOs staying on top of this has increased in the age of dynamic websites.
These tests were made to look for dynamically added text in two distinct scenarios:
- Check the search engine’s capacity to take into account text that has been dynamically added and is included in the page’s HTML code.
- Examine the search engine’s capability to take into account text that is dynamically introduced but not contained inside the page’s HTML code.
The result: The text was crawled, indexed, and the page was ranked for the content in both instances.
Regardless of the content type, our testing showed the same outcome. For instance, when photos were loaded in the DOM, they were crawled and indexed. We even made a test where we dynamically produced breadcrumb markup for data-vocabulary.org and placed it into the DOM. Result? Successful rich snippets with breadcrumbs in Google’s SERP.
It should be noted that Google now advises JSON-LD markup for some structured data.
Dynamically inserted metadata and page elements
Several tags that are essential for SEO were dynamically inserted into the DOM:
- Meta descriptions
- Canonical tags
- Meta descriptions
- Title elements
The result: In every instance, the tags were crawled respected and behaved as HTML source code components should.
We will learn more about precedence through an intriguing follow-up test. Which signal prevails when there are contradictory ones? What happens if there is a noindex,follow in the DOM and a noindex,nofollow in the source code? This will be covered in the next thorough testing. Our studies, however, revealed that Google can ignore the source code tag in favour of the DOM.
An essential example with rel=“nofollow”
A particular instance was extremely helpful. When link-level nofollow properties were added to the source code and the DOM, we wanted to see how Google would respond. We also built a control that had nofollow completely disabled.
It would be wise for SEOs who have not kept up with the underlying ideas and capabilities of Google to research them and update their consulting to take into account modern technology. You can be overlooking half of the picture if the DOM is not taken into consideration.
Was this article helpful?
Support us to keep up the good work and to provide you even better content. Your donations will be used to help students get access to quality content for free and pay our contributors’ salaries, who work hard to create this website content! Thank you for all your support!