Hiding Text using css: text-indent

I've got a company logo at the top of my site, that links back to the homepage. I'm hiding the link text using text-indent: -9999px; which seems 开发者_如何学Clike common practice.

To me it feels like a bit of a hack, and I'm concerned it will negatively effect my SEO.

Is this still the best way to do this?

HTML:

<a href="index.php" id="logo">My Website</a>

CSS:

#logo {
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: url('logo.png');
  text-indent: -9999px;
}

---

AFAIK google crawler doesn't see that you have moved text away from visible part of the page, it can still find out the text that you have hidden with text-indent. This shouldn't hurt the SEO. Also, if that was the case, using text-indent for the very purpose would not have been a common practice.

---

I would suggest you two ways, and none of them is text-indent(which is obsolete method). First way is to remove text, and instead it ad a title to your anchor, like this:

<a href="index.php" id="logo" title"My Website"></a>

Second way, is to add an image in this anchor tag:

<a href="index.php" id="logo"><img src="path/to/image" alt="My Website"/></a>

These two ways are much better then text-indent, especially because few months ago Google announced that it has radically changed the way of indexing sites to prevent bite links and other forms of fraud, meaning that the text-indent will not look favorably, perhaps not from the start, but will try to wean people from it.

See this video: http://www.youtube.com/watch?v=fBLvn_WkDJ4&feature=player_embedded

---

There is another benefit of using text-indent:-9999px;, when using opera mini and may be other mobile browsers, it does not displays the background image but simply the text. It is much better to show text to opera mini user instead of a very small logo that is unreadable.

---

Here is a trick that I use a lot. It shouldn't heart seo at all

<a href="">&nbsp;</a> - now is visible but without showing any chars.