: SEO and HTML semantics of putting H2 above H1 elements? Here's a hypothetical from both an SEO and semantic HTML/content architecture perspective: Consistent code When building a multi-page site,

@Tiffany637

Posted in: #Architecture #Heading #Keywords #SemanticWeb #Seo

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:


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.
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.

Vote Up Vote Down

Login to post a comment!