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

我想知道是否删除实际文本“Stack Overflow”将比隐藏文本更大的SEO命中。似乎每个人都使用文本缩进方法，即使谷歌说这是不是没有。实现语义标记和SEO的最佳方法是什么？

Answer 1

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

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

Answer 2

经验法则：如果你担心搜索引擎优化而谷歌说某些事情是不可能的，你可能不应该这样做。

我认为您的第二个选项可以用于搜索引擎优化目的。

人们进行文本转换选项的主要原因之一是可访问性。如果有人不让他们的浏览器加载图片，你仍然可以获得标题等。

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可以删除读者和抓取者的文本（虽然我不确定后者），所以在使用它们之前要三思而后行。

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

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

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

Answer 5

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

使用text-indent肯定没什么'hacky'。它几乎被认为是行业标准的图像替换技术，也是唯一一个影响可访问性和可移植性的技术。

Answer 6

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

最好的方法是直接将徽标用作锚标记内的图像。为图片添加“alt”。这对于机器人阅读和阅读来说是完美的。也有助于图像搜索。

直接来自马的嘴： http://www.youtube.com/watch?v=fBLvn_WkDJ4

更糟糕的是：隐藏文字还是删除文字？

6 个答案: