Question

以下是我为jQuery Modal Box创建的基本示例框，CSS和JS。

<!-- hidden boxes // -->
<div id="content_1" class="box">
    <h1>First Box</h1>
    <p>Content goes here...</p>
</div>
<div id="content_2" class="box">
    <h1>Second Box</h1>
    <p>Content goes here...</p>
</div>
.....

<!-- links for boxes // -->
<a href="#content_1" class="link">Show First Box</a>
<a href="#content_2" class="link">Show Second Box</a>

<!-- css // -->
<style>
.box {
    display: none;
}
</style>

<!-- javascript // -->
<script type="text/javascript">
$(document).ready( function() {
    $('.link').click( function() {
        // process modal
    });
});
</script>

因此，当用户点击First / Second Box链接时，jQuery模式弹出内容。我的目的不是隐藏文字。我在一些博客中听到并读到，Google会采取隐藏文字的行动。我的方式是非法/不利于SEO？或者，如果没有display:none，还有更好的方法吗？

Answer 1

你会发现谷歌自己实际上在他们的主页上使用了display:none; - 考虑到使用这些效果的jQuery和其他JavaScript库的流行，如果你使用它我怎么会看不到它会对你的SEO产生负面影响在必要的情况下。

Answer 2

我使用以下代码段来隐藏css3导航菜单上的子菜单，其中包含一些很酷的缓入，轻松实现的转换。而afaik这是有效的CSS，以隐藏元素的SEO。

opacity: 0;
visibility: hidden;

已在讨论过 Is there an alternative to conditional display:none

Answer 3

而不是使用display：none;你可以使用左：-9999px; position：absolute;它仍将显示搜索引擎的内容，但它将显示在某个地方而不是用户。

http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/

搜索引擎的CSS隐藏文字是非法的？

3 个答案: