Hi Stepho.

I'd look into CSS image replacement. Using background images as part of the <a></a> tag pair is a great way to make image based links excellent Search Engine fodder.

I don't think google can read images. If you want google to read your menus, you have to create text base menus. With text base menus, you will get a good result from search engines.

[edited by: Dsgnr at 3:01 pm (utc) on April 2, 2009]

Google can't "read" an image but it will read the alt tag. But it sees it for what it is, the alt tag of an image. So it will associate the text of the alt tag with the image. It gets counted toward your topic relevance.

Google will also follow the link that comes off your image and any other image.

But it sees it for what it is, the alt tag of an image.

Which is therefore the alternative representation of that image. If it is wrapped in an <h> element, then the alt attribute serves the same function as if the text were there. According to UA guidelines, alternative content SHOULD be treated the same if used in proper context e.g. a graphic menu item that reads Education would have alt="Education". When the bot comes in, it is blind so it needs the alternative representation.

Think of it this way, if you have graphical menus and you are using proper alt attributes on those images, I believe the indexer sees the same thing as if you had a plain text link. You can perform a simple test using FF and the Dev Toolbar. Surf your site with images turned off. If the textual representation of your site in this mode does not mimic the graphic representation, you have challenges. Can the visitor use your site if they have images turned off? If not, then stop reading this and get to work! ;)

You are sending mixed meanings too if you don't replicate textual information exactly the same as the image itself (in heading instances or links such as graphic menus). You cannot cheat here or you'll distort the meaning of things. I think so anyway.

So to me, based on my understanding of the HTML guidelines, this...

<ol>
<li><a href="/reviews/" title="Product Reviews"><img src="/images/file.png" width="200" height="24" alt="Product Reviews"></a></li>
</ol>

Is the same as this to the bot...

<ol>
<li><a href="/reviews/">Product Reviews</a></li>
</ol>

My interpretation of the spec says that SHOULD be the behavior.

And this...

<ol>
<li><a href="/reviews/" title="Product Reviews"><img src="/images/file.png" width="200" height="24" alt="Product Reviews">Product Reviews</a></li>
</ol>

Is referred to as "stuttering" and may have a negative value associated with it. I dunno, just throwing some things out there for discussion.

I personally feel if you structure the elements and attributes correctly, the bot sees the same thing because it strips down the markup and is left with that which is textual. Alternative content such as alt attributes are textual and treated the same as their textual counterpart. If you've stacked things improperly, you end up stuttering and may not see the full benefit. Ya, I got me TIN HAT on this morning! < I know its coming. :)

My suggestion would be to avoid graphics if you can, if not, don't fret over it. The values are still there if the elements/attributes are utilized properly. You can do a lot with CSS these days and textual content. I'd look at ways of blending both so that you can satisfy all visitors no matter what disabilities they may have. Remember, bots are blind and they are deaf. Alternative content is designed for bots.

Awesome! thanks for all the information and help!

I don't think there is evidence to suggest that an ALT tag is treated with as much weight as plain text. After all, an ALT tag is on an image, describing that image. Further, there is no guarantee that the ALT tag matches the text in the image - there is that ambiguity which must discount the amount of trust which can be put in the ALT tag (cf. meta keyword tags).

Use CSS methods to replace text with images if you can; something like:

<style type="text/css">
#shop {display:block;background-image:url('shop.png');height:0px;padding-top:20px;width:20px;overflow:hidden;}
</style>
<a href="shop.html" id="shop">Shop</a>

The idea is to remove the text and show the image via CSS, whilst ensuring that the search engine still sees the text in the normal way.

I don't think there is evidence to suggest that an ALT tag is treated with as much weight as plain text.

Go over to the W3, search for UA Guidelines, then read the few hundred pages that are attached. Once you've read all that, you might have a different perspective on how alt attributes are handled.

After all, an ALT tag is on an image, describing that image.

