淺顯的議論SEO優化技法之HTML結構調試

　　這段時間看過眾多關於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的，名次也沒影響，收錄正常，在此大膽分享給大家。

　　一、結構順著次序調試

　seo　依照過去的排字布局經驗，我們的代碼應當是這麼子的：

　　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(, function(data){
$(.banner).html(data);
});
}, 3000);
});

　　這段Jquery代碼的約略意思是，文檔加載完成後，過3秒鍾，執行AJAX煩請，還是一點別的物品，去扼制banner這個DIV裡邊的內部實質意義。

　　上頭兩個方案的代碼只是一點拋磚引玉的例子，您足以把它用他別處，把一點對SEO無關的內部實質意義靠後加載，還是用JS延緩加載去顯露，這麼對搜索引擎網站來說並無大礙，對平常的用戶來說也是一件美好的事物。