Header that are Graphics

How to handle SEO for images

[CLTaylor]

The header on my index page is embedded in a graphic, so the search engines can't see an H1 tag.

So how do I create an H1 tag with my keywords for the engines to pick up?

Thanks for helping,

Cathy

[oluoch28394]

try something like this:

<div id="header"><h1>Example Header</h1></div>

then in your css:
#header {
background-image: url('header.jpg');
}

this post might also be helpful:
[webmasterworld.com...]

in addition google keywords meta tag

[phranque]

<h1 id="HeaderText"><img src="http://example.com/images/header-text.png" alt="Header Text" width="111" height="22"></h1>

then style your h1 font to look as close as possible to your image.

header images are also discussed in-depth in this WebmasterWorld thread:
accessibility and <h1> header images [webmasterworld.com]

[oluoch28394]

i tried my best :-)

[phranque]

actually we answered two different questions.
oluoch28394's solution is good for using a "standard" font to display the header text on a background image.
my solution addresses the use of images containing the header text, which might be necessary if a "special" or proprietary font is preferred.

[swa66]

To show a third option:

One can also do image replacement using CSS:

h1 {
text-indent: -9999px;
background: url('example.jpg') no-repeat center top;
height: 100px; /*or whatever you need*/
}

in your html it just becomes:

<h1>example</h1>

There are various other ways to do the replacemnt in CSS, just showing one here.
(the text is there it's just way outside of your viewport)

I've used all sort of methods. I like the background only the best as long as the font requirements can be settled, but recently did it as I have above for the simple reason that the owner insisted on a heavy 3d shadow on the font ...

If you use CSS positioning, you can easily combine the method of a graphical background on a banner andreplacing the text on a h1 inside the banner.