Hiding Text using css: text-indent

Question

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 like 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;
}

Agronomics

Either text-indent or padding in conbination with height 1px and overflow hidden is the only ways I've always done it. Interested in some other options. +1 – Moldy

Most sites use this method. Google can't just penalize 50% of all websites. I wouldn't worry about it, unless you use it all over the page or to hide entire sections (i.e. abuse it). – Yelp

@Gerben, Google can penalize 50% of all websites. Site who do this may be hurting themselves have no idea they are. Of course, the damage could be very small and not make a significant difference and/or easily be overcome with some quality links, etc. – Exercitation

Answer 1

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.

Hosanna

Aren't you supposed to back up these type of answers with a quote from Matt Cutts? – Denverdeny

There have been no official comments from Google or Matt Cutts about this specific technique – Exercitation

@John Conde: My comment was somewhat tongue-in-cheek. My point was, some kind of citation would be helpful. Maybe this or the video mentioned here. – Denverdeny

@thirtydot: Yes agreed but unfortunately I could not find citation at a time, thanks for adding them though :) – Hosanna

Answer 2

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

Kirbie

Answer 3

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.

Orangewood

Answer 4

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.

Rafferty