设为首页收藏本站

 找回密码
 加入怎通
真牛社区»站长 › 站长交流区(站长SEO的畅谈分享区) › 百科杂谈 › 关于js实现的tab效果对seo的影响
返回列表 发新帖
查看: 868|回复: 7

[站长八卦] 关于js实现的tab效果对seo的影响

[复制链接]
郑州一帆机械 发表于 2012-08-10 14:14:22 | 显示全部楼层 |阅读模式
    我们都知道现在大部分网站上有tab切换的效果（就是一个块，鼠标悬停在上面不同的板块时，这个块里的内容页随之变动，这种效果可以说现在网上随处可见），但是百度快照里面就没有这个效果，那那些tab里面的内容会不会收录。今天咱们就就讨论一下关于这方面的内容。( w( w' x" w8 i5 M/ f# m9 s/ \
    首先说一下网站上的这个tab切换效果是怎么来的。这个tab切换效果是用javascript实现的效果，根据实现的方式，一般有两种做法：一种是直接设置导航元素的onmouseover属性，在鼠标经过导航元素时触发目标元素的显示内容变换效果，另一种则是完全用javascript控制导航元素的onmouseover属性。两种方法的共同点就是都有一个控制目标元素内容显示隐藏的函数，这两种做法没有什么根本性的区别，只是在页面代码样式分离上做法不同。
) w. C. p. k$ u$ i7 y而在目标元素的内容的获取，也即目标元素的显示内容变换上也有两种做法，这两种做法则是对SEO有完全不同的影响了。第一种方法是所有的目标元素按照导航元素的命名顺序，全部获取内容并展现出来，比如导航元素是1、2、3，那么目标元素按照顺序也是1、2、3，每一个目标元素的内容都是已经获取好了的，只不过2和3刚开始的显示属性设置为display:none，然后完全由javascript来控制2和3的显示属性，鼠标悬停在导航元素2的时候，1和3的显示属性就为display:none，冲击式破碎机（制砂机）http://www.51xishaji.cn/而2的显示属性则修改为display:block，这样在同一个框架体内，就完成了1、2、3三个目标元素内容的切换显示。这种方法的优点是所有的内容全部都可以为蜘蛛爬行到（蜘蛛是无视页面样式属性直接读取源代码的，隐藏掉的元素也可以读取出来），缺点是页面尺寸会大一些，尤其是tab里面存在大量图片的时候，会比较影响页面的加载速度。
) Q+ N" R: u, {5 |# s    另一种方法跟上面的则完全不同，导航元素依然是1、2、3，而目标元素则只有一个，那么目标元素的内容从哪里来呢？通过一种叫做ajax的方法来。这种方法下，页面一般只有目标元素的第一个内容是一开始就完成的，在鼠标悬停在导航元素时触发ajax执行函数从服务器端获取目标元素需要显示的其他内容，比如鼠标悬停在导航元素2的时候，就会触发ajax函数从服务器端获取2的内容填充到目标元素，这种方式一样可以实现目标元素内容的切换显示。这种方法的优点是页面需要加载的尺寸比较小，只有在需要获取tab内容时才会从服务器端读取相应的tab内容，而缺点则是完全不适合SEO，大家都知道搜索引擎蜘蛛对javascript是不感冒的， 当目标元素的内容在当前页面不存在，需要依靠javascript来获取的时候，蜘蛛一样是没法爬行到目标元素的内容的。
4 g9 l; j5 g% D- i; T* @( M& ]& P    从上面的说明我们可以看出来，快照里面的tab切换是否显示对于实际SEO的效果的影响实际是跟网站本身所采用的tab切换方式有关系，而蜘蛛本身不抓取javascript，所以快照里当然无法实现tab切换的效果，只有网站本身采用的tab切换方式不同才会对SEO产生影响。好在现在主流的网站系统一般都不会采用ajax方式来做tab切换显示效果，所以大家通常不必担心，但对于一些小众的网站管理系统（多为一些IDC自己开发）则需要注意了，需要看一下源代码识别你的tab切换方式会不会对SEO产生影响。
* ^! N. P( Y. j( w6 R8 Z冲击式破碎机（制砂机）http://www.51xishaji.cn/; E$ k, ]+ C- r# S5 k
回复

使用道具 举报

新浪9158 发表于 2012-08-10 14:23:50 | 显示全部楼层
这样啊              。。。
回复 支持 反对

使用道具 举报

夏苏 发表于 2012-08-10 14:34:36 | 显示全部楼层
只有网站本身采用的tab切换方式不同才会对SEO产生影响。# f9 c  T$ Z. `1 l4 Z' B; z

' \  K/ h7 h9 _! M
+ g) j$ S9 a, f' Y3 d9 v/ y9 R. j

+ Z, {6 d" D% f$ D
( c5 Z# L# ?  u' b" J' I+ I
' {2 Z; \. J0 f3 k4 p) y0 e. Y
( N0 S* E+ Z. z! m& Y/ i4 d* ~
# s5 _) U$ K, l0 i5 B* t. b3 e; j/ l, N% d% a4 x

8 a$ Z. E7 l2 D( ~6 [: T$ ?# O5 E  A. T; b
- q. C  l# U5 K% k
% z$ R; q3 ~; q( d# E  v, o% m
  m) C8 j$ j1 q" H' {. x2 P4 M. T

" _. ?( {- l2 M0 k$ b3 @7 C, M. [  i8 o0 Y9 f8 Z0 _+ F' j
7 g% a1 ^. r/ ^* C- `: C& F
- d2 j" F2 l, [3 k

8 @; m5 ]* X, w7 h* u- |# e- d
0 c) d) ?: C! z' I# O  H/ E, Q
, @/ _7 e! ~9 }1 Z0 J. i. n! @6 Q! [

) W5 D0 q. I- I, I
, F8 \6 _7 V/ U* _2 Y, _0 c4 d
; f& l& ^, \5 r' I' U, q& W! K2 ]4 j! L招聘摄影师  http://hr.7192.com/sheyingshi   p4 M0 f3 U. S( h2 U; M  v
招聘摄影助理  http://hr.7192.com/sheyingzhuli招聘摄影总监  http://hr.7192.com/sheyingzongjian招聘化妆师  http://hr.7192.com/huazhuangshi招聘化妆总监  http://hr.7192.com/huazhuangzongjian
回复 支持 反对

使用道具 举报

 楼主| 郑州一帆机械 发表于 2012-08-10 14:35:38 | 显示全部楼层
本帖最后由 郑州一帆机械 于 2012-8-10 14:37 编辑
- N& k2 A7 N4 c4 y. O$ w5 j- b% D: O  {+ }; u0 D
自己感觉挺不错的一篇文章，拿来与大家分享，希望大家多多支持！冲击式破碎机http://www.51xishaji.cn建筑垃圾破碎机http://www.jianzhulaji.org/
回复 支持 反对

使用道具 举报

∩菰_髑∩ 发表于 2012-08-10 15:00:46 | 显示全部楼层
只有网站本身采用的tab切换方式不同才会对SEO产生影响
回复 支持 反对

使用道具 举报

微博评论 发表于 2025-11-10 19:44:14 | 显示全部楼层
这个思路很新颖，打开了新世界的大门，谢谢分享
回复 支持 反对

使用道具 举报

韧重而道远 发表于 2026-01-18 06:12:39 | 显示全部楼层
蹲了这么久，终于看到有价值的讨论，支持一下！
回复 支持 反对

使用道具 举报

sun947917487 发表于 2026-05-17 12:36:46 | 显示全部楼层
楼主太厉害了，整理得这么详细，必须支持
回复 支持 反对

使用道具 举报

返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-6-12 09:58 , Processed in 0.026178 second(s), 24 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表