SEO for CSS ~ Can I have a title above h1 ?

seo for css. h1 tags and hidden tricks above them.

[avery123]

Hi folks,

I have done a search on this, and am struggling to find an answer.

I was wondering if it is possible to use special CSS tags above h1 in order to use as a kind of Master Header.

I am trying to make a Master header for my human visitors, but include the important keyword in the H1 tag underneath, to please GoogleBot.

Please see this link to view the 4 options.
[law-of-attraction.tv ]

You will see that the 4th one has an image above the h1 tag, though the image is hidden in the CSS file.

Thank you.

Avery

[alias]

Special CSS tags above H1? Could you please rephrase your question?

--

And, you don't please GoogleBot.

Please your human visitors, and GoogleBot will be happy.

In other words -- DO NOT hide content for optimization purposes only, you might very well end up being penalized for that.

Simply display the same header for the bots and the human visitors.

[BeeDeeDubbleU]

DO NOT hide content for optimization purposes only, you might very well end up being penalized for that.

Don't we all do that to some extent? ;)

I don't think the OP is taking about hiding content, he/she is talking about basic styles. I have styled text to be larger than H1 styling before and placed it above the H1 with no ill effects. This is not hiding text. It's just CSS styling and I very much doubt that Google would see any wrong in it. (My 2p)

[alias]

Of course, it would be fine, as long as both titles perceive the same meaning.

Not like <div>My beautiful website!</div><h1 style="display:none;">VIAGRA CIALIS ASBESTOS</h1>

[avery123]

Thank guys - for your replies.

TO alias:
To elaborate, click on my link, then click on OPTION 1. Then view Source in yr browser. You will see that I have placed a div class="intro-header" above the h1 header.
My only purpose for doing this is to present a master section header to be used on a handful of related pages only, visually grouping them together.

TO BeeBeeDoubleU:
I assume that you're saying that using actual text above the h1, styled by a custom CSS tag is OK?

What about this for absolute safety?
Do you think that using an image of type might be the safest option? [OPTION 3]

Or how about hiding the image in the CSS? [OPTION 4]

[Major_Payne]

Code, not only syntactically, but semantically. Images do NOT go between heading tags regardless. There will be nothing above "h1" tags although you can use CSS to style the text bigger than another "h1" set. That, basically, is incorrect when you need to use a lower value heading tag to do the same thing. That's why you have 6 heading tags to use.

There's no problem with text above a set of "h1" tags as long as it is relevant use that way.

SEO Tools:

Google Webmaster Tools: [google.com...]
Search engine submission: [en.wikipedia.org...]
(Search Engine Optimization (SEO - Getting Started): [htmlgoodies.com...]
[seo.alleycode.com...]
[websiteoptimization.com...]

10 top SEO tips that you can use to improve your website's ranking on the search engines. Read the full article here:
[elated.com...]

Ron

[BeeDeeDubbleU]

Images do NOT go between heading tags regardless.

Why not? I do it all the time.

And AFAIK there is nothing to stop you placing text above an H1 or to style this text as you see fit. It happens all the time (breadcrumbs is a good example). I am not aware of any problem with doing this but feel free to correct me if I am wrong.

[avery123]

Thanks Major_Payne,

I understand that I shouldn't use an h6 above an h1.
I was thinking more of a custom CSS tag, like:

<div class="intro-header">Blah</div> 

... or, maybe an image of type:

<img src="image-files/title-text.jpg" width="406" height="30" /> 

but, not to use the image of type in an h tag.

Is it safe?

[alias]

That is perfectly safe as long as you do not abuse it.

[Major_Payne]

Images do NOT go between heading tags regardless.

Why not? I do it all the time.

Because images are not titles and it is semantically incorrect to use them between title tags. Just because you CAN do something, doesn't mean it is the correct way to do it. SEs will not see anything but the image tag and what is in it.

Might work if you include the title="" attribute inside the image tag along with the alt="" attribute. The title="" attribute is the correct one to use for the tooltip anyway. IE has always gotten it wrong by providing a tooltip using the alt="" attribute.

Just best NOT to use images inside the heading tags. Of course, it doesn't matter a lot until you start using XHTML 1.0 and want to be SE friendly.

[BeeDeeDubbleU]

By "heading tags" I thought we were discussing H1, H2, etc.

[Major_Payne]

By "heading tags" I thought we were discussing H1, H2, etc.

The <h1> to <h6> tags are used to define HTML headings.

[BeeDeeDubbleU]

Yes, I know.

[commanderW]

For SEO, I believe the wisdom and experience running through many threads here on Webmaster World would guide me to pick the text of Option 1.
Nix Option 2 - An h6 above an h1 is improper code syntax.
Options 3 and 4 are images. Text is better for SEO. But the use of a background image in Option 4 is a neat trick. If, that is, you ever want to make a line of text completely obscure to machines yet visible to humans.

I have never read that the h1 should be absolutely the first text on a page.
And so my instinct (But not solid years of experience playing with and studying the search engines) says to take your text option and work it. Give it p tags instead of just putting it in a div. If you want the search engines to notice and pay attention to the text in your Master Heading placed above the h1. The more words the better. The more detailed and specific the html wrapping those words the better (using bold and italic and underline around particular words or phrases, even more better). Search engines are desperate for indicators of meaning.

Maybe someone on this forum has special knowledge of the priorities and interest search engines give to different html elements, like p and div. I have read posts here on this subject. You can tailor the code you wrap this text in according to your wishes.

[commanderW]

@Major_Payne and BeeBeeDubbleu - It is my impression that the OP meant placing an image above the h1 element, not between the h1 tags.

so, if I understand you both,
Major_Payne, you must be correct that an image doesn't belong between the h1 tags.
BeeBeeDubbleu, You must be correct that it is quite okay to place an image between h elements, like under the h1 but above the h2 with no text.

It makes sense to me, if I understand the three of you correctly :)

