DEV Community

loading...

Web Component as Good as Direct HTML for SEO?

megazear7
Loves to learn, create and share. Websites, games, stories or simply ideas. Sharing all the possibilities of a "blank canvas" on www.alexlockhart.me
・1 min read

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>

or

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

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?

Discussion (0)