Is it alright to use multiple h1 tags on the same page, but style them differently?

Question

I have a webpage that I use h1 tags multiple times within various DIVs and I style h1 for each div to be the appropriate size.

For example...

#content h1 {   font-size:22px; }  #left-nav h1 {   font-size:14px; }  #content .recent-news h1 {   font-size:16px; } 

Is this alright? I am worried about SEO.

What is the best way to go about this? Or am I worrying about nothing?

Answer 1

Matt Cutts from Google answered to More than one H1 on a page: good or bad? (Mar 5, 2009) with:

Well, if there's a logical reason to have multiple sections, it's not so bad to have, you know multiple h1s. I would pay attention to overdoing it. If your entire page is h1, that looks pretty Creti, right? So don't do all h1 and then you CSS to make it look like regular text because we see people, who are competitors complain about that if users ever turn off CSS or the CSS doesn't load, it looks really bad. So, you know, it's ok to have a little bit of h1 here and then maybe there's two sections on a page, and so maybe have a little bit of h1 here.

But you really should use it for headers or headings, which is what the intent is. Not to just throw h1 everywhere you can on a page. Because I can tell you, if you just throw h1 everywhere on a page, people have tried to abuse that and so our algorithms try to take that into account so it doesn't really do you that much good. So I would use it where it makes sense and more sparingly, but you can have it multiple times.

Answer 2

Just remember that your h1s are used to indicate context, not layout. So, there's nothing inherently wrong with having several on a page.

In this specific example, you need to decide if your left-nav h1s have the same contextual importance as your content h1s and your recent-news h1s. If a clear hierarchy exists in your mind, use your header tags to demonstrate it.