css - 使用 css 隐藏文本：text-indent

Question

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

对我来说，这感觉有点像 hack，我担心它会对我的 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;
}

score 4 · Accepted Answer

AFAIK 谷歌爬虫没有看到你已经将文本从页面的可见部分移开，它仍然可以找到你隐藏的文本text-indent。这不应该伤害 SEO。此外，如果是这种情况，那么text-indent出于特定目的使用将不是一种常见的做法。

score 3 · Accepted Answer

我会建议你两种方法，它们都不是文本缩进（这是过时的方法）。第一种方法是删除文本，而是为您的锚点添加标题，如下所示：

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

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

score 0 · Accepted Answer

使用还有一个好处text-indent:-9999px;，当使用opera mini，可能是其他手机浏览器时，它不显示背景图片，只显示文字。向 opera mini 用户显示文本比显示不可读的非常小的徽标要好得多。

score 0 · Accepted Answer

这是我经常使用的一个技巧。它根本不应该关注 seo

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

4 回答 4