5

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;
}
Dan
  • 3,750
  • 5
  • 24
  • 38
  • 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 – locrizak Jul 18 '11 at 15:45
  • 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). – Gerben Jul 18 '11 at 15:51
  • 2
    @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. – John Conde Jul 18 '11 at 16:07

4 Answers4

4

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.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • Aren't you supposed to back up these type of answers with a quote from Matt Cutts? – thirtydot Jul 18 '11 at 15:51
  • 2
    There have been no official comments from Google or Matt Cutts about this specific technique – John Conde Jul 18 '11 at 16:05
  • 1
    @John Conde: My comment was somewhat tongue-in-cheek. My point was, *some* kind of citation would be helpful. Maybe [this](http://maileohye.com/html-text-indent-not-messing-up-your-rankings/) or the video [mentioned here](http://stackoverflow.com/questions/5481225/do-search-engines-treat-text-indent-9999em-or-negative-margin-as-seo-cheat/5481784#5481784). – thirtydot Jul 20 '11 at 08:51
  • @thirtydot: Yes agreed but unfortunately I could not find citation at a time, thanks for adding them though :) – Sarfraz Jul 20 '11 at 08:58
3

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

misticx
  • 65
  • 2
  • 10
0

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.

Shoaib Iqbal
  • 1,208
  • 11
  • 21
0

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.