image buttons with css - seo opinions

[mihomes]

Been trying to clarify some of my normal techniques ni regards to todays seo 'rules'...

I currently use something like the following :

<a class="featuresbutton" href="/thelink.htm" title="View Blue Widget's Features">View Features</a>

Without showing all the css this produces an image button with rollover. As I am using the title attribute when the user rolls over they see the title text. The anchor text, 'View Features', is hidden using css and a text-indent as the actual image has text on the button.

In theory, this sounds fine, however, I am reading conflicting opinions on this. Some believe using text-indent to hide the anchor text is blackhat/spam. I personally do not agree with this as you are only hiding the text from the user not the search engines.

I would like opinions on the following though :

1 - Would you use the title tag as the actual description of the button? Disregard it entirely?

2 - The anchor text I use is non-specific. For example I might have a trial, features, and buy button for say 5 products on one page... while the title tags are different for each I keep the anchor text as something like 'trial download, view features, buy now'. While I know anchor text is a bigger factor for links I do not want to go and customize the wording for each button of each product for fear that it will be considered keyword stuffing OR overloading the page with certain keywords. This is kind of a catch-22 for me... I want the links to have relevant wording, but dont want to end up overdoing certain words on a page for the anchor text.

The reason I am using the title attribute is if for user clarity (an extra step so they know what they are clicking on) as the text pops up on mouse hover.

I know someone will say to use the anchor text over the buttons, but honestly it does not look as good and I do not want the buttons as large as the actual text if that makes sense.

Opinions? Please discuss...

[rainborick]

"hiding text from the user not the search engines" is the very definition of "hidden text", and it's always best to avoid it. The issue can get cloudy in situations like this where you are using CSS and/or JavaScript to create a visual effect that isn't intended to be truly deceptive. The problem is that there's no reliable way to know how the search engines will interpret a technical violation that isn't meant to try to fool anyone.

You might get penalized, full stop. You might trigger a manual review which, even though the original issue would likely be cleared, might lead to other problems being discovered. And, of course, nothing at all may happen... until the next algorithm update.

My advice would be to use a conventional <a><img></a> rollover if you can't style the text satisfactorily with CSS.

[rocknbil]

Some believe using text-indent to hide the anchor text is blackhat/spam.

I've been doing this for years and is completely false from what I can tell. It's a good application for graphic heads too - EXCEPT - I've never done it in this way:

I do not want to go and customize the wording for each button of each product for fear that it will be considered keyword stuffing OR overloading the page with certain keywords.

You **should** customize the wording, but keep it relevant and as you say - don't keyword stuff and you should be fine. What is "black hat" (or more "gray hat", I think) is large volumes of keyword stuffed text or any other effort to display different content to search engines than what your user sees. That is not what this effect does.

Title attributes: basically the anchor text names the anchor("widgets") and the title is used to describe where it takes you ("shop for green and blue widgets of all sizes.") Honestly, I don't use titles a lot. If the surrounding text adequately describes what the link it going to do, there's really no need for it.

[mihomes]

My advice would be to use a conventional <a><img></a> rollover if you can't style the text satisfactorily with CSS.

... I've thought about this as well. I could keep the title attribute and/or use an alt attribute as the image would be there. Problem is no anchor text at all (although adding the alt tag would help this a little) and I would no longer be able to use sprites to optimize these buttons unless I defined a transparent image in the html and used css to show the actual button backgrounds/rollovers.

I've been doing this for years and is completely false from what I can tell.

I see there are already two conflicting responses. I have to agree with you though based on 'logic'. You can use text-indent all you want to hide text, but to a search engine they are always going to see that text. In other words, if you are trying to hide keyword stuffing or what have you... you are only doing this to the user and not the search engine...which it would still penalize you if need be. I never thought about the manual review trigger though which makes sense as well.

