SEO and Web Components - 2023 Edition
#webcomponents#seo#html#javascript
Burton Smith

Burton Smith @stuffbreaker

About: I am a senior software engineer at Microsoft and creator of the Web Components Toolkit (wc-toolkit.com). I love web components, web development, and design systems.

Location:
Columbus, OH
Joined:
Jul 26, 2018

SEO and Web Components - 2023 Edition

Publish Date: Aug 7 '23
50 19

tl;dr - Web components are SEO friendly!

I had read a number of articles that discussed SEO and web component compatibility and saw that many of them stated web components were not SEO friendly. These articles were at least a few years old so I thought they were out-of-date, but I didn't see anything recently that contradicted those articles. So, I decided to test some things out and see what the story was for myself.

Creating a Test Site

I created a simple web page with a static "vanilla" web component to test if search providers would render and index content in the shadow root. The site can be viewed here and the source code can be viewed here.

Google Test

Google commands the lion's share of search traffic, so this seemed like a good place to start the test.

After creating my page and adding the property to my Google Search Console account, I went to URL inspection and clicked on VIEW CRAWLED PAGE.

google search console dashboard with arrows indicating where to click

In the preview window, I can see that the <h1> and <h2> tags in the shadow DOM were rendered and can be indexed by Google's web crawler! 👍

HTML markup displaying the rendered web components

Bing Test

Although Bing is not the most popular search engine, its index is used to power many other search engines including Yahoo!, DuckDuckGo, Neeva, and You.com.

I added my page to the Bing Webmaster Tools and selected URL Inspection, clicked the Live URL tab at the top of the page, and clicked the View Tested Page Button.

bing webmaster tools with indicators of where to click

When I look at the tested page's HTML, I notice that none of my custom elements have rendered their shadow DOM contents and I am seeing error messages about missing H1 tags... 😳

HTML markup displaying custom elements without their content being rendered

error message from bing webmaster tools stating there is a missing h1 tag

As a huge proponent of web components, I was extremely concerned about these results, so I reached out to some of my co-workers on the Bing team to find out what was going on and figure out how we could fix this.

The good news is that after looking into it, they told me the issue is a bug in the Bing Webmaster Tools and that the content does get rendered and indexed! 🙌

The great news was that they have prioritized the bug and are looking to have it resolved by the end of this month (August 2023)!!! 🎉🎉🎉

Conclusion

Do to a bug in some of the tools, there have been some misconceptions about how compatible web components are for SEO. Fortunately, that should be resolved soon and teams can continue using web components know their content is searchable!

Comments 19 total

  • Jared Christensen
    Jared ChristensenAug 9, 2023

    Do the pages need to be server side rendered or are you testing client side pages?

    • Burton Smith
      Burton SmithAug 9, 2023

      Great question! These were all rendered client-side.

  • quincarter
    quincarterAug 19, 2023

    This is great news for web components!

  • Nick
    NickOct 25, 2023

    Thanks for checking this out.
    It is now October. Do we know if Bing got around to fixing this bug?

    • Burton Smith
      Burton SmithNov 6, 2023

      I just did a test and it looks like it's not. I will ping the team and see if the fix is publically available yet.

      • Burton Smith
        Burton SmithApr 2, 2024

        No ETA yet. It looks like updating the Web Master Tools to use the indexed content rather than the page source is quite the process.

  • webketje
    webketjeOct 26, 2023

    Hey I wondered about this too, thanks for sharing.
    Though I have a follow-up concern, maybe source material for another article?
    Even if the webcomponent inners are readable, what significance are they given in the document structure? For example, would Google Search generate an enriched search result with main navigation links if the was embedded in a custom webcomponent? If a page has 2 <h1>'s, with one in the shadow DOM of a webcomponent, which one will render as page title?

    • Burton Smith
      Burton SmithNov 6, 2023

      It renders the content and reads it like standard markup on the page, so the behavior should be the same as if you added 2 <h1>'s in the light DOM.

  • Cláudio Medina
    Cláudio MedinaDec 13, 2023

    That's indeed good news coming from Bing side.
    I've heard that Google Crawler provides limited "website crawling budget" when using the JavaScript enabled web crawler, do you know if the same applies to Bing?
    That has been one of my main blockers to the use of Shadow DOM in large websites because it ends up not indexing ALL pages.

    • Burton Smith
      Burton SmithDec 19, 2023

      I'm not sure to what extent it indexes JS content, but it should execute web components on the client to index the shadow root contents.

  • Lorenz Kahl
    Lorenz KahlMar 29, 2024

    Hi Burton,

    thanks for testing this and for sharing. I just cloned your repo, just to see with my own eyes, maybe add some more tests and to check up on Bing.

    Unfortunately Bing still gives me the "SEO issue found - H1 tag missing" warning. This still concerns me a bit and I'm still not sure if it's a good idea to build a <my-headline level="2" layoutLevel="3">An important H2 headline<my-headline> component hiding the semantic structure of my page regarding the initial HTML.

    On the other hand passing the <h2> with the slotted content exposes my headline to styles coming from the global scope <my-headline layoutLevel="3"><h2>An important H2 headline</h2><my-headline> - which can only be safeguarded against using the ultimate weapon !important

    • Burton Smith
      Burton SmithApr 2, 2024

      Yeah, I agree. I would love to see that fixed ASAP. It looks like updating the Web Master Tools to use the indexed content rather than the page source is quite the process. I don't have an ETA on when that will be updated, but they have assured me the indexed content does execute and traverse the shadow DOM content.

  • jessaí maya
    jessaí mayaMay 31, 2024

    Hey, thank you for sharing; this is very helpful! 

  • Bell-Myers, Bruce M
    Bell-Myers, Bruce MOct 29, 2024

    Some of our components are server-side hydrated and some are not. I wonder if Google will get confused and read the page too early, not waiting for client-side hydration to finish. Seems like that might be happening on some pages already...

    • Burton Smith
      Burton SmithOct 30, 2024

      All of my examples were client-side hydrated and it didn't have any issues with it.

  • 李文富
    李文富Jan 1, 2025

    What if loading the scripts with async?

    • Burton Smith
      Burton SmithJan 2, 2025

      Good question! I guess it would depend on how long it takes to load the async code. I'm not sure how long the bots are willing to wait for that code.

  • Leonard
    LeonardApr 16, 2025

    I ran into something similar while tweaking a site for gmb seo and noticed custom elements sometimes trip up basic bots. What helped was using server-side rendering for key content and sprinkling in schema.org tags. Google seemed to handle that better, and traffic from local searches picked up. Still feels like web components need a bit more love for SEO to play nice without extra work.

    • Burton Smith
      Burton SmithApr 16, 2025

      I would caution you. Their tool probably isn't configured to handle custom elements, but it doesn't necessarily reflect what search engines are actually indexing.

Add comment