淺談SEO優(yōu)化技巧之HTML結構調(diào)整
分享
評論
贊0
這段時間看過很多關于seo優(yōu)化的文章,發(fā)現(xiàn)大部分講的都是運營階段的知識,比如外鏈、文章內(nèi)鏈、PR提升以及針對特定搜索引擎優(yōu)化的一些經(jīng)驗之談.這類文章實在是太多太多了,看多了就感覺千篇一律,毫無新鮮感,今天我就說點新鮮的,主要談談seo優(yōu)化中關于HTML排版的一些技巧,筆者是程序員出生,所以寫的東西稍微偏技術性一些,希望大家能夠多多諒解.
很多網(wǎng)站首頁都有一個熱點圖模塊,以幻燈片形式進行切換(見下圖)
此模塊占據(jù)國內(nèi)網(wǎng)站的70%,包括筆者的網(wǎng)站也用到了,而這種效果的代碼往往都是在HTML文檔結構的前面部分,最常見的也就是導航欄的下面,實現(xiàn)方式無非就是FLASH或者JS腳本,最常用的布局代碼如下:
<div class="banner"> <object> FLASH版本 </object> </div> <div class="banner"> <script type="text/javascript"> Javascript版本 </script> </div>
筆者認為如果在HTML前面部分插入了上面的代碼,不僅對seo優(yōu)化不利,對普通用戶來講也是很郁悶的事情,對seo不利的地方在于:站長朋友們都知道,一個HTML文檔的前面部分是搜索引擎比較看重的地方,如果您使用JS或者FLASH去實現(xiàn),雖然這些代碼搜索引擎識別不了,但完全可以把其他重要的地方先展示出來給搜索引擎,這些識別不了的東西靠后顯示.對普通用戶不好的地方在于:此效果一般是4~5張圖片進行切換,而這些圖加起來最少都有200KB左右,無論您使用JS或者FLASH實現(xiàn),只要您是嵌入在HTML文檔里面,用戶必須等待這些東西加載完成,特別是圖片大的時候,很有可能卡住在頭部那一塊,造成瀏覽器假死現(xiàn)象,這一點對用戶來說是最恐懼的事情.
這段時間筆者總結了一些解決方案,并通長時間的觀察,實踐證明這些方案是OK的,排名也沒影響,收錄正常,在此斗膽分享給大家.
一、結構順序調(diào)整
按照以往的排版布局經(jīng)驗,我們的代碼應該是這樣子的:
HTML代碼:
<body> <div class="container"> <div class="header">頭部內(nèi)容</div> <div class="banner">幻燈片效果模塊</div> <div class="content">正文內(nèi)容</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">頭部內(nèi)容</div> <div class="content">正文內(nèi)容</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優(yōu)化很有用的.
二、巧用延時加載
HTML代碼:
<body> <div class="container"> <div class="header">頭部內(nèi)容</div> <div class="content">正文內(nèi)容</div> <div class="copyright">版權部分</div> <div class="banner"></div> </div> </body>
Jquery代碼:
$(document).ready(function() { (function() { FLASH 版本 $(".banner").html("<object>這里是FLASH代碼插入的地方</object>") AJAX 版本 $.get(", function(data){ $(".banner").html(data); }); }, 3000);});
這段Jquery代碼的大概意思是,文檔加載完成后,過3秒鐘,執(zhí)行AJAX請求,或者一些別的東西,去控制banner這個DIV里面的內(nèi)容.
上面兩個方案的代碼只是一些拋磚引玉的例子,您完全可以把它用他其他地方,把一些對seo無關的內(nèi)容靠后加載,或者用JS延遲加載去顯示,這樣對搜索引擎來說并無大礙,對普通用戶來說也
猜你喜歡
評論(0人參與，0條評論)
發(fā)布評論
最新評論