使用css: text-indent隐藏文本

Question

我有一个公司的标志在我的网站顶部，链接回主页。我使用text-indent: -9999px;隐藏链接文本，这似乎是一种常见的做法。

对我来说，这感觉有点像黑客，我担心这会对我的SEO产生负面影响。

这仍然是最好的方法吗？

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

Answer 1

谷歌爬虫不会看到你已经将文本从页面的visible部分移走了，它仍然可以找到你用text-indent隐藏的文本。这应该不会伤害到SEO。此外，如果是这样的话，将text-indent用于特定目的也不是一种常见的做法。

Answer 2

我会向你推荐两种方法，它们都不是文本缩进(这是过时的方法)。第一种方法是删除文本，而不是在锚点添加一个标题，如下所示：

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

第二种方法是在这个锚标签中添加一个图像：

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

这两种方式比文本缩进要好得多，特别是因为几个月前谷歌宣布，它已经从根本上改变了对网站进行索引的方式，以防止咬链接和其他形式的欺诈，这意味着文本缩进看起来不会很好，可能从一开始就不会，但会努力让人们摆脱它。

查看此视频：http://www.youtube.com/watch?v=fBLvn_WkDJ4&feature=player_embedded

Answer 3

使用text-indent:-9999px;还有另一个好处，当使用opera mini和其他移动浏览器时，它不会显示背景图像，而只是显示文本。将文本显示给opera mini用户要好得多，而不是显示一个非常小的无法阅读的徽标。