I'm building a website that contains news. I've got a page with a list of the news articles. And a second page which shows the details of the articles.
And I've got some questions about the structure of the page which shows a single article.
Here is how the page looks like:
<body>
<header data-role="header">
<h1>Article detail</h1>
</header>
<div data-role="content">
<article>
<header>
<h2>Article title</h2>
<p class="lead">Lead</p>
<p><time datetime="2012-10-15" pubdate="pubdate">October 15, 2012</time></p>
</header>
<p>Article content</p>
</article>
</div>
</body>
In a SEO point of view, is ok if the <h1> is always the same and only the <h2> change depending of the article?
I was thinking to put the article title in the <h1> too. But it means we will have the same <h1> and <h2>. I don't really know if it's a good practice.
What's your advice?
I think having "Article detail" as heading doesn't make sense here. It would be similar if the top heading of this very question on Stack Overflow would be "Question". Or if a blog post would have the heading "Blog post".
Your example (let's assume the article title is "John Doe wins!") would produce this outline:
- Article detail
-- John Doe wins!
The page does not contain an "Article detail", it is the article itself, right?
As your pages are part of a website, the heading for the whole page should probably be the site heading (the same for all pages that belong to this site).
The article title would be the main content of that page, but it's still a "child" of the site, so it gets hierarchy level 2.
If you'd have a site navigation ("All news", "Contact", …), this would get level 2 also.
So (let's assume the site is called "ACME News") this would be a suitable outline for the page:
- ACME News
-- John Doe wins!
-- (Navigation)
As long as you use sectioning elements (section, article, nav, aside), you may use h1 everywhere. Or, as you did it in your example, use the headings h2-h6 according to the ("calculated") outline. Semantically there would be no difference.
If and how search engines handle this … well, some probably understand HTML5, some don't. Some talk about it, some not. The (good) search engines will be able to interpret the structure of HTML5 documents (resp. don't "de-rank" pages just because they use HTML5 according to the spec). It's the way how pages will be marked up, some even now and many more in the future.
For your site, I bet most search engines wouldn't even bother which way you choose. It's a relatively minor detail for this extent (only 2-3 headings per page).