Images as headings vs. H1 tags

Can I get the best of both worlds?

[Purple Martin]

Hi guys and gals,

A client insists that I use an image for the heading of each page on her site, as she wants the heading to be in a funky font that isn't installed on 99% of machines. The images are simple one or two word headings that say what is on that page, for example "Lyrics". I don't mind using image headings (the extra bytes don't make a noticable difference even with a slow modem), but it means that the pages don't have H1 tags.

If possible I'd like to include H1 tags in the pages for SEO as well as the heading image. As the page design is very minimalist it would look silly for the same word to be repeated in two different fonts, so I'd like to (here comes the ugly bit) hide the H1 tags. I searched WW and found a topic from over a year ago that suggested the following css solution:

h1 { display:none;}

This suggestion was followed by some fairly heated debate about whether this technique would be considered as spam by SEs.

Time has passed, so what do people think now? Does this cross over the line from SEO to spam? Have you tried it and been burned, or have you been using it successfully?

Thanks in advance.

[papabaer]

I would never use the display:none;

Use the image as your client insists but include alt AND title attritbutes:

<h1 title="brief desciption of page topic"><img src="special text graphic" alt="insert text from graphic" /></h1>

[tedster]

Does this cross over the line from SEO to spam?

You're hiding text from the human visitor that can be read by a spider. That crosses the line that most search engines draw.

It's in the same category as making a font color the same as a background color.

[luma]

papabaer, any reason why you put the title in the h1 tag as opposed to the img tag? I would use

<h1><img src="special text graphic" title="brief desciption of page topic" alt="insert text from graphic" /></h1>

Check the difference in Opera: your suggestion will not display the "tool tip" (at least in my copy of Opera for Linux).

[papabaer]

Luma, you are correct sir! Actually, an interesting side note is that when the title attribute and the alt attribute are assigned to an image, the title attribute takes precedence.

For example:<img title="DJ AIM releases his second album, Hinterland" src="assets/aim_hinterland.jpg" alt="AIM Hinterland CD" /> - the title value will appear as a tool tip in Opera and the alt value will not. This is the correct behavior, since alt values are intended only to display when the image is not available (images-off) or be "read" by screen readers or Braille browsers. Mozilla follows these rules as well.

IE however, WILL display an alt attribute as a tooltip. If a title attribute value is also present, the title will take precedence and display (correctly) in place of the alt value.

I wonder what occurs when both are assigned to an image and presented to a screen reader? Will both be read, or will the alt value now take precendence over the title value?

[Purple Martin]

Thanks for the answers guys, I'll do as you suggest.

So to confirm, by including the title attribute as well as alt, and by putting the image in the H1 tag, will SEs place the same significance on the keyword in the title attribute as they would to normal text in an H1 tag?

I guess if the answer is no there's not much I can do about it, but it's be intersting to know.

[Knowles]

Just a quick question. I am trying to do some SEO on a graphic design site. They use an image as the title basicaly the same issue here. I placed the image in a <h1> tag. But when I validate I get this:

Below is an outline for this document, automatically generated from the heading tags (<H1> through <H6>.)

* Wonder Woman Graphics Logo

If this does not look like a real outline, it is likely that the heading tags are not being used properly. (Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.)

Should I just ignore validating the doc and and use it anyways? Or does anyone have a different solution to get the <h1> effect but still validate with the image?

[papabaer]

If this does not look like a real outline...

If is the telling word here: It is leaving the final discretion to you as the author of the document. From what you imply, in this case,
<h1><img title="This page is about..." src="MyImage.gif" alt="description of image" /></h1> is being used appropriately.

Validators will often offer a warning when there may be an error that because of circumstances (the validator could not "read" the image), cannot wholly be verified. It errs on the side of caution and gives you, the author, suggested guidelines to help make the final decision.

[Knowles]

Thank you papabaer, I guess I missunderstood the explination. I also found out why its not validating, but that is another topic.

[tedster]

...will SEs place the same significance on the keyword in the title attribute as they would to normal text in an H1 tag?

The answer is no, you don't get the SAME boost. But you do get a boost that using the image alone won't give you. The optimum path is still straight text in the H tag. And the clients I've convinced to go that route are very happy with their traffic.

This is a trade-off situation, and pretty headings are not nearly so valuable to a site as the search friendly nature of text headings.

[Robert Charlton]

>>This is a trade-off situation, and pretty headings are not nearly so valuable to a site as the search friendly nature of text headings.<<

It actually needn't be a trade-off. If you design your page right, you can do both. On pages where it's important to maintain a certain graphic look, I have a logo or graphic title followed by a heading that's positioned visually and contextually as sort of a tagline, but which carries the prime optimizing phrases for the page.

The heading can be h1 or h2, controlled by CSS. The graphic or logo should be in a size, color, and/or font that contrasts with the heading... and the wording should contrast enough that the heading works as a tagline. For example...

[6]W[/6]idget[6]W[/6]orld
Plastic Blue and Green Widgets

WidgetWorld offers a wide variety of green and blue plastic widgets for all occasions...

It sometimes takes a bit of talking and showing a few attractive examples, but I find a client will usually give me the heading if they can keep their graphic look too.