Ano*_*ous 9 seo jquery animation onload
假设我为我的页面使用了一些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.我想知道:-
\n\n\n对SEO有影响吗？
\n
如果我必须用是或否来回答这个问题，那么我会说：不
\n\n\n\n\n这种做法好吗？还是有一些重要的理由不这样做？
\n
我们可以整天争论动画，但仍然没有确定的答案。动画淡出对搜索引擎有什么作用？没有任何。因此，它应该是为了用户的享受？动画淡入淡出对用户有什么作用？没有任何。因此，如果我们采用“为用户设计而不是为搜索引擎设计”模型，我可能会删除动画。这是我的意见。
\n\n回到SEO问题，它对SEO有影响吗？并不是真的不行，但这取决于搜索引擎和你的受众。如果我是一个使用屏幕阅读器的人，我可能无法从您的页面中受益，因为我的屏幕阅读器会失败。如果我禁用了 javascript，则会损害我的用户体验（我个人使用 FF NoScript 插件进行浏览）。
\n\n我知道您说过没有 javascript 的用户在您的网站上没有业务，但您仍然应该考虑到这一点并以某种方式处理它。此外，Googlebot 在抓取时不会启用 javascript 或会话 cookie。其次，如果你的一个js失败了，你可能希望它优雅地回退到用户可用的东西，或者至少有一些指令让他们知道，比如“欢迎！” 我们这里有您的浏览器不支持的花式裤子动画！请启用 javascript\'。
\n\n强制动画通常会让用户感到厌烦，尤其是当他们重复每个页面加载时。添加页面加载对于 Google SEO 不利，因为速度现在是排名的一个因素。
\n\n就像我提到的，主要的 Googlebot 不会使用启用 JavaScript 或会话 cookie 进行抓取。他们有不同目的的不同爬虫，比如有些只用于移动设备，有些用于js，有些用于flash。值得注意的是，加载的动画/弹出窗口/或任何内容都将被“Google Instant Previews”捕获并在结果中显示给用户（在您的情况下，它可能看起来像空白页面）。正如 WDever 提到的，一般来说，使用文本缩进或负边距作为初始状态比使用可见性/显示/溢出作为此类事情更安全。
\n\n这就是我的做法（这里是一个带有 4 秒动画延迟的实时预览，以在启用和不启用 js 的情况下进行测试）：
\n\n<html>\n<head>\n<style>\n.myhtml {visibility:hidden; overflow:hidden;}\n</style>\n<script>document.documentElement.className=\'myhtml\'</script>\n</head>\n<body>\n\n 1. html is not hidden initially and no class\n 2. css styles register .myhtml class with the hidden stuff you want\n 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.\n 4. at the bottom of the page your jquery fires animating the page\n\n<script>\n$(document).ready(function() {\n $(\'html.myhtml\').css(\'overflow\', \'auto\').fadeTo(0, 0, function() {\n $(this).css(\'visibility\', \'visible\').animate({\n opacity: 1\n }, 200);\n });\n})\xe2\x80\x8b\n</script>\n</body>\n</html>\n