淺談SEO優(yōu)化技巧之HTML結(jié)構(gòu)調(diào)整
2019-03-15 來(lái)源：flagwind.com
這段時(shí)間看過很多關(guān)于SEO優(yōu)化的文章，發(fā)現(xiàn)大部分講的都是運(yùn)營(yíng)階段的知識(shí)，比如外鏈、文章內(nèi)鏈、PR提升以及針對(duì)特定搜索引擎優(yōu)化的一些經(jīng)驗(yàn)之談。這類文章實(shí)在是太多太多了，看多了就感覺千篇一律，毫無(wú)新鮮感，今天我就說(shuō)點(diǎn)新鮮的，主要談?wù)凷EO優(yōu)化中關(guān)于HTML排版的一些技巧，筆者是程序員出生，所以寫的東西稍微偏技術(shù)性一些，希望大家能夠多多諒解。
很多網(wǎng)站首頁(yè)都有一個(gè)熱點(diǎn)圖模塊，以幻燈片形式進(jìn)行切換（見下圖）
此模塊占據(jù)國(guó)內(nèi)網(wǎng)站的70%，包括筆者的網(wǎng)站也用到了，而這種效果的代碼往往都是在HTML文檔結(jié)構(gòu)的前面部分，最常見的也就是導(dǎo)航欄的下面，實(shí)現(xiàn)方式無(wú)非就是FLASH或者JS腳本，最常用的布局代碼如下：
<div class="banner"><object>
FLASH版本
</object>
</div>
<div class="banner">
<script type="text/javascript">
Javascript版本
</script>
</div>
筆者認(rèn)為如果在HTML前面部分插入了上面的代碼，不僅對(duì)SEO優(yōu)化不利，對(duì)普通用戶來(lái)講也是很郁悶的事情，對(duì)SEO不利的地方在于：站長(zhǎng)朋友們都知道，一個(gè)HTML文檔的前面部分是搜索引擎比較看重的地方，如果您使用JS或者FLASH去實(shí)現(xiàn)，雖然這些代碼搜索引擎識(shí)別不了，但完全可以把其他重要的地方先展示出來(lái)給搜索引擎，這些識(shí)別不了的東西靠后顯示。對(duì)普通用戶不好的地方在于：此效果一般是4~5張圖片進(jìn)行切換，而這些圖加起來(lái)最少都有200KB左右，無(wú)論您使用JS或者FLASH實(shí)現(xiàn)，只要您是嵌入在HTML文檔里面，用戶必須等待這些東西加載完成，特別是圖片大的時(shí)候，很有可能卡住在頭部那一塊，造成瀏覽器假死現(xiàn)象，這一點(diǎn)對(duì)用戶來(lái)說(shuō)是最恐懼的事情。
這段時(shí)間筆者總結(jié)了一些解決方案，并通長(zhǎng)時(shí)間的觀察，實(shí)踐證明這些方案是OK的，排名也沒影響，收錄正常，在此斗膽分享給大家。
一、結(jié)構(gòu)順序調(diào)整
按照以往的排版布局經(jīng)驗(yàn)，我們的代碼應(yīng)該是這樣子的：
HTML代碼：
<body><div class="container">
<div class="header">頭部?jī)?nèi)容</div>
<div class="banner">幻燈片效果模塊</div>
<div class="content">正文內(nèi)容</div>
<div class="copyright">版權(quán)部分</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">頭部?jī)?nèi)容</div>
<div class="content">正文內(nèi)容</div>
<div class="copyright">版權(quán)部分</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;}
通過以上代碼的對(duì)比分析，其實(shí)我用的就是CSS里面的Position浮動(dòng)布局這個(gè)技巧，關(guān)于Position浮動(dòng)布局的知識(shí)，大家可以查找相關(guān)資料，務(wù)必要掌握好這個(gè)知識(shí)點(diǎn)，對(duì)SEO優(yōu)化很有用的。
二、巧用延時(shí)加載
HTML代碼：
<body><div class="container">
<div class="header">頭部?jī)?nèi)容</div>
<div class="content">正文內(nèi)容</div>
<div class="copyright">版權(quán)部分</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秒鐘，執(zhí)行AJAX請(qǐng)求，或者一些別的東西，去控制banner這個(gè)DIV里面的內(nèi)容。
上面兩個(gè)方案的代碼只是一些拋磚引玉的例子，您完全可以把它用他其他地方，把一些對(duì)SEO無(wú)關(guān)的內(nèi)容靠后加載，或者用JS延遲加載去顯示，這樣對(duì)搜索引擎來(lái)說(shuō)并無(wú)大礙，對(duì)普通用戶來(lái)說(shuō)也是一件很好的事情。本文由深圳網(wǎng)站建設(shè)旗風(fēng)網(wǎng)絡(luò) www.flagwind.com 原創(chuàng)，轉(zhuǎn)發(fā)的時(shí)候請(qǐng)不要?jiǎng)h除原作者版權(quán)信息，謝謝！
標(biāo)簽： SEO優(yōu)化 網(wǎng)站結(jié)構(gòu)優(yōu)化 網(wǎng)站標(biāo)簽優(yōu)化
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
