9

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

$(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. 我想知道：-

  • 这会以任何方式影响搜索引擎优化吗？
  • 这种做法是好的还是有一些重要的论据不这样做？
4

6 回答 6

8

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

于 2012-09-26T18:00:41.973 回答
4

对SEO有影响吗？

如果我必须用是或否的答案来回答这个问题，那么我会说：不

这种做法是好的还是有一些重要的论据不这样做？

我们可以整天争论动画，但仍然没有确定的答案。动画褪色对搜索引擎有什么用途？没有任何。因此，它应该是为了用户的享受？动画渐变对用户有什么用途？没有任何。因此，如果我们采用“为用户而不是为搜索引擎设计”模型，我可能会删除动画。这是我的意见。

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

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

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

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

这就是我的做法（这是一个实时预览，有 4 秒的动画延迟，可以在启用和不启用 js 的情况下进行测试）：

<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>
于 2012-10-05T20:31:17.717 回答
2

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

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

因此，还应该在关闭 js 和 css 的情况下测试他们的页面，看看当 google 和其他搜索引擎看到您的页面时他们的页面是什么样子。因此，在所有花哨的动画、抓取和其他东西之后，如果谷歌仍然能够阅读、抓取和索引您的页面，那么我不会担心一秒钟，您也不应该担心。毕竟，如果谷歌很好，我们就更好了。

于 2012-10-04T11:30:39.883 回答
1

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

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

这种方法的另一个好处是，禁用了 javascript 的用户（我知道，duh）仍然可以看到您的内容，因为它一开始就不会被隐藏。

于 2012-09-26T18:12:57.537 回答
1

我建议你看看：

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

于 2012-10-03T15:16:15.157 回答
-1

遗憾的是，对于您的问题，我没有 SEO 答案，但解决方案是使用负边距将元素隐藏在屏幕外。然后当javascript启动时，您设置正确的位置并隐藏，然后您淡入或做任何您想做的事情。

于 2012-10-03T18:35:48.173 回答