[Major_Payne]

An image does not belong between any level of heading tag be it an h1 or an h6. I do tend to blather on at times so sorry.

[rocknbil]

I was wondering if it is possible to use special CSS tags above h1 in order to use as a kind of Master Header.

I'm pretty sure this answers your original question, it's done quite often.

<h1>Page-Relevant Keywords Here</h1>

Say no to spam. Keep it relevant. :-) Then,

h1 {
display:block;
width: 800px;
height: 120px;
margin:0 auto 0 auto;
padding:0;
background:url(/path/to/uber-cool-header.jpg) top left no-repeat;
text-indent:-5000px;
}

Visually you are replacing the h1 itself with an image. The text indent renders the text invisible, but does not hide it. Semantically, you are keeping good document structure and relevance.

[rocknbil]

Duplicate post, got a 500 first time through, wuzzup Brett? :-)

[milosevic]

I just saw this and thought it was an interesting topic, I also wouldn't agree with some of the advice given so far!

Google is generally considered to (nowadays) use size and colour contrast of text to determine intended purpose/significance, rather than if it is a heading tag or not. This is likely to be because misuse of heading tags is so widespread. I still fully believe in a correct semantic heading structure, but not really for SEO reasons.

So making a big h6 above a small h1 is pointless, because Google will consider the h6 to be the main heading and the smaller h1 to be less important.

This means option 1 and 2 are basically exactly the same option. I can't see any real world difference in how they would be handled by Google.

I'd say option three is definitely the best for SEO and good design practice - Option 4 is overkill on the paranoia front.

That is presuming your intention here is to have a user-friendly piece of text (in the image) and search engine friendly text in the h1 (a few people have given advice as if both elements are being used for SEO).

Search engines can basically only read the alt attribute of the image so you could use whatever you liked as text without fear. 'hiding' the image is unnecessary, at least until Google add OCR technology to their spiders!

I think Option 3 is a great solution for 90% of situations.

[avery123]

thank you for your feedback *
it is much appreciated

:)

[rajendradhakal]

its great deal to all replies
thank you to all

[swa66]

An image does not belong between any level of heading tag be it an h1 or an h6.

Do you have any reference to that effect ?

When I read the HTML5 spec <img> tags are used inside <h1> tags as an example of where to use them.
From [w3.org...] scroll a bit down and you see:

<h1><img src="XYZ.gif" alt="The XYZ company"></h1>

And even validating a <h1> containing just a <img /> in strict xhtml1.0 is said to be valid.

Semantically an image in just inline content, just like a letter word in a phrase.

An image that is part of the content is always fine IMHO.
Problem is that many images are used for layout (and as such as as bad as tables are).

[webastronaut]

Looks like avery123 gets around the net...Just googled.
What's your master plan of attraction avery123?

[Major_Payne]

Do you have any reference to that effect ?

