這段時間看過很多關於SEO優化的文章，發現大部分講的都是運營階段的知識，比如外鏈、文章內鏈、PR提升以及針對特定搜索引擎優化的一些經驗之談。這類文章實在是太多太多了，看多了就感覺千篇一律，毫無新鮮感，今天我就說點新鮮的，主要談談SEO優化中關於HTML排版的一些技巧，筆者是程序員出生，所以寫的東西稍微偏技術性一些，希望大家能夠多多諒解。
很多網站首頁都有一個熱點圖模塊，以幻燈片形式進行切換（見下圖）
此模塊占據國內網站的70%，包括筆者的網站也用到了，而這種效果的代碼往往都是在HTML文檔結構的前面部分，最常見的也就是導航欄的下面，實現方式無非就是FLASH或者JS腳本，最常用的布局代碼如下：
<div class="banner"><object>
FLASH版本
</object>
</div>
<div class="banner">
<script type="text/javascript">
Javascript版本
</script>
</div>
筆者認為如果在HTML前面部分插入了上面的代碼，不僅對SEO優化不利，對普通用戶來講也是很郁悶的事情，對SEO不利的地方在於：站長朋友們都知道，一個HTML文檔的前面部分是搜索引擎比較看重的地方，如果您使用JS或者FLASH去實現，雖然這些代碼搜索引擎識別不了，但完全可以把其他重要的地方先展示出來給搜索引擎，這些識別不了的東西靠後顯示。對普通用戶不好的地方在於：此效果一般是4~5張圖片進行切換，而這些圖加起來最少都有200KB左右，無論您使用JS或者FLASH實現，只要您是嵌入在HTML文檔裡面，用戶必須等待這些東西加載完成，特別是圖片大的時候，很有可能卡住在頭部那一塊，造成浏覽器假死現象，這一點對用戶來說是最恐懼的事情。
這段時間筆者總結了一些解決方案，並通長時間的觀察，實踐證明這些方案是OK的，排名也沒影響，收錄正常，在此斗膽分享給大家。
一、結構順序調整
按照以往的排版布局經驗，我們的代碼應該是這樣子的：
HTML代碼：
<body><div class="container">
<div class="header">頭部內容</div>
<div class="banner">幻燈片效果模塊</div>
<div class="content">正文內容</div>
<div class="copyright">版權部分</div>
</div>
</body>
CSS代碼：
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;}
.banner {height:150px;line-height:150px;background:yellow;}
.content {height:400px;line-height:400px;background:blue;}
.copyright {height:50px;line-height:50px;background:green;}
筆者改良過的代碼如下：
HTML代碼：
<body><div class="container">
<div class="header">頭部內容</div>
<div class="content">正文內容</div>
<div class="copyright">版權部分</div>
<div class="banner">幻燈片效果模塊</div>
</div>
</body>
CSS代碼：
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;}
.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;}
.copyright {height:50px;line-height:50px;background:green;}
通過以上代碼的對比分析，其實我用的就是CSS裡面的Position浮動布局這個技巧，關於Position浮動布局的知識，大家可以查找相關資料，務必要掌握好這個知識點，對SEO優化很有用的。
二、巧用延時加載
HTML代碼：
<body><div class="container">
<div class="header">頭部內容</div>
<div class="content">正文內容</div>
<div class="copyright">版權部分</div>
<div class="banner"></div>
</div>
</body>
Jquery代碼：
$(document).ready(function() {window.setTimeout(function() {
FLASH 版本
$(".banner").html("<object>這裡是FLASH代碼插入的地方</object>")
AJAX 版本
$.get("http://www.flagwind.com/GetBanner.html", function(data){
$(".banner").html(data);
});
}, 3000);
});
這段Jquery代碼的大概意思是，文檔加載完成後，過3秒鐘，執行AJAX請求，或者一些別的東西，去控制banner這個DIV裡面的內容。
上面兩個方案的代碼只是一些拋磚引玉的例子，您完全可以把它用他其他地方，把一些對SEO無關的內容靠後加載，或者用JS延遲加載去顯示，這樣對搜索引擎來說並無大礙，對普通用戶來說也是一件很好的事情。本文由深圳網站建設旗風網絡 www.flagwind.com 原創，轉發的時候請不要刪除原作者版權信息，謝謝！
感謝 深圳旗風網絡 的投稿