Think about css drop down menus... it is safe to say this is a very common feature on many sites and I prefer these on most sites I visit for usability and navigation. Well, these use css to hide content(although usually in a display:none format. It is much better to use a pure css drop down then javascript of course... Google must understand the use of such things... I don't think a manual review would be triggered on every site that uses a drop down menu - right?

I am going to ponder over my options a little more, but I think I will end up with the hidden anchor text and title attribute only where it would help (say mutiple buy buttons in a table on an order page).

[Paul_o_b]

Hi,

Using negative text-indent properly and not stuffing it full of keywords should do you know harm and Matt Cutts of Google has said as much himself.

However the bigger question is that negative text indent is not the best technique for your users. If your image is missing, or the user has images turned off for faster browsing then they will get a big fat nothing.

A better way to do image replacement is to place the background image on top of the text and then it is always in the page for screenreaders, seo and happily works in any scenario of css on or off or images on or off or any combination of the above.

an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.button, .button span {
width:100px;
height:25px;
position:relative;
overflow:hidden;
display:block;
}
.button span {
position:absolute;
top:0;
left:0;
background:url(images/button/gif) no-repeat 0 0;
}
</style>
</head>

<body>
<p><a class="button" href="#">Button text<span></span></a></p>
</body>
</html>

No need to add title attributes as that would be spammy and overkill.

The only drawback to the technique is the extra span and the fact that you can't use it in transparent images because of course the text would show through underneath (although you could shim another background between the text and the image but that's getting too complicated to be useful).

[lucy24]

I read the original question too fast and missed the "image has text on the button" part. So I thought you were describing Mystery Meat Navigation and was all set to deliver some very emphatic opinions ;)

Backtracking: If the anchor text isn't visible, why is it there at all? Wouldn't the "alt" attribute of the image serve the same purpose? In fact it had better do so, since that's what your image-less users would see.

[Paul_o_b]

Backtracking: If the anchor text isn't visible, why is it there at all?

I agree that if images are deemed as content then they should be in the html but if they are decoration only then they should be in the background.

However when you have rollovers for a navigation it is often easier to use css background images instead as the rollover effects are easier to manage and easier to change at later dates while also keeping the mark up a lot lighter.

It's cases like these that are suitable for image/text replacement techniques but you must use one such as I described above that works in any scenario of images/css on or off.

If you feel you must use images then you can actually do rollovers on an image by setting the image dimensions to zero and use padding for the width and height and then show a background image on the image itself. Anything is possible with css ;)(nearly)

In the end it all boils down to the job in hand and whatever is easiest and most efficient in the circumstance.

However you should not be penalised for doing something correctly otherwise we'd never be able to use overflow, height,width,display, clip, absolute position and so on as they will all hide elements when required.

[mihomes]

I read the original question too fast and missed the "image has text on the button" part. So I thought you were describing Mystery Meat Navigation and was all set to deliver some very emphatic opinions ;)

Backtracking: If the anchor text isn't visible, why is it there at all? Wouldn't the "alt" attribute of the image serve the same purpose? In fact it had better do so, since that's what your image-less users would see.

In the manner I currently use there is no image tag, therefore, you cannot use an alt attribute. Maybe I didn't explain it well, but the rollover button is created with css on an a tag as mentioned in my OP - there is no img tag used at all.

[mihomes]

Paul,

I am going to test out your method tonight... it looks good and would solve pretty much all my issues. The one thing I did notice :

Say my image buttons are 135px wide... I put those overtop of the text without using an indent. Now, a user turns off images for faster browsing... button is gone and the anchor text is visible, BUT only the text which fits into the 135px as the overflow hidden wouldn't show anything outside so even that kind of defeats the accessibility stuff with images turned off - I think...I'll have to code it out and try it, I might be thinking about the outcome wrong.

[Paul_o_b]

Hi,

Yes the text must fit in the space but this is rarely an issue as in the case of a menu you would be adding text to match the menu images and usually that would be one word.

Even if the word does get clipped slightly when images are off that makes no difference to screenreaders or SEO as they still get the full text.

The same applies if you used alt attributes for images as all versions of IE will cut the text off if it doesn't fit inside the image dimensions - so images fail on this point also.

Do a search for Gilder/Levin image replacement as that is similar to to the method I use (except I was using it long before they gave a name to it).

[rainborick]

The search engines use the alt attribute of the <img> tag when there is no explicit anchor text. It's not quite as strong a signal as plain text, but it works.

[mihomes]

Paul,

Tried it out last night and I like it. I did two slight modifications by adding in a hover state and adding some padding to the normal state (my button images had trans rounded corners) to prevent text from showing underneath.

Thanks for the heads up on this method!