在某些情況下用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隱藏文本，並避免搜索引擎罰款？

回答

相關問題