{"id":4842,"date":"2023-06-20T13:20:33","date_gmt":"2023-06-20T13:20:33","guid":{"rendered":"https:\/\/afreeurl.com\/?p=4842"},"modified":"2023-06-20T13:20:33","modified_gmt":"2023-06-20T13:20:33","slug":"googles-john-mueller-warns-against-custom-elements-in-the-head","status":"publish","type":"post","link":"https:\/\/afreeurl.com\/?p=4842","title":{"rendered":"Google’s John Mueller warns against custom elements in the head"},"content":{"rendered":"

<\/p>\n

Recently, there was a discussion on Twitter about the validity of using custom elements in the website section.<\/p>\n

Custom elements are part of the web component specification, allowing developers to create HTML elements tailored to their needs.<\/p>\n

Using custom tags, developers can create self-contained, reusable HTML elements that work independently from the rest of the code.<\/p>\n

On Twitter, one person asks, “Does anyone know if it’s technically valid to have a custom element in the document header?”<\/p>\n

John Mueller, advocate for Google Search, suggested<\/a> that this practice could alter the way Google renders and indexes the page.<\/p>\n

Mueller states:<\/p>\n

“Using custom elements in the probably breaks page rendering in Google Search. If there are “search” meta tags, etc. below the custom elements that should be there (like noindex robots), may not be recognized by Google during rendering.”<\/p>\n

Understand how Google renders web pages<\/h2>\n

To fully understand the implications of Mueller’s statement, it’s important to understand how Google renders web pages.<\/p>\n

You can think of a web page’s HTML as a recipe and resources like CSS, JavaScript, images and videos as ingredients.<\/p>\n

The rendering process is like cooking, transforming the recipe into the final product that users see in their browsers.<\/p>\n

As the Google crawler retrieves the HTML, the rendering process begins by interpreting the code and gathering the resources to visually display the web page.<\/p>\n

The SEO implications of custom HTML tags<\/h2>\n

While custom tags benefit developers, their impact on SEO cannot be ignored.<\/p>\n

Custom tags can affect SEO because search engines like Google traditionally rely on standard HTML tags to understand the content and structure of a page.<\/p>\n

For example, if a custom element is used in the file Google may not recognize the standard tags that follow during rendering.<\/p>\n

This could cause Google to miss important SEO-relevant meta tags.<\/p>\n

The argument against using custom HTML tags<\/h2>\n

Although custom HTML tags offer flexibility, there are reasons to use them with caution.<\/p>\n

In addition to Mueller’s concerns, custom HTML tags can cause compatibility issues with older browsers and screen readers.<\/p>\n

There are also potential global namespace clashes and concerns about separating functionality, meaning, and presentation.<\/p>\n

An alternative: JSON-LD tags<\/h2>\n

For those looking to improve SEO while retaining the flexibility of custom tags, JSON-LD tags are a promising alternative.<\/p>\n

JSON-LD, or JavaScript Object Notation for Linked Data, provides a method for encoding linked data using JSON.<\/p>\n

When properly structured, this data can be used in a