Can ALT tags be used in place of H1 tags?

ALT tags vs H1 tags

[vbjaeger]

I have a site that has a large image on the index page with a statement about what the site is about. In most sites, I would probably use a header tag for that, but I would rather use the graphic because it is more visually appealing.

To avoid repeating the phrase, would having ALT tags be sufficient?

[tosspot17]

I wouldn't have thought alt tags would carry the same weight as <h1>, but there is a way of replacing a <H1> tag with and images using CSS. I haven't tried it myself so I can't tell you how succesful it is WRT Google, but others may be able to.

Try a Google search for "Using Background Image to Replace Text" (with quotes).

[Birdman]

I don't think the alt tag will do you justice, SE-wise. If possible, try to have the h1 somewhere in there.

[Birdman]

But beware if you use CSS to hide the text, it could get you in trouble with Google. I'm not saying it will but I think most shy away from that method if they in it longterm.

[tosspot17]

Has anyone used the CSS trick in moderation to replace their <h1>? The site from the search above seems to be fine in the SERPs employing this technique.

I agree though, that it should only be used sparingly - to show the same text as in the image.

[rogerd]

I've seen some great looking pages done with the image/text CSS substitution technique, but I'm still a bit nervous about it. While the site might well survive a hand inspection if the image text matched the H1 text, Google doesn't usually work that way. If at some point they consider display:none to be an issue, they could twist the knob a bit for pages that use it. If it produces better SERPs by pushing down cheesy hidden text pages, the fact that it catches a few innocents really isn't that important.

Put your CSS file off limits to G-bot? Well, you could do that... but perhaps that could be a cue for a little knob-twisting, too.

[asquithea]

Semantically, H1 should be providing your top-level heading, as you identified. Whether or not you substitute a more attractive image for formatting purposes is up to the user-agent and should be accomplished using CSS.

IIRC CSS doesn't provide a mechanism for specifying the alternate text for an image, so your header text will perform this function without repetition for clients that cannot render the CSS, such as Lynx. Do be sure to test your CSS in multiple clients and at multiple text-sizes; specify minimum dimensions for the element that will ensure that the entire image is displayed.

Finally, I wouldn't worry about being penalized by Google. The content the image replaces is vital to all user agents that do not support CSS and/or images, including screen readers, old browsers, and browsers in which stylesheets have been disabled for readability. This being so, it might actually be illegal (at least in the near future) for Google to restrict access to sites purely on the basis of extended formatting that stands alone from the content, under the various Disability and Discrimination Acts (IANAL).

[vbjaeger]

The reason I asked this was because I think an image can make the message more appealing to the end user. With the current state of Google, and my index page gone, I would rather make the site more appealing to the end user. It is site dedicated to a single product and street appeal is important. However so is high ranking.

[DrDoc]

And, just to sort things out -- there is no such thing as an "alt" tag. ALT is just an attribute. It is most commonly refered to in reference to IMG tags, but many other tags use this attribute. So, think about which element you're using it with. If it's an image, will it carry the same weight as a heading? No. If it's an input field, will it carry the same weight as a heading? No.

Use the right element for the right job.
If you wish to use an image for your header, then consider some method that lets you use both an image and a header tag.

[leoo24]

i don't see how much trouble it would be to add a <h1> anyway?

[vbjaeger]

then consider some method that lets you use both an image and a header tag

Any Suggestions?

i don't see how much trouble it would be to add a <h1> anyway?

Not saying it is a problem, I was just saying that the way the page was layed out, it didnt seem necessary with the images saying the same thing.

[DrDoc]

There are several... One of the most commonly used is perhaps the "Fahrner Image Replacement" method. A search for that (or FIR Image Replacement) will bring up both pages explaining how it works, and alternatives to FIR.