2010-10-05 34 views
3

我想在这里找到合适的平衡点,所以我想看看是否有人知道下面哪个场景在语义标记和SEO方面更好。更糟的是:隐藏文字或删除文字?

使用本网站的logo,方案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命中。似乎每个人都使用文本缩进方法,尽管谷歌说这是一个不行。实现语义标记和搜索引擎优化的最佳方式是什么?

+2

为什么2倒票? – AGoodDisplayName 2010-10-05 20:53:12

+1

这是一个很好的问题。没有理由投下来。我投了票。 – Marwelln 2010-10-05 20:58:48

回答

2

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

但是没有人真正知道Google的排名如何运作。你可能会因为隐藏它而受到处罚。但是 “缩进”方法有点怪异,所以它看起来像你试图隐藏某些东西而不是显示它。

+0

将“display:none”添加到图像替换将使其无用。 – Tordek 2010-10-05 22:13:02

+1

巧合的是,它也会推到屏幕的一侧,看不到它。 – 2010-10-05 22:47:51

+1

不,它不会。这是从可视用户隐藏文本但将其提供给屏幕阅读器和其他辅助功能技术的标准技术。 – Alohci 2010-10-05 23:55:17

2

经验法则:如果你担心搜索引擎优化,谷歌说有什么是不是不行,你可能不应该这样做。

我认为你的第二个选择对于搜索引擎优化目标来说工作得很好。

人们做文字转换选项的主要原因之一是无障碍。如果有人不让他们的浏览器载入图像,你还是拿到冠军,等

1

您还应该记住视障人士的屏幕阅读器。 使用可见性:隐藏和/或显示:无可删除读者和爬虫的文本(虽然我不确定后者) ,所以在使用前请三思。

我宁愿使用文字和标题属性(而不是rel)。 您可以使用可用的许多图像替换技术之一来隐藏视图中的文本。见http://css-discuss.incutio.com/wiki/Image_Replacement

如果您只需要隐藏一些文字,我个人认为,这一招非常方便:

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

请参阅此页以供参考,它包含一张表格,比较不同屏幕阅读器处理显示和可见性属性的方式: http://css-discuss.incutio.com/wiki/Screenreader_Visibility – Lucius 2010-10-05 22:09:06

0

我会用每一次你的第一个解决方案。对于可访问性和无限多的语义来说更好。从SEO的角度来看,两者在相对平等的基础上(当使用@simplemotives关于使用title属性而不是rel的建议时)。

对于使用文本缩进肯定没有什么“黑客”。它几乎被认为是行业标准的图像替换技术,也是唯一影响可访问性和便携性的因素。

0

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

最好的方法是直接在标签中使用logo作为图像。给你的图像添加'alt'。这将是完美的机器人阅读&也将有助于图像搜索。

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