Is it smart to use H2 headings under the H1-title?

[guarriman3]

Hi,

I manage a website with commercial products. Each product has its own webpage, showing a description, photos, and how to fix it.

Currently, this is my structure of the heading titles of each one of the webpages:

<h1>Acme Product 007</h1>
<h2>Need to fix your Acme Product 007? This is the right website</h2>
<h2>You will find photos, descriptions and instructions to repair your Acme Product 007</h2>

<h3>Description</h3>
Blah blah

<h3>Photos</h3>
Blah blah

<h3>How to fix the Acme Product 007?</h3>
Blah Blah
(this sections includes as well a FAQ Schema with the "How to fix the Acme Product 007?" question)

I wondered if this a smart SEO structure, or whether I should remove the H2 headings under H1, converting the H3 headings into H2.

Thank you.

[not2easy]

The best explanation I have found of the <H tags, to help you completely understand the "what" and "why" and "how" of these things is at Mozilla Developers [developer.mozilla.org]

There is an ongoing discussion of best practices in our HTML forum: [webmasterworld.com...]

[robzilla]

The best explanation I have found of the <H tags, to help you completely understand the "what" and "why" and "how" of these things is at Mozilla Developers

Except for the part about SEO: "Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization)."

You're wasting your time trying to come up with a "smart SEO structure". Use them, don't use them, it's unlikely to make a difference in 2021.

Like lists and tables, headings do, of course, still give structure to a page, and that may help search engines understand the content better.

But it's not going to give you any kind of a bump in the rankings.

[Wilburforce]

But it's not going to give you any kind of a bump in the rankings.

More the other way round, I think: to give yourself a fighting chance you need to employ Best Practice in everything. Every little thing that isn't quite right is an incremental point lost.

As far as semantic elements go, using them correctly is best practice, and not2easy's Mozilla link is as good an explanation of how to use h tags as any I have seen. Use them to tell SEs and users (h1) what the page is about, (h2) what each main section is about, (h3, 4) what the subsections (and subsections of subsections) of each main section are about. Do not use them merely to emphasise key words and phrases, or for formatting. Which tag to use where should be informed by the structure of the page's content. In your own example, your first <h2> has no content: it is a strapline without any subject matter, and therefore misuses the tag. If that is typical of how h-tags are used on that website, it would be better not to use them at all.

[lucy24]

That's not an <h2>; it's a subhead. In fact I regularly use a <span class = "subhead"> for this kind of thing, where a heading includes text that is less important but is still conceptually part of the same heading.

[aristotle]

The <h2> tag is normally used for a larger section of content than just one or two sentences.

Quote:

<h2>Need to fix your Acme Product 007? This is the right website</h2>
<h2>You will find photos, descriptions and instructions to repair your Acme Product 007</h2>

Instead, I would replace the above with this:

<p>Need to fix your Acme Product 007? This is the right website</p>
<p>You will find photos, descriptions and instructions to repair your Acme Product 007</p>

In other words, replace the <h2> with <p>.
On several of my sites, google often shows the first one or two sentences at the top of a page as a snippet in the search results description of the page.

This approach also frees up the <h2> tag for possible use lower down the page

[robzilla]

Every little thing that isn't quite right is an incremental point lost.

I see your point, but I think assigning any weight specifically to content within heading tags is inherently risky, from a search engine's point of view. Webmasters cannot be trusted. What we've seen throughout the past decade is that Google continues to move away from signals that webmasters can directly influence or tweak and towards signals that more closely estimate or measure the user experience. We know that Google locally renders the pages in its index, so I would not be surprised if nowadays they judge content based on its visual presentation rather than its code structure. That way, it wouldn't matter if you used <h1> or <div> if the visual end result is the same, thus making it harder for webmasters to cheat and easier to interpret pages that were not structured using Web standards for semantic markup (which, after all, doesn't actually reflect on the quality of the content itself). So while I still think it's good form to follow those Web standards, I fear it may be naïve to believe you can use them to trick a modern AI-powered search engine.

[Wilburforce]

@robzilla

Yes, I agreed with your overall point: there are enough badly-used tags and poorly-coded pages out there that correct (or incorrect) use isn't going to rocket you in any direction. However, all else being equal the better code will rank higher, and in a competitive niche I don't think you can afford to be sloppy.

I think you may well be right about presentation also.

[lammert]

Using <h2> tags for sub-headers is a 2005 SEO technique. To address this, we have new HTML tags and ARIA roles for this. The use of ARIA roles is undervalued by many web-developers IMHO.

The proper way to do this is to use the HTML5 <header> tag and the predefined ARIA role doc-subtitle.

<header>
 <h1>Acme Product 007</h1>
 <div role="doc-subtitle">Need to fix your Acme Product 007? This is the right website</div>
 <div role="doc-subtitle">You will find photos, descriptions and instructions to repair your Acme Product 007</div>
</header>

[JorgeV]

Hello,

Is it smart to use H2 headings under the H1-title?

Yes, but not the way you use it in your example.

[guarriman3]

Hi there,

Thank you very much for your comments. After reading them and seeking further information, I decided to change the format:

<header>
<h1>Acme Product 007</h1>
<p role="doc-subtitle">Need to fix your Acme Product 007? This is the right website</p>
<p role="doc-subtitle">You will find photos, descriptions and instructions to repair your Acme Product 007</p>
</header>

<h2>Description</h2>
Blah blah

<h2>Photos</h2>
Blah blah

<h2>How to fix the Acme Product 007?</h2>
Blah Blah
(this sections includes as well a FAQ Schema with the "How to fix the Acme Product 007?" question)

I changed the CSS decoration of H2 to be the same as the old H3, and introduced a new CSS decoration for role="doc-subtitle" to be the same as the old H2.

[Wilburforce]

@guarriman3 - yes, that is much better.

[aristotle]

Just a reminder:
After you make big changes, it's a good idea to check your new source code with the two validators (If you haven't already done so):

[validator.w3.org ]
[jigsaw.w3.org ]

I like to use the "Direct Input" option