2

这是我为 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>

因此，当用户单击第一个/第二个框链接时，会弹出带有内容的 jQuery 模式。我的目的不是隐藏文本。我在一些博客中听到并阅读过，Google 将对隐藏文本采取行动。我的方式对 SEO 是否违法/不利？或者有没有更好的方法来做到这一点display:none？

4

3 回答 3

5

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

于 2013-03-31T16:33:59.047 回答
0

我使用以下代码片段来隐藏 css3 导航菜单上的子菜单，并带有一些很酷的缓入、缓入过渡。并且 afaik 这是在 SEO 方面隐藏元素的有效 css。

opacity: 0;
visibility: hidden;

已经讨论过 是否有条件显示的替代方法：无

于 2013-03-31T16:42:08.263 回答
-1

而不是使用 display:none; 你可以使用左：-9999px；位置：绝对；它仍然会显示搜索引擎的内容，但会显示在某个不为用户显示的地方。

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

于 2013-03-31T16:40:43.767 回答