搜索引擎的爬行与人的视觉感官是一致的,从上到下,从左到右.而通常一个网站页面左上角放置的都是网站的Logo,且通常这里会起到内页返回首页的链接作用,因而做好这个Logo部分的优化虽然说不是必不可少,但对于像我这样对每个细节都精益求精的人来说是势在必行.以下我将依次分三步递进讲解这个部分的优化:
% G }: X/ }( b' S% ]* J9 k! c+ _
# U/ ~4 P0 X1 X2 L6 W0 ] 一、普通优化
. q' S- F- {% k9 q4 b8 N0 S& ?4 s( c/ E( h& C4 n
普通优化的代码,一般如下:6 O# E# r1 v5 E5 K% ?9 ]2 X
( \. m$ t# ~( A8 @
logo-111213.jpg: Q0 u' l2 J1 @' y# `
" ]' ~, \4 h' l
简单讲解一下这段代码:这段代码是给logo部分划分好一个div块,里面填充的内容是带有网站首页链接的图片.说来简单,但实际上据观测有30%的网站优化不到这个程度.2 y- H9 N, u' e$ ~; [- {
* A- B( t5 m6 A- `1 P 他们通常犯的错有如下:LOGO图片没写Alt属性;LOGO图片没带超链接;没给LOGO图片的样式添加长宽.) j+ M2 Z. \# a( ]" `$ N# l
3 f7 \/ X* u; J LOGO图片不写Alt属性,对蜘蛛不友好,因其无法抓取图片里的内容,不利于SEO;LOGO图片没带超链接,无法引导用户从内页返回首页,客户体验不够好;没给LOGO图片的样式添加长宽,会导致浏览器渲染时长增加.3 Q( T, `7 j+ f, M1 \6 ]: s
2 n ? q2 N- ~- n9 i
希望各位站长或写代码的朋友能严格按照以上代码写好自己网站的头部LOGO,对于网站的权重和客户体验都是很好的提升.
! d$ |$ w$ |" W
6 \5 _8 T. I/ A9 k/ `; s8 | 二、高级优化
1 B6 w; [- X2 Y, ] N
/ |2 Q' z. [* e; t& E 如果你认为按上面提到的代码优化就OK了,其实不然,上面的代码个人只能给70分.接下来我们讲一下比上面代码优化度更高的写法,适合对细节特别在意的朋友., B7 i0 M; q3 o* {# `
! s) X/ W3 C* _5 F2 y% m3 X, S
高级优化的代码,如下:
2 ~6 g$ N3 m2 W/ m, A2 R8 B
' X$ G' k) l/ r- [ logo-111213-2.jpg
" u! P C# U/ b* V) Y6 {$ }+ e5 c; M
这段代码把超链接移到外面,而且没有LOGO图片,那不是比上面的代码还差?且听我说完,你看到的html代码确实如此,但是你没看到它的样式CSS,这段代码的含义是将LOGO图片设置为Logo块的背景图,然后给这个块加首页链接.$ c4 S# j2 p5 O0 i& i
8 Q& m5 @& o( k+ f 为什么这么处理呢,因为首先,它的代码量减少了,少设置LOGO图片的代码,其次,"网站名"写在超链接里,形成了描文本,而我们都知道描文本的链接价值是最高的.
& m6 R; g; }# f, |
5 Y! V8 t1 f+ H7 t% Q, r 有细心的朋友可能观察到了,如果文字形式的"网站名"写在LOGO样式里面,则看到的效果是文字在背景(即logo)至上,岂不是很难看?当然我还没说完,LOGO样式我们还需要增加一个样式控制text-indent:-99em,让文字部分(即网站名显示在屏幕以外),这样就不会有文字显示在LOGO上了很多SEOer会说了,这样隐藏文字的做法是作弊.其实不然,通过本人观察国外很多网站,很多采用这样的做法,并不构成作弊,因为这个部分是LOGO,它不同于网页内容里隐藏关键字的做法,是不会被搜索引擎判定为作弊的.& w& c& z2 A: j6 r& M; u
* @; ?% z: ^7 b) w; M, ]' k- s 当然,还是要说,这种高级优化仅适合于高级网页设计人员,一般水平的朋友就不需要在普通优化的基础上考虑高级优化了.
: B3 ]* l, P5 G" m+ l$ P9 e6 M( u3 W' h) s, P/ h) V3 t
三、终极优化& m2 i! ~1 n) J7 a8 U' y
' G5 z+ P0 S) X
以上的高级优化我个人可以给到90分得高分,而如果想把这个分数进一步提高,我们需要做以下更优的改进!6 E K7 V& M; R- R% W5 V0 I: d! e
* t. P% A# p1 P4 @0 Y+ p" u; j( ^8 A 终极优化的代码,如下:
a% x; L9 {0 Q% b E7 f+ B
% w7 Y! S) y! v g logo-111213-3.jpg, ]* k5 y$ h& t6 Z C: y( H
, `8 A/ J; v; a, d0 w( w 这段代码与上面的高级优化基本相同,仅仅增加了h1标签我们都知道h1标签在整个网站里占有非常非常高的权重,而把网站名这个文字添加h1标签,无疑大大提高了网站的品牌价值而又会有朋友指出,首页在网站名外设置h1标签无可厚非,但要知道头部部分通常是通用模板代码,如此一来,每个内页不是就多出一个h1标签,而我们都知道h1标签每个页面仅能使用一次,不就得不偿失了?确实,h1标签在每个页面只能使用一次,而通常内页里h1都加在title的关键词里这就需要我们对模板文件做个判断.
: Z' }7 i! k5 P \) P3 l. \# J+ X" } p2 I
以笔者使用的ecshop商城系统为例,我是这么写的
& {: N3 ~2 H7 w% j+ J6 v3 m" l* g
; E7 f' S& v" X1 P/ Z2 y logo-111213-4.jpg3 V$ _% V8 O4 X5 Q
7 S! g9 J8 }. r1 G& [% {* x1 M 这段代码是写在模板内,实际html输出是不带{}的内容,它是代表:程序判断若当前页面是首页,则给网站名加h1标签,如果是其他页面,则不加.如此一来每个页面都能有独立唯一的h1标签(95%的网站首页没有h1)
% F& N1 i9 Z1 x7 R% l7 M8 J d/ k' |1 [' m, i/ Q% y1 w
以上讲的分数可以占8分,那离满分尚有两分,而这两分是存在争议的这两分得争议是:使用css spirit,将logo图片与其他网页背景图片整合到一起成一张大图片,而样式切割出logo的位置html输出这样的好处是减少了服务器的请求,更快的加载,争议的部分在于搜索引擎不会知道那一张整合后的背景图片的哪一部分是logo而不被抓取其实这个的还有一个可能是好处又或是坏处的地方,就是它让增加了尝试保存你的LOGO图片的访问者的难度.号称国内SEO水平最高的皮包类商城正是使用这样的终极优化.& y1 n K. }1 r5 F# L
% U( Z0 u6 I5 v+ w6 l, l
以上提到的LOGO优化三步曲已到末尾.感兴趣的朋友可以依次尝试,或者浅尝辄止仅采用最大众的第一种优化手法.越往后越需要更高的代码技术,请确保你完全熟悉DIV+CSS后再尝试,否则容易出现浏览器不兼容或显示错乱的问题.感兴趣的朋友也可以到笔者网站上研究这部分代码,笔者正是使用了最高等级的优化代码.
; Z* `, @& n% k* e: L1 ~- i8 i' [ V2 _5 @ u
本文来之鹰潭江南小额贷款公司 http://www.jnloan.com.cn,转载请注明出处!8 K1 D. H( ^, e* A& t
|
