jquery – onload动画会影响SEO吗?

前端之家收集整理的这篇文章主要介绍了jquery – onload动画会影响SEO吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我为我的页面使用了一些onload动画,例如:
$(document).ready(function() {
    $('html.myhtml').css('overflow','auto').fadeTo(0,function() {
        $(this).css('visibility','visible').animate({
            opacity: 1
        },200);
    });
})​

并以内联样式开始,使其隐藏在第一位:

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

最初页面将作为空白,然后使用fadein进行动画处理.我想知道:-

>这会以任何方式影响SEO吗?
>这种做法是否正常或是否有一些重要的论据不这样做?

解决方法

Does it effect SEO?

如果我不得不用是或否答案回答这个问题,那么我会说:不

Is this practice fine or are there some weighty arguments not to do so?

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

回到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',200);
    });
})​
</script>
</body>
</html>

猜你在找的jQuery相关文章