Optimizing header text graphic for search

Question about placing image paths between <h> tags

[xbase234]

In looking for a work around for getting SE's to index my wonderful page header graphics as semantic text, I have found that search engines will index alt text as a header when the img src is placed between <h> tags. The alt text is exactly the same as text rendered as a jpg image, and there is no attempt to misrepresent content, or spam the SE's with repetitive keywords and such.

Can anyone present a reason why this may or may not be a good idea?

[jollygoodfella]

Well ALT tags are only really designed for describing the image in case the image doesn't load or for blind people using a reader on your site. I would suggest using the "title" tag as you can to help describe your image effectively.

[tomda]

Can anyone present a reason why this may or may not be a good idea?

Well, are you sure you can't do without image? As you may know, using text is much better than using an jpeg.

Otherwise, as said above use both alt and title. Title is a valid way to describe a picture, not alt (introduced by IE, I think?)

You may also want to check for string limitation in "title" as I presume than a very very long title can be considered spam by some bots.

[benihana]

alternatively, you could use one of the many image replacement [google.com] techniques, so the engines see plain <hx> text, and users with css and images get your graphics

[xbase234]

Images are the only option (luxury services client, they wouldn't budge toward customized text or CSS). Also considered using sifr, but decided to wait for another time to test.

The site has been designed for accessibility, and I've found that wrapping <h> tags around image headers does the trick (engines pick up the title from the alt text and posit it into an <h> tag).

Just wondering if anyone had any experience using this method, and if so, what your findings were.

[pageoneresults]

Title is a valid way to describe a picture, not alt (introduced by IE, I think?)

No, the title is not a valid way to describe the image. The alt attribute is the correct attribute to use when describing an image. IE did not introduce the alt attribute, it has been part of the html specification as far back as I can remember. ;)

The title attribute would be used to describe the destination of the image link if there were one. In this case, that doesn't seem to be the issue. When using images for <h> tags (which I don't do), you might do this...

<h1><img src="" alt=""></h1>

If the image was linked, you might do something like this...

<h1><a href="" title=""><img src="" alt=""></h1>

There are also other methods to optimize an image that is being used as an <h> tag.

[tedster]

engines pick up the title from the alt text

My experience is that the alt attribute content gets indexed but not weighted as heavily as straight text inside the <h1>. The weighting that search engines give <h1> goes up and down too, sometimes almost to the level of plain text. But when the dials are turned higher, it's good to have straight text in there -- so I prefer image replacement methods where the image is used as a background image.

[islandlizard]

Use CSS

Create you nice header image. (header.png)

In your page:

<div id="header">
<h1>My Heading</h1>
</div>

in your CSS:

#header {
background-image: url(path/to/header.png);
background-repeat:no-repeat
width: XXpx;
height:XXpx;
}

#header h1 {display:none}

Done!

What this does is set your header as the background image of a <div> (sized to the width/height of your image), and simply doesn't display the <h> tag inside the <div>

This means you page is accessible to screen readers, people without CSS, search engines, etc, but still looks visually correct to the regular visitor.

Easy, huh?

[bedlam]

Easy, huh?

Yeah, but the code is so ugly... ;-) Plus, if you search around, I believe that you will find that text with the style 'display:none;' applied to it is not read by screenreaders (or not consistently by all screenreaders in any case; this was one of the major factors in 'display:none;' dropping out of use in image replacement techniques very quickly).

As mentioned above, there are lots of image replacement techniques, but here's a simple example (original sources here [moronicbajebus.com] and here [kryogenix.org]) that avoids the excess markup and survives most permutations of browser settings intact:

<h1 id="loremHeader" title="Lorem ipsum dolor">Lorem ipsum dolor</h1>

/* Assumes a 150px x 25px image. Note that this method will need to be 'corrected' for both the IE 5 Win series and IE 5 Mac */
#loremHeader {
width:150px
height:0;
overflow:hidden;
font-size:12px;
background:transparent url(path/to/image.gif) no-repeat 0 0;
padding-top:25px;
}

This method works whether or not css is available or images are 'on'. Its main drawbacks are that a) in common with all image replacement methods, the background image is not resizable text, and b) the actual html text may not be readable since it's necessary to fit it into a box of a specified size. This means that, when images are off, the text may either not be resizeable (in IE Win) or may not be entirely visible if the text is increased in size (since we've specified 'overflow:hidden;'). In the example I've given, this problem may be imperfectly overcome by the use of the title attribute in the h1.

-b

[tbear]

<h1><a href="" title=""><img src="" alt=""></h1>

I'm not so sure that will validate, if that is important at all to you.....

[pageoneresults]

I'm not so sure that will validate, if that is important at all to you.

My fault, it should be...

<h1><a href="" title=""><img src="" alt=""></a></h1>

[tbear]

I was wondering more about the <a href> within <H1> tags (Didn't actually notice the missing closing tag, LOL)

But, maybe I'm wrong.... wouldn't be the first time (doubt it'll be the last either) :)