You are correct! And, the alt attribute is for the UA to determine what the image is. If it is wrapped in an <h1> with no other text, the alt takes on the same meaning as the text if it were there. Mull that one over. And, I've seen the results of how Google handle this and it is exactly as the UA Guidelines specify.

Further, there is no guarantee that the ALT tag matches the text in the image - there is that ambiguity which must discount the amount of trust which can be put in the ALT tag (cf. meta keyword tags).

Oh come on. There is no guarantee that the text anywhere on the page is relevant. If you follow the rules of engagement, you'll be just fine.

Why the heck would someone want to go through all the trouble of IR when the alt attributes are available? Why? And when you answer, be prepared for a load of information. We had a topic about this recently and I have all the information you'll need there. No, I'm not going to dig it up either, I'll let you do the research since you are so sure that the alt attribute doesn't have any value in this situation. ;)

Hi P1R

If I've got this straight. This is:

<h1><img src="..." alt="logo and company tagline" /></h1>

Treated exactly like:

<h1>logo and company tagline</h1>

Where the second uses CSS image replacement to 'hide' the text and display the logo and strapline.

I much prefer to stick with the text based menus. Are you using some wacky font that isn't possible on a normal browser?

To play it safe I would use text, if one of your main concerns is google. Weigh up how much benefit you will receive from this graphical menu? is it greater than the potential benefits from google? If so then go with the graphical interface.

My suggestion would be to avoid graphics if you can, if not, don't fret over it.

I just want to reiterate the above. I would avoid graphics if possible. If they are img src that means an http request for each img. I've seen many apply bg images via CSS and then style the text further with a CSS Font Stack. The year is 2009 and we've come a long way with presentation and style. Take advantage of it if you can.

I'm still not convinced that IR or any other CSS hiding techniques are proper use in this scenario. I know, there are plenty of experts in this area and what I state above goes against the grain. So, you may want to utilize that image replacement technique or, if you want, you can invest about 100 hours of required reading here...

User Agent Accessibility Guidelines Working Group Charter
[w3.org...]

Please don't share all that you find with too many people. Let's keep this on the down low for now okay? ;)

Go over to the W3, search for UA Guidelines, then read the few hundred pages that are attached. Once you've read all that, you might have a different perspective on how alt attributes are handled.

Google has never claimed to follow the W3C in terms of its search engine ranking algorithms; and at the end of the day it matters more that Google says than the W3C.

Whilst ALT tags do have value to Google, I do not believe there is evidence showing them to be of equal algorithmic value to text when used as headers or menu items.

Google has never claimed to follow the W3C in terms of its search engine ranking algorithms; and at the end of the day it matters more that Google says than the W3C.

I never said that. There are guidlines for UA developers, plain and simple. I would like to think that the established guidelines are the foundation for what UAs are doing today and in the future. Those guidelines are regularly updated too so someone must be following them.

Whilst ALT tags do have value to Google, I do not believe there is evidence showing them to be of equal algorithmic value to text when used as headers or menu items.

That's okay. I'm not digging through those docs again to extract all the specifics on this. The information is there for all to read and interpret.

always gold suggestions from pageoneresults

I have image menu (without title on <a tag) and it works very well. When I type keyword on google it shows me site links containing few menus. IMO google has algorithm to see where users mostly go.

pageoneresults; is your aim to comply with standards as much as possible, or to be favoured by search engines as much as possible? I understand that they are often the same aim, but it makes a difference as to what kind of evidence you need to back up something such as 'img alt' being equivalent to text

If you can't locate it in the docs referenced, don't worry about it. Just do what you've learned up to this point and go with it. Nothing to fret over. I can't hold hands with this.

pageoneresults; is your aim to comply with standards as much as possible, or to be favoured by search engines as much as possible?

Ummm, they are synonymous of one another.

this is probably the thread to which p1r is referring.

accessibility and <h1> header images:
[webmasterworld.com...]

Ummm, they are synonymous of one another.

Not 100%

Not 100%

I'm glad you said that... I know that there is a lot of common ground but I don't think it's 100% either. All things are not created equal in the eyes of Google's algorithms!