Of course it CAN be done! It WILL validate, but the w3c.org is just showing you an example. NOT coding semantically. SEs would expect to read something between the heading tags other than an image.

I code to XHTML strict and HTML 5, but I do it semantically as well as syntactically.

Just because something CAN be done, doesn't mean it should be. Put your images between your head tags if you want. Just because the Validator likes it, still doesn't mean it SHOULD be ok that way. Other factors come into play at times.

[phranque]

the use of images in headers was extensively geeked in this thread:
accessibility and <h1> header images:
http://www.webmasterworld.com/accessibility_usability/3844966.htm [webmasterworld.com]

the SE's will happily read the alt attribute value and use it for header tag content.

[kaled]

It is perfectly reasonable to place an image with other text within a heading, however, it would be stupid to place an image on its own within heading tags.

Headings are block-level elements so if you want to align an image with the text of a heading (which is entirely reasonable) the only sensible way to do this is by placing it within the heading.

An h6 above an h1 is improper code syntax

Again, only a code-nazi would believe this...

Firstly, the ultimate heading of a page is the title, therefore you may reasonably have as many H1 headings as you wish and undoubtedly you could have an H6 above the second H1.

Secondly, it is perfectly reasonable to place an H3 within the range of an H1, etc. therefore, following the logic from above, it is reasonable to use an H2-H6 as the first heading and use an H1 below it.

Doubtless someone will disagree, so consider this...

Let's say I have a website about spare parts and I want to place common generic parts are the top of the page. Each of these parts might reasonably be given an H2. Then, below the generic parts I might want to list parts by manufacturer. The manufacturer names might reasonably be given H1 so that the parts themselves are given H2 (just like their generic counterparts).

Use H1-H6 sensibly for the content of your page and ignore idiots who tell you that this or that is wrong.

Kaled.

[phranque]

however, it would be stupid to place an image on its own within heading tags

unless the image contains text that is relevant to that heading.

Firstly, the ultimate heading of a page is the title, therefore you may reasonably have as many H1 headings as you wish and undoubtedly you could have an H6 above the second H1.

title is a meta element in the head of the html document - headers are on-page content.
the title is not part of the semantic structure of the document.
the headers help define the semantic structure.

... it would be stupid to place an image ...

... ignore idiots who tell you that this or that is wrong.

[Major_Payne]

the SE's will happily read the alt attribute value and use it for header tag content.

That's an important point, but I have noticed too many pages that have an alt="" attribute that is blank just so it passes the validator.

With no text, SEs will miss it. Others put in badly worded text which IE wrongly displays as a tooltip on a mouseover and SEs will not make much sense of. It might be better to include the title="" attribute along with the alt="" so other browsers can correctly supply the mouseover tooltip and the SEs may take more notice of the "heading" text within the title attribute than the alt.

Of course, the title="" can be put in the image or the heading tag.

Sorry if I appear hard-headed about all this. Guess I am a code-nazi. :P

[kaled]

the title is not part of the semantic structure of the document.

As John McEnroe would say "You cannot be serious". What definition of semantic are you working with?

The title is displayed at the top of the browser window, and typically in the tab and on the taskbar. It's at the top of the tree and to say that it's not part of the semantic structure of the document is nuts. In javascript there is a document.title property but I'm not aware of a document.firstHeading property or anything of that sort.

Search engines may interpret <img alt> text and weight it according to location, however, I doubt any publish such details of their algos so reliance on guesswork is pretty silly (also reliance on experimental evidence is silly too since such details may be subject to change).

1. Use headings sensibly and ignore silly rules made up by silly people.
   
2. If, for purposes of alignment, you wish to place an image with other text in a heading then do so.
   
3. If you want to place an image on it's own in a heading, ask yourself why - the chances are you don't have a good reason.

Kaled.

[BeeDeeDubbleU]

Firstly, the ultimate heading of a page is the title, therefore you may reasonably have as many H1 headings as you wish and undoubtedly you could have an H6 above the second H1. Secondly, it is perfectly reasonable to place an H3 within the range of an H1, etc. therefore, following the logic from above, it is reasonable to use an H2-H6 as the first heading and use an H1 below it.

Kaled, I have to say that I do not follow your logic and I am not so sure that Google would either. I think most people would agree that for SEO purposes the Page title and the H1 should essentially be the same. That would preclude the use of a second H1.

There is nothing to stop you doing as you suggest but IMO that does not make it right. ;)