網(wǎng)站優(yōu)化之HTML布局

 SEO是一門學(xué)問，涉及到的東西也很廣泛，很多朋友在做SEO的時(shí)候往往會關(guān)注一些外部的東西，比如外部鏈接，或者發(fā)廣告等等，而忽視了自己網(wǎng)站內(nèi)在的一些東西，今天我就和大家聊聊關(guān)于HTML布局中的一些東西，希望對大家有所幫助，也歡迎大家共同探討。

　　一、編寫良好的HTML結(jié)構(gòu)

　　一個(gè)良好的HTML文檔結(jié)構(gòu)無論是對搜索引擎，還是對代碼人員(切片人員或者程序員)都是有百利而無一害的。回想一下人們之所以拋棄TABLE(表格)布局，就是因?yàn)槭褂肨ABLE布局產(chǎn)生了大量的冗余代碼，而且為了到達(dá)一定的視覺效果，只能套用多個(gè)表格。所以如果您使用DIV+CSS布局，但是您的HTML文檔結(jié)嵌套過深或者冗余代碼過多，基本上和表格布局沒什么區(qū)別。這里我推薦一個(gè)國外牛人編寫的網(wǎng)站，大家可以參考一下他的文檔結(jié)構(gòu)Zengarden(蟬翼花園)百度一下就出來了。

　　二、巧用你的LOGO

　　很多朋友喜歡插入一個(gè)IMG標(biāo)簽作為網(wǎng)站的LOGO，個(gè)人覺得有點(diǎn)亂費(fèi)資源，為什么這么說呢? 因?yàn)楝F(xiàn)在搜索引擎對IMG標(biāo)簽的ALT屬性已經(jīng)幾乎無視了。還有就是搜索引擎對一個(gè)網(wǎng)站的HTML前一部分都是比較看重的，在這里我舉個(gè)例子來教您巧用您的LOGO，咱們打開電子商務(wù)江湖的網(wǎng)站查看他的源文件，發(fā)現(xiàn)它的LOGO不是用IMG標(biāo)簽插入的圖片，而是這樣定義的：

　　HTML部分

　　< h1 >< a href="http://www.eczn.com" title=" 電子商務(wù)江湖">< /a>< /h1 >

　　CSS部分

　　h1 {text-indent:-5000px;display:block;width:143px;height:67px;float:left;margin:0 auto;}

　　h1 a {width:143px;height:67px;float:left;background:url(../images/logo.gif) no-repeat;overflow:hidden;}

　　很多人也許會問怎么會是一個(gè)H1標(biāo)簽?zāi)?這樣算不算作弊? 這個(gè)的話搜索引擎官方也沒有明文規(guī)定算作弊，而且人家搜狐這么大個(gè)網(wǎng)站都這么干，咱們對著來就行了，而且本人多次使用到了此招，目前還沒有發(fā)現(xiàn)什么問題。

　　三、合理放置H標(biāo)簽

　　有過SEO經(jīng)驗(yàn)的朋友都知道。H1~H6標(biāo)簽有利于網(wǎng)站優(yōu)化，沒錯(cuò)，但是如果您的H標(biāo)簽濫用不僅對SEO沒有任何好處，反而會遭到降權(quán)甚至滅亡。還是舉例說明，就拿一篇新聞來說個(gè)人建議H1標(biāo)簽放置標(biāo)題，H2標(biāo)簽可以放一段50字左右的小描述，還有就是H2標(biāo)簽可以加一個(gè)和標(biāo)題相關(guān)的輔助關(guān)鍵字用以襯托，H3標(biāo)簽可以做新聞內(nèi)容里面的小標(biāo)題，同H2一樣也可以加一些關(guān)鍵字修飾不過要控制好比例哦。H4同H3一樣同時(shí)配合使用效果更好。

　　四、美觀與網(wǎng)站優(yōu)化相結(jié)合

　　目前在國內(nèi)做HTML布局，往往是美工或者切片人員最頭疼的事，因?yàn)閲鴥?nèi)的操作系統(tǒng)能在網(wǎng)頁上顯示的字體是少之又少，最常用的也就是宋體，但是很多設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)稿中會用到一些藝術(shù)字體，這是很正常的。但是悲催的國內(nèi)瀏覽器只支持宋體和一些很少用到的黑體和楷體，怎么辦呢?有切片經(jīng)驗(yàn)的朋友立馬就想到切圖，對，這是最常用的辦法，但假如這些用了藝術(shù)字體的東東對SEO很有用怎么辦?就拿筆者的網(wǎng)站來說 http://www.eczn.com 打開后大家會發(fā)覺，我的導(dǎo)航是用的微軟雅黑字體，很多朋友都知道。悲劇的XP默認(rèn)是不帶微軟雅黑的，但筆者用了一招很多朋友都沒留意過的招數(shù)，就是嵌入字體，還是老規(guī)矩直接上代碼：

　　CSS部分

　　@font-face {font-family:'flagwindRegular';src: url('/DBFNT0.eot');}

　　#navigation li{font:normal 15px '微軟雅黑','flagwindRegular';}

　　仔細(xì)觀察我的#navigation的字體定義，首先是微軟雅黑，然后后面那個(gè)單引號里面的內(nèi)容就是我上面自定義的字體名稱，關(guān)于自定義嵌入字體我就不在這里啰嗦了。大家可以上百度一下查找一下，很簡單的，分分鐘就學(xué)會了。

　　寫了這么多，本來文筆就爛，又是第一次投稿，能不能通過審核都是問題，但是我所說的內(nèi)容都是本人7年做網(wǎng)站總結(jié)出來的經(jīng)驗(yàn)，有什么不對的地方歡迎大家拍磚，如果通過審核了以后就盡量多寫一些實(shí)用的東西出來。