Use HTML Semantic tags instead division + Avoid an excessive DOM size

Hi

Elementor generates many <div> and it affects the HTML dom tree,
it means that using nested elements,
instead of, this year for Google updates,
we need our website to contain semantic elements in HTML rendering

https://static.semrush.com/blog/uploads/media/cc/85/cc85d452a743e27f68d426df35e4da7d/EN-Semantic-Search-Non-Semantic.webp

These are semantic tags:

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

and this is non semantic tags:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

For indexing purposes, Googlebot is most interested in the main content of a webpage because that’s the part that gets ranked.
The value of semantic HTML is to make it clear what the individual sections of a webpage are, in particular the section that constitutes the Main Content.

also, page speed insights show this in an error, see the attachment

reference:
https://www.semrush.com/blog/semantic-html5-guide/
https://www.searchenginejournal.com/semantic-html-not-a-ranking-factor-but-still-important/490436/#close

Attachments:

You must be logged in to view attached files.

Hello,

The number of DOM elements are generated in the process of content building. All Elementor elements are DOM elements. If you want to reduce DOM elements you will have to reduce the content: widgets, products, menu items, and others.

As for the Elementor generates many

, could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Kind Regards

Please close this topic

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

Have a good day!

Kind Regards

[Author]

Posts