Two H1 tags on One Page - Effect in Google SERP

[gouri]

I know that many people have said that Google pays a lot of attention to the H1 tag. It carries weight in the SERP.

I wanted to ask if it is ok to have two H1 tags on the same page.

E.g. <H1>Build Red Widgets With Machines</H1>
<H1>The Best Way to Create Widgets</H1>

Maybe it can be as the above or maybe the second one can specified to be a little smaller in font size than the first H1 tag but there are still two.

I wanted to ask what your guys experience has been with this? How does Google view this? Sometimes, I feel that it may take more than one phrase to say what a page is about.

[gouri]

Ted and Andy,

You guys have made excellent suggestions. I think changing the font tags that I have into <span> tags would be a very good idea. It's better to use tags that are in use today.

About the CSS, is that internal or external?

[Receptional Andy]

I used inline CSS (including the style within a style attribute on the element itself). You could also put something like the following in an external CSS file:

h1 span {display:block;}

And then simply have the below for your heading:

<h1>A main heading - <span>this text will be on a newline</span></h1>

If you have questions on use of HTML [webmasterworld.com] or CSS [webmasterworld.com], then they both have individual forums on WebmasterWorld which are the best place for those specifics.

[gouri]

Andy,

I think for what I am doing I will go with the inline so I will use the suggestion that you made.

Also, thank you for the links to the HTML and CSS sections. I think there is some very good information on them.

[gouri]

Have you guys seen using a tag that is deprecated such as <font> have an affect in the SERP?

[Receptional Andy]

When people say the <font> tag is deprecated, they mean that it is no longer part of the existing HTML standards [w3.org] - the goal of which is to make the web as interoperable as possible - i.e. work for as many people as possible.

This isn't the same goal as making HTML that will work well for search engines, which have a different set of criteria for evaluating a document - since what they're looking for is relevance to a user-defined search query.

Which isn't to say that the standards don't have an impact - be sure that Google pays a lot of attention to things like the HTML spec [w3.org], and I've had nothing but success with search engines and sites generally by adopting a standards-based approach.

Regarding <font> particularly, it's not something that should be high on anyone's priority list. It's not going to have a negative impact (view the source of this page, for instance ;)), but most likely you'd be better off focussing on things more likely to affect relevance.

[gouri]

Thank you for explaining to me what exactly a deprecated tag means, and also for tying it into the Google SERP.

Also, thanks for the links. There is a lot of information in them.

[dstiles]

A few weeks ago I noticed a site disappearing from SERPS after a make-over a few months previous.

Part of the make-over was to multi-line the H1 tag using BR, with one colour on the first line and a second colour on the second line enclosed in SPAN. Since this was pretty much the only new departure from the earlier site in terms of formatting it occurred to me the SPAN in the middle of the H1 tag may be the problem.

I asked the question hereabouts and someone confirmed it was a bad idea to SPAN but that the BR was ok. Comments in this thread seem to contradict this. Me? I'm sticking with no SPAN. :)

[tedster]

As a general rule, I ask every web team I work with to minimize <span> tags - period. It's a wasteful way to code and I feel that span gets used mostly by web authors who don't understand CSS very well. Sometimes it's unavoidable because of an inadequate CMS that locks people into the practice.

That said, I'm wondering if you tested your observations more precisely, dstiles? Website make-overs usually involve many changes. This seems like an odd reason for ranking problems to me, unless every page went from a short and concise <h1> element to a long and expansive multi-line <h1>.

Whether the H1 change was part of the ranking problem or not, I still agree with your direction.

[encyclo]

What I think I have to consider is having one H1 tag and to include a <BR> tag inside the H1 tag and also to have two font tags inside the H1 tag if the second line is going to be smaller than the first line. If I can make both lines the same size then I will only need the <BR> tag inside the H1 and one font tag.

Using a

<br>

is fine, but when you start talking about different text sizes, it is a strong indication that the two phrases are of differing importance. As such, you should be using different elements for each. The most logical would be a

h1

followed by a

h2

:

<h1>Build Red Widgets With Machines</h1>
<h2>The Best Way to Create Widgets</h2>

I concur with the comments above that mention that

span

