更糟糕的是：隐藏文本或删除文本？

Question

我正在尝试在这里找到合适的平衡点，所以我想看看是否有人知道下面哪个场景在语义标记和 SEO 方面更好。

使用本网站的标志，场景 1：

<div id="hlogo">
    <a href="/">Stack Overflow</a>
</div>

#hlogo a {
    width:250px;
    height:61px;
    display:block;
    background-position:0 0;
    text-indent:-999999em;
    float:left;}

或者最好避免隐藏文本并简单地在锚标记中使用 rel 属性？

<div id="hlogo">
    <a href="/" rel="Stack Overflow"></a>
</div>

#hlogo a {
    width:250px;
    height:61px;
    display:block;
    background-position:0 0;
    float:left;}

我想知道删除实际文本“堆栈溢出”是否会比隐藏文本更受 SEO 影响。似乎每个人都使用 text-indent 方法，尽管 Google 说这是不可以的。实现语义标记和 SEO 的最佳方法是什么？

Answer 1

我只是在这里冒险，但如果它是“隐藏的”，它至少存在让爬虫找到。如果你删除它，它就不存在了。需要注意的是，您不必使用那种讨厌的缩进方法。您可以将项目设置为display: none;

但是，没有人真正知道 Google 的排名是如何运作的。您可能会因为隐藏它而在 SEO 中受到惩罚。但是 'indent' 方法有点 hacky，所以它看起来像是你试图隐藏一些东西，而不是仅仅不显示它。

Answer 2

经验法则：如果您担心 SEO 并且 Google 说某事是不可以的，那么您可能不应该这样做。

我认为您的第二个选项可以很好地用于 SEO。

人们使用文本转换选项的主要原因之一是为了便于访问。如果有人不让他们的浏览器加载图像，你仍然会得到标题等。

Answer 3

http://www.seomoz.org/article/search-ranking-factors#negative-ranking-factors

10) 通过偏移 CSS 隐藏文本 可见页面外的像素显示 区域 - 低重要性

另外，如果您想使用第二个示例，我建议您使用 title 属性与 rel 属性。 rel attribute 需要 link type，而不是随机数据。

Answer 4

您还应该记住为视障人士准备的屏幕阅读器。 使用 visibility:hidden 和/或 display:none 可以从阅读器和爬虫中删除文本（尽管我不确定后者），所以在使用它们之前要三思。

我宁愿同时使用 text 和 title 属性（而不是 rel）。 您可以使用许多可用的图像替换技术之一隐藏文本。见http://css-discuss.incutio.com/wiki/Image_Replacement。

如果你只是需要隐藏一些文字，我个人觉得这个技巧很方便：

.some-element { 
    display: block;
    overflow: hidden;
    height: 0;
}

Answer 5

我每次都会使用您的第一个解决方案。它对可访问性和无限语义更好。从 SEO 的角度来看，两者处于相对平等的地位（当使用 @simplemotives 关于使用 title 属性而不是 rel 的建议时）。

使用文本缩进当然没有什么“hacky”。它几乎被认为是行业标准的图像替换技术，也是唯一一种考虑可访问性和可移植性的技术。

Answer 6

谷歌（搜索机器人）需要的是相同的内容应该提供给机器人，因为它提供给用户。缩进文本（任何文本）会让机器人认为它是垃圾邮件，或者您正在向用户和机器人提供不同的内容。

最好的方法是直接在锚标签中使用徽标作为图像。为您的图像添加“alt”。这非常适合机器人阅读，也有助于图像搜索。

这是直接从马嘴里说出来的： http://www.youtube.com/watch?v=fBLvn_WkDJ4