SEO and Web Components - 2023 Edition
Tags: webcomponents, seo, html, javascript
Published: 2023-08-07 20:21:21

---
title: SEO and Web Components - 2023 Edition
published: true
description: This post includes some important updates about web components and search engine optimization (SEO)
tags: webcomponents, seo, html, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-06 18:57 +0000
---

> 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](https://break-stuff.github.io/web-components-seo-test/) and the source code can be [viewed here](https://github.com/break-stuff/web-components-seo-test).

## 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](https://search.google.com/search-console/welcome) account, I went to **URL inspection** and clicked on **VIEW CRAWLED PAGE**.

![google search console dashboard with arrows indicating where to click](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y3n7f0sasfoxmmbbwzi.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae572tgt24exxc886nnn.png)

## 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](https://www.bing.com/webmasters) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k6efd2w9ditxpk5enkm.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoqpi9k6nvws8qjgcbpz.png)

![error message from bing webmaster tools stating there is a missing h1 tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq4qup87ebovgl3ah6xk.png)

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!