is overused - there is almost always a better solution.

[gouri]

Is it ok to stick to the <font> tag since we are not sure about what the affects of the <span> tag might be? Unless there is another tag that can be used?

Encyclo,

Good point. If the phrases are not the same text size, that does sort of say that the phrase with the larger text size is more important. I think I have to consider keeping both phrases the same text size.

But if both phrases are in H1 tags are they both given the same importance even the font sizes are different?

[edited by: gouri at 12:21 am (utc) on Oct. 28, 2008]

[Receptional Andy]

span is overused - there is almost always a better solution.

But if you want, for instance, different colours or fonts (or any purely visual change) within a single heading, what other option is there?

[gouri]

Hi Andy,

Could you use a font tag twice to specify the different fonts and sizes?

[tedster]

But if you want, for instance, different colours or fonts (or any purely visual change) within a single heading, what other option is there?

None really - except to question the value of that kind of "want".

Gouri - yes you "can", but really, don't use a <font> tag at all, as we discussed above.

[encyclo]

But if you want, for instance, different colours or fonts (or any purely visual change) within a single heading, what other option is there?

<strong></strong>

,

<em></em>

,

<b></b>

,

<i></i>

,

<li></li>

, ... it all depends on what you are trying to achieve - or why the style is different from the rest of the phrase. Is it part of the phrase, or not? If you remove the CSS, does it make sense without the style? If not, then you need to separate using different HTML elements and not rely on conveying meaning via CSS alone. But we're stepping outside the realm of what's best for Google. :)

Using a

<font>

tag is as meaningless as

span

- the issue is not the style of what you're presenting, but the semantics. Googlebot doesn't "see" color or appreciate font sizes. The use of HTML elements such as

h1

is part of structuring the page, the heading is only part of the equation.

[gouri]

Going back to what Ted just said, I think a <span> tag used once in the H1 tag is probably the best way to go. Inline CSS maybe.

Also, I'll not use the <font> tag, and I'll keep one font size in the H1 tag and use a <BR> tag if I have to have the phrases on separate lines.

I think this is the best way to go?

[Robert Charlton]

<h1>Build Red Widgets With Machines</h1>
<h2>The Best Way to Create Widgets</h2>

This is the way to do it, but I myself would never put these two tags directly together. The <h1> heading, about building red widgets with machines, should... in my opinion... be following by at least a short paragraph of text that elaborates on the concept (and vocabulary) of the <h1> heading.

I'd then use an <h2> heading to introduce text content that elaborates what the <h2> heading says.

Headings are about focusing sections of a page. You don't want to make them too long, or your focus becomes blurred. I try not to make them too short either.

[gouri]

I think you are saying that the heading tags have to be followed by description. That will really help people to know what the page is about.

I will try to elaborate on the first tag before readers get to the second one.

[Marcia]

Instead of <br> you can use css to set a width for the H1 so it will just automatically wrap.

[Shaddows]

Good point. If the phrases are not the same text size, that does sort of say that the phrase with the larger text size is more important. I think I have to consider keeping both phrases the same text size.

But if both phrases are in H1 tags are they both given the same importance even the font sizes are different?

Gouri,
Are the two phrases ACTUALLY as improtant as each other? Or do you just want google to THINK they are- and thus for the page to rank equally well for both?

If its a google-ranking thing, author two pages, optimised for each.

The very fact you considered having different sizes implies to me THEY ARE NOT OF THE SAME VALUE to the user. Indeed, on re-reading this whole thread, it appears "The Best Way to Create Widgets" is more of a tag-line to your H1 heading "Build Red Widgets With Machines". If so, it could probably avoid being a header at all.

It all goes back to your intent. If you think putting "Build Red Widgets With Machines" in a header tag will substantially increase your ranking for that phrase, you're probably over-estimating the weighting given to that element.

I agree with Tedster that you will probably get more joy in the long run by correctly marking up your pages (reducing 'noise' as he says) across your site, than by trying relatively ineffective tricks on specific pages.

[tangor]

