-
這段時間看過很多關於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原創,轉發的時候請不要刪除原作者版權信息,謝謝!
感謝深圳旗風網絡的投稿