homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Optimizing header text graphic for search
Question about placing image paths between <h> tags

 9:01 pm on Jan 11, 2006 (gmt 0)

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?



 6:38 am on Jan 13, 2006 (gmt 0)

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.


 6:47 am on Jan 13, 2006 (gmt 0)

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.


 9:20 am on Jan 13, 2006 (gmt 0)

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


 2:18 pm on Jan 13, 2006 (gmt 0)

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.


 2:34 pm on Jan 13, 2006 (gmt 0)

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.


 5:52 pm on Jan 13, 2006 (gmt 0)

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.


 3:52 am on Jan 17, 2006 (gmt 0)


Create you nice header image. (header.png)

In your page:

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

in your CSS:

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

#header h1 {display:none}


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?


 4:27 am on Jan 17, 2006 (gmt 0)

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 {
background:transparent url(path/to/image.gif) no-repeat 0 0;

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.



 7:03 pm on Jan 17, 2006 (gmt 0)

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

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


 7:17 pm on Jan 17, 2006 (gmt 0)

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>


 9:22 pm on Jan 17, 2006 (gmt 0)

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) :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved