这段时间看过很多关于SEO优化的文章，发现大部分讲的都是运营阶段的知识，比如外链、文章内链、PR提升以及针对特定搜索引擎优化的一些经验之谈。这类文章实在是太多太多了，看多了就感觉千篇一律，毫无新鲜感，今天我就说点新鲜的，主要谈谈SEO优化中关于HTML排版的一些技巧，笔者是程序员出生，所以写的东西稍微偏技术性一些，希望大家能够多多谅解。很多网站首页都有一个热点图模块，以幻灯片形式进行切换。& Z; o) l# k7 l9 L
' o. a4 s( E+ X: i5 m. S3 ~
此模块占据国内网站的70%，包括笔者的网站也用到了，而这种效果的代码往往都是在HTML文档结构的前面部分，最常见的也就是导航栏的下面，实现方式无非就是FLASH或者JS脚本，最常用的布局代码如下：
笔者认为如果在HTML前面部分插入了上面的代码，不仅对SEO优化不利，对普通用户来讲也是很郁闷的事情，对SEO不利的地方在于：站长朋友们都知道，一个HTML文档的前面部分是搜索引擎比较看重的地方，如果您使用JS或者FLASH去实现，虽然这些代码搜索引擎识别不了，但JimHwang网络创意工作室，设计让生活更美好！欢迎您常来店里逛逛，和掌柜【jimhwang888】一起看看星星看看月亮，从诗词歌赋聊到人生哲学。
完全可以把其他重要的地方先展示出来给搜索引擎，这些识别不了的东西靠后显示。对普通用户不好的地方在于：此效果一般是4~5张图片进行切换，而这些图加起来最少都有 200KB左右，无论您使用JS或者FLASH实现，只要您是嵌入在HTML文档里面，用户必须等待这些东西加载完成，特别是图片大的时候，很有可能卡住在头部那一块，造成浏览器假死现象，这一点对用户来说是最恐惧的事情。+ q/ R, ]0 O$ d4 X& I+ X1 z. k
0 h! o- W2 k5 X! Z: S6 n
这段时间笔者总结了一些解决方案，并通长时间的观察，实践证明这些方案是OK的，排名也没影响，收录正常，在此斗胆分享给大家。
2 D$ w, q+ d) y0 m
一、结构顺序调整
, {8 ~+ f- m( [- t% `' k5 J8 a
按照以往的排版布局经验，我们的代码应该是这样子的：
body {margin:0;padding:0;text-align:center;}/ c) X3 ]6 j/ F. U/ r
.container {width:980px;margin:0 auto;position:relative;background:silver;}5 ~8 Z+ J, z. B+ A! A2 X2 K; {; ?
.header {height:200px;line-height:200px;background:red;}
.banner {height:150px;line-height:150px;background:yellow;}1 F M8 i5 M B$ R
.content {height:400px;line-height:400px;background:blue;}' U0 `3 J& c# i6 \- g4 V/ A) j/ u
.copyright {height:50px;line-height:50px;background:green;}
$ d9 O) _9 o$ X- d8 K7 }# ]. K& ^
笔者改良过的代码如下：
body {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.header {height:200px;line-height:200px;background:red;}& W9 Y0 |2 `- u+ d2 n# N) `" ~
.banner {position:absolute;top:200px;width:980px;height:150px;line-height:150px;background:yellow;}
.content {margin-top:150px;height:400px;line-height:400px;background:blue;}! n b+ Q" T4 ]9 X
.copyright {height:50px;line-height:50px;background:green;}0 |! T: u0 K% v% q
通过以上代码的对比分析，其实我用的就是CSS里面的Position浮动布局这个技巧，关于Position浮动布局的知识，大家可以查找相关资料，务必要掌握好这个知识点，对SEO优化很有用的。0 f3 [2 C6 V1 M) ], U
5 _8 Z! L2 z$ y9 `1 N
二、巧用延时加载
0 |. {/ t2 v9 M0 s2 e3 g# D' s
$(document).ready(function() {window.setTimeout(function() {FLASH 版本$(".banner").html("这里是FLASH代码插入的地方");! z; W* e# o- f: }
这段Jquery代码的大概意思是，文档加载完成后，过3秒钟，执行AJAX请求，或者一些别的东西，去控制banner这个DIV里面的内容。
+ U/ J1 \! J) d$ G
上面两个方案的代码只是一些抛砖引玉的例子，您完全可以把它用他其他地方，把一些对SEO无关的内容靠后加载，或者用JS延迟加载去显示，这样对搜索引擎来说并无大碍，对普通用户来说也是一件很好的事情。
