Stop Using the text-indent:-9999px CSS Trick

2010-05-25

At TransparencyCamp two months ago, I attended an excellent session on Searchability by Vanessa Fox. This spurned me to dive deeper into the topic. I concluded that Googleability matters, and it matters a lot. But when you hear the term SEO, your BS detector probably goes off, and justifiably so. It’s unfortunate that the so-called SEO experts, modern day snake oil salesmen, have ruined the field’s reputation. But for web developers, being aware and proactive about searchability is incredibly important. Building sites with searchability and accessibility in mind is just as important as practicing test-driven development and keeping code DRY.

One thing that stuck out in my mind during Vanessa’s talk was her recommendation to avoid using the text-indent:-9999px CSS trick when implementing things like logos as a page header. So the HTML is semantic:

<body>
  <h1><a href="/">My Site Title</a></h1>
  ...

While the CSS pushes the text far off the page and replaces it with a logo:

h1 a {
  background: url(logo.png) no-repeat left top;
  text-indent: -9999px;
}

This is widely considered a best practice, because users will see your site logo, while search engines see the text contained in the <h1> tags. But the reality is that this technique is also used by spammers to game search engines.

Bottom line: Don’t try to trick Google. You can’t.

This particular issue was discussed further on a podcast called Webmaster Radio Office Hours, with Google Senior Developer Programs Engineer Maile Ohye. In the discussion, which starts about 4 minutes into the podcast, Vanessa and Maile discuss Google’s view on the technique. In summary, here’s what Maile said:

When you make things accessible for screen readers and people you also do it for search engines. It’s the fundamental first step in site development.
There’s a lot you can do that don’t involve what are traditionally spammy techniques like text-indent:-9999px, which has been used to hide text and links in the past by spammers, because they thought only search engines would read it and users wouldn’t know. So they used that to boost their rankings. So it’s kind of gotten a bad rep from our standpoint, and we see it more as a spam technique than we do an accessibility technique.
Instead, use the alt attribute. Or, put text around the image and have descriptive headings and captions for it.
text-indent:-9999px is really a band-aid solution. You kind of cross into a black-hat/spam technique with it.
Don’t take the risk, you don’t want to be accidentally classified as spam.

So, this is what good markup would look like, without any need for CSS tricks:

<body>
  <h1><a href="/"><img src="logo.png" alt="My Site Title" /></a></h1>
  ...

Google understands the alt attribute, and will not punish you for using it.

If searchability is something that interests you, subscribe to the Google Webmaster Central Blog, where Maile regularly posts. Vanessa has also penned a new book, Marketing in the Age of Google, that contains a great chapter on searchability principles and practices for web developers.

ADDENDUM: Incredibly, Maile has published a blog post on this exact topic right as I’m set to publish it. So read her take, and become a true believer.