Geek Answers Handbook

Hide text using css: text-indent

I have a company logo at the top of my site that links to the home page. I hide the link text-indent: -9999px; using text-indent: -9999px; which seems like a common practice.

It seems like a hack to me, and I am worried that it will negatively affect my SEO.

Is this 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; }
+4
source share
4 answers

The AFAIK search robot does not see that you deleted the text from the visible part of the page; it can still find the text that you hidden using text-indent . This should not hurt SEO. Also, if so, using text-indent for the purpose itself would not be common practice.

+3
source

I would suggest you two paths, and none of them are text indentation (which is an obsolete method). The first way is to remove the text, and instead it will declare a title to your anchor, for example:

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

The second way is to add an image to this anchor tag:

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

These two methods are much better than text indentation, especially because a few months ago Google announced that it radically changed the way indexing sites to prevent links to bites and other forms of fraud, which means that text indentation will not look good, perhaps not from the very beginning, but will try to wean people from him.

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

+3
source

There is another advantage to using text-indent:-9999px; when using opera mini and can be another mobile browser, it does not display a background image, but just text. It is much better to show the text to an operational mini-user, rather than a very small logo that cannot be read.

0
source

Here is a trick that I use a lot. It should not be cardio seo at all

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

More articles:


All Articles