DEV Community

megazear7
megazear7

Posted on

4 1

Web Component as Good as Direct HTML for SEO?

I have been thinking about web components, light dom vs shadow dom, server side rendering, and SEO. The question that comes to mind is whether or not using web components as a way to encapsulate design and functionality with no asynchronous requests actually has worse SEO than having that data directly in the light dom. I.e Is either of these better or worse for SEO:

<my-component title="Example"
              description="Some more content"
              button-text="Do something">
</my-component>
Enter fullscreen mode Exit fullscreen mode

or

<div class="my-component">
  <h4>Example</div>
  <p>Some more content</p>
  <button>Do something</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Assuming that the web component implementing <my-component> synchronously creates the same html as the second example, just inside of the shadow DOM?

Do we have any real evidence for the first option being not as good for SEO as the second option?

Or has the idea been to play conservative since we can't be sure that whatever service is crawling our page will actually run JavaScript, and therefor the useful content of the page would be hidden inside of attributes instead of in semantic HTML elements?

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay