找回密码
 加入怎通
查看: 655|回复: 5

[站长八卦] 增加搜索引擎友好度的页面布局设计思路

[复制链接]
渔舟唱晚 发表于 2017-01-25 19:15:38 | 显示全部楼层 |阅读模式
      目前企业所使用的网站都是有网页设计师设计完成的,一般来说设计师设计网站仅从网站的美观,创意和易用的角度考虑,这对于一个期望获得搜索引擎排名的网站来说还是远远不够的,所以在网站策划人应该为设计师提供一个合理的设计方案,提现设计师在设计的过程中需要注意的环节。# _5 B2 O; y) b$ u

- r3 Y% M9 \6 \  g( T
1-3.jpg
# j) w) e% e6 a# }% l, n# m

; |8 O5 C3 V& Z8 @' R( M5 O目录结构和URLURL官方标准称呼是统一资源定位符,即网页的网址,链接,路径。网站文件的目录结构直接提现与URL。清楚的简短的目录结构和规范的命名不仅利于用户体验和网址传播,更是搜索引擎友好的提现。. _! X: M, w% k1 a2 e. ?  R
当然也有些特殊的情况,比如说你的网站有绝对的优势,在网站首页部分添加一个四层的链接,同时四级页面中提供了相当多的有用的价值页面,那么搜索引擎还是会抓取的,这些页面可以是通过大量的外部链接引流进来的,或者其他网站首页链接过来的,那么其效果跟链接到自己首页是一样的,一般图片,脚本,CGI-BIN和css样式都各自有自己独立的文件夹,一般不放在根目录下。

1 A! w5 o  Y+ |% t0 ^5 ~' u! D9 X$ E5 W$ @- n4 V7 y3 h, I2 a2 T
0 j3 @; P$ n9 @/ s) f0 M& t4 c4 ~" w; \  {4 v" s; `
2-1.jpg
: U" t; `7 S, y" X  X4 {6 }( o" W& d: C- i2 {/ C! [

8 F3 O* J* _7 e2 N' U8 C4 l2 Y. S( q动态URL
( K8 f9 c: |1 Y# v5 I% ?7 s目前很多的网站都是自动生产的动态链接,一般采用"?","="%","&","$"等字符。但是这样及不利于搜索引擎抓取,严重影响排名,通常使用一定的技术讲网站链接进行伪静态或者静态化。+ j) U* u5 e! `" n
- }. {' \2 T: Q) l4 \
导航部分网站导航对于用户访问你的网站很重要,一般网站导航对你的网站进行一个总的大纲概况,用户可以根据你的栏目,菜单访问到相关的信息页面,一般来说网站页面导航部分采用"F"型的布局方式。主要功能是引导用户访问你的网站内容,同时也有利于搜索引擎按照一定的路径抓取你的网站内容信息。
' p! f7 a! n5 G4 l6 R; H. N! N
8 @' @6 `" y9 q& ]  K. \! L- v1、主导航清晰
1 [2 q& X/ l7 n) p$ c9 ?主导航一般采用的是一级目录,通过他们竞用户和蜘蛛程序都可以层层的访问到你网站多有的信息内容,主导航一般最容易吸引用户的眼球,在首页部分主导航一定要清晰位置合理,最好采用的是文本链接。
" ]1 ?  ?0 d" Z9 n3 L, d- m8 I/ p1 e$ B& M8 G7 N+ W, _4 @5 |! ^0 i
2、面包屑导航! i' C# a. D* M
所谓的面包屑导航就是像你在某个地方种不知道方向,但是可以根据路标就可以轻松找到出路一样。面包屑的左右就是告诉用户你所在的位置,能根据导航轻松找到上一级菜单,不至于迷失方向。7 r+ s: \  }5 g2 v1 G* z: y

  q* F4 t2 R! i& v! V3、网站首页突出重要内容$ D0 P6 L+ I" Y& _  n7 m
一般网站首页是用户第一个入口页面,也是流量时间比较长的页面,所以说在网站中提现重点主题,有助于更好的展现网站内容,让用户来到你的网站就知道你的网站是干嘛的,能提供哪些服务,同时相关内容要链接到对于的子栏目页面中,每个字页面都要链接到首页,提高首页的权重,这样搜索引擎对你的网站更加重视。
' ^  I6 D4 Y* w
: q! c/ A7 K$ A( m. D$ U' s4、网站地图+ `) S" q8 \) _- T
网站地图(SiteMap)是辅助导航的手段,最初是为了用户设计方便用户更加快捷的打到目标页面,良好的网站地图设计常常以网站拓扑结构体现复杂的目录关系,具有静态、直观、扁平、简单的特点。对于用户来说采用的是清晰明了的地图方式,对于搜索引擎来说也需要网站地图(xml格式)告诉搜索引擎我们网站有哪些内容链接,防止搜索引擎漏爬网站内容。一般来说xml网站地图给出的是是网站枝干的链接,而不是所有的枝叶都展现,内容页面不适宜放太多的链接。有些大型的网站需要讲网站地图拆分多个网页,对于中小企业来说只需要一个就完全满足。8 d) t4 k. g1 W3 N' A0 A& }: ]
3-1.jpg
8 ]7 @6 S4 `5 O  o
框架结构框架结构,即帧结构(Frame)网页表现为一个页面内的某一块保持固定,其它部分信息可以通过滚动条上下或左右移动显示,如左边菜单固定,正文信息可移动,或者顶部导航和LOGO  部分保持固定,其它部分上下或左右移动。我们的邮箱通常都采用框架建构。框架型网页的另一个表现是,深层页面的域名通常不会在 URL 中体现出来,即使进入深层子页面,浏览器显示出来的 URL 仍然是主页的 URL。
8 k/ K& N0 y! f1 G2 k8 o
7 _6 Y7 I0 z, ?% \# @框架型网站的优越性体现在页面的整体一致性和更新方便上。尤其对于那些大型网站而言,框架结构的使用可以使网站的维护变得相对容易。但框架对搜索引擎来说是一个很大的问题,这是由于大多数搜索引擎都无法识别框架,也没有什么兴趣去抓取框架中的内容。此外,某些浏览器也不支持框架页面。
' |; }2 z6 h" J/ d! h' d- i0 x# y
/ q9 x2 d: k, Z  [1 ?/ X
如果网页已经使用了框架,或出于某种原因一定要使用框架结构,则必须在代码中使用“Noframes”标签进 行优化,把  Noframe  标 签看 做是一个普 通文本内容 的主页。在<Noframe></Noframe>区域中包含指向 frame 页的链接以及带有关键词的描述文本,同时在框架以外的区域也出现关键词文本。这样,搜索引擎才能够正确索引到框架内的信息。+ j4 v! d6 [5 _
$ f, M4 l. @. h: w! o& c& C; z1 v2 w8 v
还有一个办法是采用 iframe 即内联框架(Inner Frame)技术来避免 Frame 带来的不便。所谓 iframe 也是框架的一种形式,它是相当于在主浏览器窗口中内嵌一个子窗口,内容自动打开。iframe 可以嵌在网页中的任意部分,也可以随意定义其大小,其代码显示为: <iframe src=xx width=x height=x scrolling=xx frameborder=x></iframe>”
9 q. F& o3 Z0 z: n/ L2 e
, X5 e$ e7 O! ~) }, Q1 z' c对搜索引擎来说,iframe  中的文字是可见的,也可以跟踪到其中链接指向的页面,不过与用户所见不同的是,搜索引擎将 iframe 内容看成单独的一个页面内容,与被内嵌的页面无关。
) q6 E: m, G) g: y* P
) N* x7 {' n& X- P2 G) d网站图片优化搜索引擎只对文本内容情有独钟,对于图片就有点不怎么喜爱,因为搜索引擎对于图片不能很好地识别,一般网站图片加载20~30秒左右,用户就极有可能离开了,所以在做图片站的服务器空间一定好很好。网站图片优化主要注意两点一个是增加搜索引擎和识别的文本描述,第二点图片要尽可能想小。, I+ J% |4 G+ s: ?& U
& ]: x. U* s5 U1 _4 S  W
ALT属性
. A8 a6 F2 {2 ]* t- Y每个图片下面都有个alt属性,方便告诉搜索引擎这个图片是什么意思,同时在图片下面加上相关性的描述,并适当带有关键词。* u' t! T3 E4 s" j2 B, b6 {8 l
文本说明细节:
) w# d% v3 D5 [5 b4 Q(1)、在图片上方或者下方带有关键词的描述文本。8 Y: u+ n7 b/ v% W! ?
(2)、在代码中添加一个包含关键词的heading标签,然后在下面图片增加文字描述。0 F9 U- d& u. Q
(3)、在图片下方增加一个包含更多信息的链接,包含关键词。
- D& \& {7 x: p" H9 @4 t/ h(4)、创建一些吸引用户点击有能吸引搜索引擎抓取的文本内页,把流量吸引到这些内容页面,在提供文本链接指向你的图片页面。
" {# Z: u/ D* e  Y, ?. I- t4 q% V" R! a$ [, u  x! N( V/ d
$ c/ @5 Q/ I$ O! A, C& O6 c总的来说网站内容中尽量少使用装饰性的图片,Alt熟悉对于搜索引擎来说很重要。
5 G+ y( V8 K; Q. g" uGif和jpge图片优化/ Y6 d/ ]. U3 K: H/ n8 _' d8 B# C% f- s5 ~
网站图片中alt标签是所以图片都试用,一般来说网站中图片格式主要有gif,jpge,png几种格式,一般网站首页logo中使用的格式是gif和png比较多,PNG,图像文件存储格式,其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。。。PNG格式图片因其高保真性、透明性及文件体积较小等特性,被广泛应用于网页设计、平面设计中。网络通讯中因受带宽制约,在保证图片清晰、逼真的前提下,网页中不可能大范围的使用文件较大的bmp、jpg格式文件,gif格式文件虽然文件较小,但其颜色失色严重,不尽人意,所以PNG格式文件自诞生之日起就大行其道。PNG格式图片通常被我们当做素材来使用,在设计过程中,不可避免的要搜索相关文件,如果是JPG格式文件,抠图就在所难免,费时费力,我们经常在网页中看到整个页面使用同一个PNG图片做背景,按钮、导航条等全做在一张图片上,其实就是这个道理,究其缘由无非就是PNG图片在下载过程中占带宽较小,而且颜色逼真,下载一次可重复使用。jpge格式一般在压缩的过程中会失真,对于网站中png格式压缩不会出现失真的情况,也是后期网站反正的一个趋势!但是目前现状网站中还是蛀牙以jpge格式为主,上传图片信息多以jpg格式。
. `& \! q  r+ x8 o4 j5 X/ ~/ }6 k/ Z6 [4 r8 S1 o6 J. Q
: G, [, p3 c9 w/ Z) d
33.jpg
; M9 \, D. X3 R5 o& s
; x9 _" w# n* a4 h0 @6 H8 u3 c4 D+ n* a& C/ [7 o% j9 e. _/ {+ i3 [8 y
Flash优化
4 x1 ~; D* t+ ^/ w- i1 d对于flash来说跟前面的图片一样,对于搜索引擎来说都很不友好,对于图片有alt标签做辅助,那么对于flash就没有那么幸运了,并没有什么标签熟悉进行辅助,一般企业使用flash才采用下面三种方式:2 h6 P) a, s- L( ?$ n$ f
. e' [) `2 Z: L& C- B! K- s/ @* f
1、做一个flash辅助的html版本
, M1 o4 t! p; s: d& e, p这样的样式既保留了原本的flash版本的同时,还设计一个html格式文本,这样既美观有保持动态效果,首先让搜索引擎通过html版本的网页发现网站。(
. R! @" |- O+ h7 Y+ c
- b9 l1 k! f! p% l2、将flash内嵌html文件
4 U0 s" t, ^0 ?还可以通过改变网页结构进行弥补,只需要将flash文件内嵌到html中,进行对用户浏览,搜索引擎可以冲html中获得需要的信息。及时全部首页都是flash,那么也要讲相关的内页链接置于flash之外,这样有助于搜索引擎抓取获得内页信息。2 f" E8 H8 W% U& C) {6 g3 K7 P. J. a! U% f
9 ?6 ~  s5 [# O$ y
3、付费登录搜索引擎

. ]9 X$ p4 T- W* R5 u如果 FLASH 网站错过了被免费的技术型搜索引擎自动检索的机会,或者搜索结果排名效果不太理想,可以通过付费登录或做搜索引擎关键词广告,同样被用户搜索到。
* }6 z/ P$ Z1 w7 D( b7 s
+ p7 g; v* c; ?$ z, s; `总体上,商业网站应尽量少用 FLASH,站点间进行广告交换时也要避免采用 FLASH 广告为上策。
. }) E5 ~* H1 |7 P! f
) x1 c: J" T, x0 y; I  M& F表格使用表格是网站中最重要的排版方式,如果某个网页采用大量的长篇文本,除了可以将一页文本分成多个页面,可以讲文本置于表格中,这样不仅管理方便,也使得该页加载时每个
) T# c" R; ^5 U: s& O: f) n表格内容依次加载,这样访问者就可以一边看已下载内容一边等待剩余部分加载,而不是等待很久之后才一齐加载出来。表格之内套嵌太多表格也不利于页面加载,因浏览器是先加载完大表格之后再加载内嵌的小
9 K3 F9 [& N# \2 a) R& j表格,因此内嵌表格会最终降低整页加载速度。$ G% ]  M# j. u( l/ m, J+ q
, a- _3 c3 x  w6 g  P+ B
网页减负
8 o& a6 O4 H+ G+ C+ A7 N- M通常情况下网站代码太多的话会减缓网站打开的速度,很不利于用户的浏览,一般需要对网页进行减负,让蜘蛛更轻松的抓取你网站的内容。正常情况下一个页面的文件大小在15k左右,最好不要超过50k。
4 M% @2 Q" c% I5 C8 U5 {$ T1 Z) b: w0 i! c
css样式

# a) H. {! ?2 R网站制作中css样式是很重要的,所有的样式都需要通过调研css进行展现出现绚丽的效果,一般css样式需要采用一个单独页面文件夹中,表面网站中出现大量的样式代码。
( E" z6 s, {  E7 {5 x' L. }6 l* Q3 L6 o0 T0 h
JavaScript脚本
: i; }4 b3 c9 }0 f正常情况下下网站前段都以html为开始,但是采用JavaScript技术的完整就会出现大量的java代码,以至于mata及关键词不能出现,被推至页面底部,对于搜索引擎来说很不友好。通常情况下,讲脚本移植到网站的底部进行加载,还有一种情况使用.js文件脚本文件,在使用的时候进行引用调用,在访问过程中在浏览器中缓存下来,使得下次访问的时候加快速度,也使得网站修改和维护起来更加方便。, G: l; |4 Y# B, M

. m3 F3 J1 Q3 S, V. z文章由 易百讯提供,链接为http://www.yibaixun.com/) k2 A. ?3 Z. R& C) y
1 P5 r9 M, J" B6 d( V4 b6 @
回复

使用道具 举报

煞风景 发表于 2017-01-25 19:15:51 | 显示全部楼层
有一种回帖叫做抢沙发
回复 支持 反对

使用道具 举报

444609180 发表于 2026-02-25 04:47:13 | 显示全部楼层
分析得很透彻,很多细节都说到点子上了~
回复 支持 反对

使用道具 举报

www-co9co-com 发表于 2026-04-19 22:22:09 | 显示全部楼层
学习到了,之前一直没注意过这个点,受教了
回复 支持 反对

使用道具 举报

雷厉风行2012 发表于 2026-05-18 09:23:23 | 显示全部楼层
这个思路很新颖,打开了新世界的大门,谢谢分享
回复 支持 反对

使用道具 举报

linqhe 发表于 2026-05-21 15:06:43 | 显示全部楼层
说得很实在,没有夸大其词,这种真实分享太难得了
回复 支持 反对

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

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

    GMT+8, 2026-6-21 09:10 , Processed in 0.037968 second(s), 29 queries , Gzip On.

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

    Powered by Discuz! X3.5

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