Question

This article说我们应该避免使用这种技术。 This one说这太棒了。 Google查看text-indent: -9999px;的CSS文件并惩罚你是真的吗？：|

我正在使用该属性很多来隐藏文字。例如，我有一个用图标表示的按钮：

<a href="#" class="mybutton">do Stuff</a>

CSS：

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

我没有看到任何替代我的代码。如果我用图像替换它，我会自动为每个按钮图像获得+20 HTTP请求。

如果我将链接设置为空，那么它的accessibile就更少了，因为屏幕阅读器不会知道它是什么。空链接看起来很奇怪，可能Google也不喜欢这样......

那么处理这种情况的最佳方法是什么？

Answer 1

不使用-9999px方法的一个很好的理由是浏览器必须为每个应用它的元素绘制一个9999px的框。显然，这可能会造成相当大的性能损失，特别是如果您将其应用于多个元素。

替代方法包括此方法（来自zeldman.com）：

text-indent: 100%; white-space: nowrap; overflow: hidden;

......或者（来自here）：

height: 0; overflow: hidden; padding-top: 20px;

（其中'padding-top'是你想要元素的高度）。

我认为第一种方法比较简洁，因为它可以让你以正常的方式设置高度，但我发现第二种方法在IE7中效果更好

Answer 2

我读过Google没有宣传在锚标记http://maileohye.com/html-text-indent-not-messing-up-your-rankings/上使用否定text-indent的概念。理想情况下，您应该使用title标签和rel属性来告诉搜索引擎更多关于链接的信息。

另外，您可能想要阅读这些主题：

站点地图，机器人，可能使用rel和title标签的锚标签以及对图片应用alt标签应该有助于提高SEO。

谷歌现在也使用shebang（＃！）运算符遍历AJAX驱动的内容，所以也许这是你想要阅读的东西 - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

使用HTML5和JQuery，有许多插件允许书签和Ajax链接的深层链接。

希望这有帮助。

Answer 3

对于操作按钮，文本缩进技巧应该是正常的，如果您希望搜索引擎在权衡目标页面的页面排名时考虑链接文本，则可能不那么正常。

顺便说一句，我强烈认为Google会在将您的标记视为垃圾邮件之前使用多种启发式方法，因此您应该随意使用文本缩进。

Answer 4

我不知道Google是否有问题（虽然您链接到a blog post from a Google employee的链接的文章，因此有一些重量），但我认为替代方法是使用<img>标记一个透明的GIF，你的精灵作为background-image：

HTML

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

即使在IE 6中，<img>标签上的背景图像也能可靠地工作。

当然，Google尝试做的是避免索引不可见的文字，alt文字也不可见。但也许它可以避免您的网页被Google算法标记为垃圾内容的风险。

如果用户在其浏览器中禁用了图片，则此方法至少会导致显示文本，而text-indent则不会。

Answer 5

有一种替代方案（我经常使用）。

<a href="#" class="mybutton"><span>do Stuff</span></a>

您可以根据上下文将span更改为strong / h1等。

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}

文本缩进：-9999px是一种用图像替换文本的糟糕技术，有哪些替代方案？

5 个答案:

HTML

CSS