Question

假设我为我的页面使用了一些onload动画，例如：

$(document).ready(function() {
    $('html.myhtml').css('overflow', 'auto').fadeTo(0, 0, function() {
        $(this).css('visibility', 'visible').animate({
            opacity: 1
        }, 200);
    });
})

并以内联样式开头，使其隐藏在第一位：

<html class="myhtml" style="visibility:hidden; overflow:hidden">

最初，该页面将显示为空白，然后使用fadein进行动画处理。我想知道： -

这会以任何方式影响搜索引擎优化吗？
这种做法是否正常或是否有一些重要的论据不这样做？

Answer 1

它不会影响它。由于同样的担忧，我亲自通过微数据测试了谷歌机器人的读数。谷歌现在实际上可以在一定程度上看到javascript交互，甚至swf文件。所以你应该清楚。

Answer 2

它会影响SEO吗？

如果我不得不回答是，那么我会说：不

这种做法是否正常或是否有一些重要的论据不这样做？

我们可以整天争论动画，但仍然没有肯定答案。动画淡出对搜索引擎的目的是什么？没有。因此，它应该是为了用户的享受？动画淡出的目的是什么？没有。因此，如果我们选择“为用户设计而非搜索引擎”模型，我可能会删除动画。这是我的意见。

回到SEO问题，它会影响SEO吗？不是真的没有，但这取决于搜索引擎和您的受众。如果我是使用屏幕阅读器的人，我可能无法从您的页面中受益，因为我的屏幕阅读器将失败。如果我禁用了javascript，会损害我的用户体验（我个人浏览FF NoScript插件）。

我知道你说没有javascript的用户在你的网站上没有业务但是你应该考虑到这一点并以某种方式处理它。 Googlebot在抓取时也没有启用javascript或会话Cookie。其次，如果你的一个js失败了，你可能希望它优雅地回归到用户可用的东西或者至少一些让他们知道'欢迎！我们在这里有你的浏览器不支持的fancypants动画！请启用javascript'。

强制动画通常会让用户感到烦恼，尤其是当他们重复每个页面加载时。添加页面加载对谷歌搜索引擎优化是不利的，因为速度现在是排名的一个因素。

就像我提到的那样，主Googlebot不会在启用javascript或会话Cookie的情况下抓取。他们有不同的爬虫用于不同的目的，比如一些只用于移动，一些用于js，一些用于flash。值得注意的是，“Google即时预览”会捕获动画/弹出窗口或任何正在加载的内容，并在结果中向用户显示（在您的情况下，它可能看起来像一个空白页面）。和WDever一样，一般来说，使用文本缩进或负边距作为初始状态比使用可见/显示/溢出更安全。

我就是这样做的（here's a live preview with 4 second animation delay to test with and without js enabled）：

<html>
<head>
<style>
.myhtml {visibility:hidden; overflow:hidden;}
</style>
<script>document.documentElement.className='myhtml'</script>
</head>
<body>

 1. html is not hidden initially and no class
 2. css styles register .myhtml class with the hidden stuff you want
 3. the script tag just before the BODY tag will fire and add the class to html thus hiding things for those with javascript enabled. Everyone else who has JS disabled sees the page properly.
 4. at the bottom of the page your jquery fires animating the page

<script>
$(document).ready(function() {
    $('html.myhtml').css('overflow', 'auto').fadeTo(0, 0, function() {
        $(this).css('visibility', 'visible').animate({
            opacity: 1
        }, 200);
    });
})
</script>
</body>
</html>

Answer 3

我认为您应该注册Google网站管理员工具。然后找到一个名为“Fetch as googlebot”的功能，现在让谷歌去获取您想要的页面，看看它是否发现任何错误或异常行为，或者它没有显示您的预期。如果是这种情况，您可以确定您的网页存在问题，Google会告诉您在抓取网页时遇到的问题。那么这是纠正你的问题的问题。

编辑：使用javascript搜索引擎的主要问题是js在获取和阅读网页内容时会产生障碍。具体而言，这个问题主要出现在实际页面上没有内容并且您使用js从其他地方获取内容时（因此ajax seo问题）。因此，应该关注将内容放在页面上而不是从其他地方获取内容。

因此，当谷歌和其他搜索引擎看到您的网页时，还应该关闭js和css来测试他们的网页，看看他们的网页是怎样的。所以，在所有那些奇特的动画，抓取和其他东西，如果谷歌仍然能够阅读，抓取和索引您的页面比我不会担心一秒钟，你也不应该。毕竟，如果google很好，我们就可以了。

Answer 4

据我所知，Google只识别页面的初始状态。这包括CSS渲染，例如，如果您添加display:none;或visibility:hidden;，我认为Google不会将其编入索引。

为了安全起见，我会在加载时隐藏内容，然后将其淡入。我还没有真正测试过，但我从未见过Google的机器人与JavaScript的互动情况。使用hashbang方法时似乎有例外。

此方法的另一个好处是，使用javascript停用的用户（我知道，duh）仍然可以看到您的内容，因为它不会隐藏在第一位。

Answer 5

我建议你看看：

http://searchengineland.com/google-io-new-advances-in-the-searchability-of-javascript-and-flash-but-is-it-enough-19881

Answer 6

我遗憾地没有对你的问题进行搜索引擎优化答案，但解决方法是使用负边距来隐藏屏幕外的元素。然后当javascript启动你设置正确的位置并隐藏，然后你淡入或做任何你想做的事。

onload动画会影响SEO吗？

6 个答案: