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...
For further actions, you may consider blocking this person and/or reporting abuse
This is great news for web components!
Hey, thank you for sharing; this is very helpful!
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?
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.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.
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.
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!importantYeah, 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.
Do the pages need to be server side rendered or are you testing client side pages?
Great question! These were all rendered client-side.
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...
All of my examples were client-side hydrated and it didn't have any issues with it.
Thanks for checking this out.
It is now October. Do we know if Bing got around to fixing this bug?
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.
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.