SEO and HTML semantics of putting H2 above H1 elements?

Question

Here's a hypothetical from both an SEO and semantic HTML/content architecture perspective:

Consistent code

When building a multi-page site, adopting the following architecture on all pages is pretty common for code manageability:

<h1>Company Name</h1>   <h1>Company Name</h1>   <h1>Company Name</h1>   etc.
<h2>Tagline</h2>        <h2>About Us</h2>       <h2>Category 1</h2>     etc.

However, there are two considerations that dissuade against this practice:

1. Considering the semantics of the H1 element, it is deemed to be a page's main heading. In this case, each page will have the same leading heading — the company name.
2. When it comes to SEO, putting the page's target keywords in the H1 will likely help it rank better (even if ever so slightly).

Alternating H1

Considering that, the following seems to be better:

<h1>Company Name</h1>   <p>Company Name</p>     <p>Company Name</p>     etc.
<h2>Tagline</h2>        <h1>About Us</h1>       <h1>Category A</h1>     etc.

This way, the leading heading of each page will concern each page's main topic. And each page will have a better chance for ranking in search engines for whatever is in the H1.*

But wait a minute...

With this method, we run into problems when the site architecture looks like the following:

Home
About Us
Category A
Category A - Product W
Category A - Product X
Category B
Category B - Product Y
Category B - Product Z
etc.

In this case we may we want both the category and product names to be prominent in the code, and rank well in search.

Following semantic practice, that would leave the product name as an H2.

But that would go against our original goal: to have the H1 be the most descriptive heading for the page.

H2 above H1

So what does that leave us? Putting the category inside an H2, with the product name in an H1:

<h1>Company Name</h1>   <p>Company Name</p>     <p>Company Name</p>     etc.
<h2>Tagline</h2>        <h1>Category A</h1>     <h2>Category A</h2>     etc.
                                                <h1>Product X</h1>      etc.

But hold on, didn't I say semantic HTML? This is no longer semantic, since the page outline will now be:

    1.1 Category A    <h2>
1.0 Product X         <h1>

Instead of the semantically correct:

1.0 Product X         <h1>
    1.1 Category A    <h2>

But that no longer meets the purpose...

What is the solution here?

How can we have it all?

The most relevant heading on the page inside an <h1> for SEO purposes, but still putting "Product X" above "Category A" in semantic importance (with both being headings), with "Category A" appearing first in the document.

I can think of putting the H2 and H1 (in that order) inside the <hgroup> element, but that still won't help the semantics.

Would putting the H2 alone inside a <hgroup> or <section> help? Would that be semantically correct?

---

_{* The company name can easily be styled equally across all three through the use of a CSS #id selector for the h1 and p elements.}

Answer 1

The story of 20% SEO is not acceptable.

Google clearly identifies the different reasons for publishing 2 or more H1 tgs in the same HTML page if each H1 tag belongs to/ is wrapped by each section tag. In semantic HTML 5, each SECTION tag must have at least one H tag (typically H1 or H2 as appropriate). In your case, it's better to put "Category Name" as the first H1 in the First Section and the "Product Name" as the First H1 in the Second SECTION tag. If you do so, I recommend to keep at least one P tag under the first H1 (Category Name) and at least one p tag under the next H1 (Product Name). It makes the content flow more meaningful both to the crawler and the human visitor.

At present if you have to sell only 1 product that comes under one category, this method is highly acceptable.

Then Google will take into consideration that there are two main facts to be considered as main headings which are "Category Name" and "Product Name". It's highly recommend you to embed HTML 5 Micro data in this kind of situations as it specifically tells Google what is meant by "Category" and what is meant by "Product" and what is the relationship in between these two related concepts. More Details are found in: https://www.w3.org/TR/microdata/

Answer 2

Many people assume that you should only ever use one H1 on the page otherwise it dilutes the actual content of the page, this simply isn't true. A H1 Company name and then a H1 for the content is absolutely valid by all means.

Google has the ability to work out which is the content of the page and what is not, such as headers and footers. If are still concerned about multiple h1's, h2's diluting the content then you can use HTML5 to make it more clear to Google what is the content and what is not, such as aside and article.

For example:

<body>
<header>
    <h1>Company Name</h1>
    <h2>Tagline</h2>
</header>
<aside>
    <h2>Category A</h2>
</aside>
<article>
    <h1>Article Name</h1>
</article>
<footer>
</footer>
</body>

It's important to note that Google factors in many elements to consider what the page is most worthy for ranking, for example on the frontpage your going to have Company name in title, meta description, and repeated a few times in the content, this would make Google think this is the keywords its ranking for.. Now on pages like Category A, your not going to have company name in title, meta, or actually repeated in the elements of the content as much as the words your attempting to rank for, therefor its pretty much established that the H1 is not relevant to the other H1.

Answer 3

The Onsite SEO that you have been mentioning does not even take 20% of the entire SEO. So there is no point to fuss over it much.

Rather than creating content for the search engines, I suggest you content for your users. Readability is a good factor here. The SEO advantage over both the methods are quite negligent, and I suggest you stick to one that looks better.