Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?

Question

This article say we should avoid using this technique. This one says it's awesome. Is it true that Google looks inside CSS files for text-indent: -9999px; and punishes you? :|

I'm using that property a lot to hide text. For example, I have a button that is represented by an icon:

<a href="#" class="mybutton">do Stuff</a>

The CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

I don't see any alternative to my code. If I replace that with an image I automatically get +20 HTTP requests for each button image.

If I make the link empty, it is less accessibile because screen readers won't know what that is. And empty links look weird, probably Google doesn't like that either...

So what's the best way to handle such situations?

Answer 1

A good reason not to use the -9999px method is that the browser has to draw a 9999px box for each element that this is applied to. Obviously, that potentially creates quite a performance hit, especially if you're applying it to multiple elements.

Alternative methods include this one (from zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

...or alternatively (from here):

height: 0; overflow: hidden; padding-top: 20px;

(where 'padding-top' is the height you want the element to be).

I think the first method is neater, since it lets you set height in the normal way, but I've found the second one to work better in IE7

Answer 2

I've read that Google doesn't promote the concept of using a negatve text-indent on anchor tags - http://maileohye.com/html-text-indent-not-messing-up-your-rankings/. Ideally, you should be using title tags and rel attributes to tell search engines more about the links.

Also, you might want to read these threads:

• http://www.google.com/support/forum/p/Webmasters/thread?tid=1a51b7310162d1aa&hl=en

• http://websitedesigningtips.com/5-tips-web-designers-developers-optimize-site-search-engines/ (the last point)

Sitemaps, robots, anchor tags using rel and title tags where possible and applying alt tags to your images should help better the SEO.

Google also traverses AJAX driven content now using the shebang (#!) operator so maybe that's something that you'd want to read up on - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Using HTML5 and JQuery, there are a number of plugins that allow bookmarking and deep linking of Ajax links.

Hope this helps.

Answer 3

The text indent trick should be OK for action buttons, and perhaps not so OK if you want search engines to consider the link text while weighing the page rank of target page.

By the way I strongly believe Google will use multiple heuristics before considering your markup as SPAM so you should get away with using text-indent casually.

Answer 4

I’ve no idea if Google has issues (although the article you linked to links to a blog post from a Google employee, so that carries some weight), but I think the alternative is to use an <img> tag with a transparent GIF, and your sprite as its background-image:

HTML

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

Background images on <img> tags work reliably, even in IE 6.

Of course, what Google’s trying to do is avoid indexing text that isn’t visible, and alt text isn’t visible either. But maybe it’ll avoid the risk of your page maybe being flagged as spammy by a Google algorithm.

And this method does at least result in the text being shown if the user disables images in their browser, which text-indent doesn’t.

Answer 5

Well there is an alternative (which I use quite frequently).

<a href="#" class="mybutton"><span>do Stuff</span></a>

You can change span to strong/h1 etc. based on context.

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}