When I finally got around to updating some pages on my site unchanged since 1997 (and looked at the HORRIBLE code I used back then) the multiple H1s that got in there were removed. H2s were used as intended. The pages bumped up significantly over the month or so following and have not lost anything since. That's my practical experience. Since about 2000 I've followed the guidelines for page markup and it seems to work! :)

[gouri]

Shaddows,

I feel that the two phrases are both as important as each other but I understand what you are saying. I should focus on providing good content and not just on the heading tags.

Tangor,

I am in the situation where I have two H1 tags on one page. Looking at your move in the SERP after removing the multiple H1 tags, maybe this is something that I have to do. Find a way to put my two phrases into one H1 tag for the ones where both phrases are important. Probably by including a <BR> tag.

Also, if the <span> tag is going to be used to specify the font and text size, I just wanted to mention that if the H1 tag is going to be centered inline css should be used on that as well and not the <align> tag which I think is also deprecated.

[gouri]

I know this is more programming but I just wanted to mention it. If you are using inline CSS to center the H1 tag, then the other elements (font, text size) can also be specified in the H1 tag. Then you can write the text, put the <BR> tag and the other text and finish with </H1>.

[gouri]

Does inserting a <br /> tag in between phrases in an H1 tag reduce the affect of the tag in the SERP? Also, if you are inserting a <br /> tag in the H1 tag would you try to put your main keywords before the <br /> tag instead of after if possible?
Is it better to use a - or : instead of a <br /> tag and put the two phrases of the h1 tag on the same line instead of on two lines? I mean the affect in the SERP?

I would appreciate if someone could help me with this.

[Shaddows]

I would seriously doubt that it will have any significat affect on SERPs. It is such a minor thing.

However, as you are clearly hung up on this, I would advise you to TEST AND SEE. (Again, as it isn't affecting anything, you might find the fiddling is more detrimental than just picking WHATS BEST FOR THE USER and sticking with it)

[pageoneresults]

Does inserting a <br /> tag in between phrases in an H1 tag reduce the affect of the tag in the SERP?

But wait! Didn't we already cover this whole <br /> issue a page or two back? Yes we did, this was tedster's reply...

Using a <br> within an <h1> is OK - and sometimes it really helps the visitor to make the headline more sensible in a quick glimpse.

gouri, you can utilize whatever valid "presentational" markup in your html elements, the bot doesn't care unless of course you've totally screwed something up in the code and it can't be indexed which would also mean the visitor probably can't see it.

<h1 style="color:#b00;margin:0 0 1em 1em;padding:0;text-transform:uppercase;">Word Word Word<br />
Word Word Word Word</h1>

If you really want to be creative, you could also do this...

<h1 style="color:#b00;margin:0 0 1em 1em;padding:0;text-transform:uppercase;">Word<br />
Word<br />
Word<br />
Word<br />
Word<br />
Word<br />
Word</h1>

[gouri]

Thanks for all your feedback. It's great.

This is an option that I came up with which I think is pretty good.

<h1 style="font: 10px/15px arial; text-align: center">text<br />more text</h1>

I can use line-height to create space and a <br /> tag.

[Nuttakorn]

IMO, we should think of nature of content , it should have one header in one article that it is H1, and you sub-header (h2) that should be think to reader and search engine perspective that to have multiple header , it should be confuse to be categorized the content and it should be under one topic that make easier for search engine to rank your document.

[tangor]

Kiddies... gouri seeks to stuff keywords in a title using h1. Let it go. BR works to break h1 into two lines. Always has. He wants to have cake and eat it, too, by having the second line appear to be not as important as all the keywords actively stuffed into the header:

THIS IS REALLY COOL
And More Cool Follows

I'm done. H1 abuse killed the 1990's, it remains dead today....

[nealrodriguez]

use them like an outline for a school paper:

<h1>Heading</h1>
<h2>Subheading #1</h2>
<h3>Subheading #1.a</h3>
<h3>Subheading #1.b</h3>
<h2>Subheading #2</h2>
<h3>Subheading #2.a</h3>
<h4>Subheading #2.a1</h4>
<h4>Subheading #2.a2</h4>

[System]

The following 2 messages were cut out to new thread by tedster. New thread at: google/3875388.htm [webmasterworld.com]
2:43 pm on Mar. 20, 2009 (EDT -4)