Google Answers If Semantic HTML Element Has An Impact


Google’s John Mueller, in an SEO Office Hours session, answered a question about whether the <article> semantic HTML element has an impact on Google.

John answered the question directly but there is a fair bit of nuance that was left out of his answer that needs to be addressed.

Does the <article> Element Have an Impact on Google?

The person asking the question about the <article> HTML element wanted to know how Google handled that element.

They also wanted to know if wrapping product listing content in an <article> element was a good practice.

This is the question:

“Does the use of an <article> HTML tag have an impact on Google? Is it better to put the content of a product listing page in an <article> tag?”

This is how Mueller answered:

“The <article> HTML element does not have any particular effect in Google Search.

This is similar to lots of other kinds of HTML tags.

There’s so much more to using HTML than just Google Search though!

Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.”

Semantic HTML Elements

John Mueller correctly said that there are “semantic reasons” for some HTML elements.

In general, the word “semantic” relates to what the meaning of a word is.

But in computing, the word semantic relates to the purpose of the code.

Understanding the role of HTML code helps developers understand what that code is doing.

Semantic HTML tells developers (or search engines) what the purpose of that code is.

For example, the <footer> element tells developers or search engines that whatever is wrapped within that element <footer></footer> is the footer section of the webpage.

The <footer> semantic HTML element describes the purpose of that section of content.

The <article> Element

John Mueller correctly said that the <article> element has a semantic reason.

The semantic reason is that it communicates that the content wrapped between the <article></article> elements are the main content.

Search engines divide a page into sections like the navigation, main content, and footer.

Google’s Martin Splitt talked about that in a couple podcasts.

Regarding the use of heading elements to identify what sections of a page are about, Martin Splitt said:

“It’s pretty much that.

With any kind of content some semantic and some structure in your content so that it’s easier for automated systems to understand the structure and the kind of like, the bits and pieces of your content.”

In another webinar, Martin Splitt talked about what Google calls the Centerpiece Annotation, which is like a summary of what the topic is about.

Martin Split discussed how Google looks at the semantic content and the layout tree (how the HTML elements label the sections of a page) to determine what the topic is.

He explained:

“That’s just us analyzing the content and, I don’t know what we have publicly said about this, but I think I brought it up in one of the podcasts episodes.

So I can probably say that we have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content, as well as potentially the layout tree.”

He goes on to explain that Google reads from the HTML content structure to figure out that the content contained in that section is about a specific topic.

So in other words, the <article> element isn’t an SEO ranking factor.

It’s used as a way to divide a webpage into sections and communicate to Google what that section is, what can be found in that part of the webpage.

<article> Element and Accessibility

Mueller also mentioned the use of the <article> element for purposes of making a webpage more accessible.

The Mozilla Developer resource pages, a great source of information, describes the role of the article element:

“…the <article> element should be used. User agents translate this to the appropriate accessibility information just like the article role.

Using the <article> element also helps search engines better discover the structure of a page.”

Can <article> Element Be used for Product Listing Pages?

The last question that was asked is if the <article> element can be used for product listing pages.

The official HTML documentation indicates that yes, the <article> element can be used for a product listing page because it’s an “independent item of content”.

The documentation explains:

“The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

The Mozilla Developer documentation for the <article> element is more explicit:

“The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).

Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

Should You Use the <article> Semantic HTML Element?

I think that some people misunderstand the word “semantic” when considering the phrase, Semantic HTML.

It is not semantic in the sense of telling Google what a topic is about.

It’s semantic in the sense that it relates to identifying the purpose of a section.

And that’s what the <article> element does, it tells Google the purpose of a section of a webpage.

The fundamental essence of SEO is making it easier for search engines to understand what a webpage is about.

The <article> element makes it easier for search engines to identify where the main content is, making it easier to find where to find what Martin Splitt calls, the Centerpiece Annotation.

What the Google SEO Office Hours Video at the 6:44 minute mark:

Featured image by Shutterstock/ViDI Studio





منبع