Recently there was a discussion on Twitter about the validity of using custom elements in the -Area of ​​websites.

Custom elements are part of the Web Components specification and allow developers to create HTML elements tailored to their needs.

Custom tags allow developers to create reusable and self-contained HTML elements that work independently from the rest of the code.

On Twitter, one person asks, “Anyone know if it makes technical sense to have a custom element in the document header?”

John Mueller, Search Advocate at Google, recommended that doing so could potentially affect the way Google renders and indexes the page.

Mueller explains:

“The use of custom elements in the will likely cause page display issues in Google Search. If below the custom items included in the (e.g. robots noindex), “search” meta tags, etc. are present, Google may not recognize them on render.”

Understand how Google renders web pages

To fully understand the implications of Mueller’s statement, it is important to understand how Google renders web pages.

You can think of a webpage’s HTML code as a recipe and resources like CSS, JavaScript, images, and videos as ingredients.

The rendering process is similar to cooking, turning the recipe into the end product that users see in their browsers.

As Google’s crawler retrieves the HTML code, the rendering process begins by interpreting the code and assembling the resources to visually display the webpage.

The SEO impact of custom HTML tags

While developers benefit from custom tags, their impact on search engine optimization cannot be ignored.

Custom tags can have an impact on search engine optimization because search engines like Google have traditionally relied on standard HTML tags to understand a page’s content and structure.

For example, if a custom element in the is used, Google may not recognize the standard tags that follow when rendering.

This could lead to Google overlooking important SEO relevant meta tags.

The argument against using custom HTML tags

While custom HTML tags offer flexibility, there are reasons to use them with caution.

Adding to Mueller’s concerns, custom HTML tags may cause compatibility issues with older browsers and screen readers.

There are also potential global namespace conflicts and concerns about the separation of functionality, meaning, and presentation.

An alternative: JSON-LD tags

For those looking to improve SEO while maintaining the flexibility of custom tags, JSON-LD tags are a promising alternative.

JSON-LD, or JavaScript Object Notation for Linked Data, provides a method of encoding linked data using JSON.

When properly structured, this data can be in a