在某些情况下用css隐藏文本，并避免搜索引擎罚款？

我正在研究一个插图工具，我想让用户可以看到屏幕阅读器和搜索引擎。我有以下的html：在某些情况下用css隐藏文本，并避免搜索引擎罚款？

<span class="card">A new idea is presented to the group. </span> 
<span class="spoke userOne active understands"> 
    <span class="node"> 
    <span class="label">User one </span> 
    <span class="relationship">is engaged in the conversation</span> 
    <span class="user"><span class="status"> and understands. </span></span> 
    </span> 
</span>

这里就是图中的一个环节有和没有CSS渲染：

http://jsfiddle.net/FnBd4/

http://jsfiddle.net/FnBd4/1/

编辑：我已经改变了小幅的问题基于一些早期的反应。我试图不用文本混淆视觉表示，但仍然可以访问屏幕阅读器和搜索引擎。现在，我通过为大多数元素设置字体大小为0px来做到这一点，我想知道这是否会导致SEO惩罚？如果是这样，是否有理想的方式来做到这一点（除了使用带有alt属性的图像标签）？

来源

2013-03-15 Shane

很可能，是的。为什么你会想要使用'font-size：0px'？（编辑：啊，我看，看第一个链接） – 2013-03-15 20:46:37

它可能被视为黑帽：http://forums.seochat.com/google-optimization-7/font-size-0%3B-color-transparent%3B -bad-453971.html – PlantTheIdea 2013-03-15 20:47:05

@Pekka - 如果你看例子，原因很明显。这不是让视觉表现混乱，但仍然有文字可用于屏幕阅读器和搜索引擎。 – Shane 2013-03-15 20:47:33

我Zeldman的隐藏文本CSS的粉丝隐藏文本：http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

来源

2013-03-15 20:51:40

这个看起来可能是赢家......现在测试一下。 – Shane 2013-03-15 20:54:52

我不认为这解决了根本问题：OP想要向搜索引擎和人类用户展示不同的内容。对于他的情况完全合法的目的，但搜索引擎应该如何检测，并告诉它除了真正的SEO垃圾邮件？如果他们惩罚'font-size：0px'，他们很可能会惩罚这种技术。 – 2013-03-15 20:56:37

这项技术被广泛用于网络，我相当自信，你不会受到处罚。另一种选择是为图像使用正确的alt标签。 Alt标签也具有价值。 – 2013-03-15 20:59:20

搜索引擎只分析可见内容。你可以用alt-Attribute来使用img-Elements。

来源

2013-03-15 20:51:57 tschiela

在这个例子中使用图像精灵。不是说它不能完成，它只是变得更加复杂，我将如何开始把它钩到JavaScript等。 – Shane 2013-03-15 20:56:25

我在这里看不到使用img-Elements的任何问题 – tschiela 2013-03-15 21:01:34

这不是一个问题举例来说，只是使用图像精灵图像而不是span标签的背景属性引入了另一层复杂性，由于时间限制，我宁愿避免这种复杂性。 – Shane 2013-03-15 21:05:38

根据此WebAIM Accessibility Article，通常建议只将屏幕阅读器仅移动到左侧 - 在任何浏览器窗口之外 - 屏幕阅读器仍将使用它。

.hidden{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

我也特别喜欢Jason Lydon发布的使用文本缩进的链接，尽管它似乎只是旧机器和设备的性能差异。所以，请选择！

来源

2013-03-15 21:08:06 BrianHall

在某些情况下用css隐藏文本，并避免搜索引擎罚款？

回答

相关问题