中圖分類號：G71 文獻(xiàn)標(biāo)識碼：A 文章編號：1008-925X(2012)O7-0122-02

摘要：目前網(wǎng)頁布局多采用DIV+CSS方式，通過合理的網(wǎng)頁布局，符合標(biāo)準(zhǔn)的搜索引擎優(yōu)化手段，能使網(wǎng)站內(nèi)容在自然搜索結(jié)果中排在前列。本文討論了幾種DIV+CSS網(wǎng)頁布局中SEO優(yōu)化的技巧。

關(guān)鍵詞：DIV+CSS；SEO；技巧

一、 SEO簡介

搜索引擎優(yōu)化SEO（Search Engine Optimization），是指針對搜索引擎來優(yōu)化網(wǎng)站的內(nèi)容，對網(wǎng)站結(jié)構(gòu)、網(wǎng)頁文字、網(wǎng)頁標(biāo)簽、網(wǎng)站的鏈接等進(jìn)行合理規(guī)劃部署，使網(wǎng)站較容易被搜索引擎抓取并接受。搜索引擎在抓取該網(wǎng)站的資料后進(jìn)行比對及運算，之后將PR（Page Rank）值較高的網(wǎng)站放在其他用戶在搜索時優(yōu)先看到的位置，從而促使網(wǎng)站在搜索引擎中具有較強(qiáng)的自然排名競爭優(yōu)勢。

二、網(wǎng)頁布局

2.1 利用表格進(jìn)行網(wǎng)頁布局

采用表格進(jìn)行網(wǎng)頁布局是指根據(jù)頁面布局要求設(shè)計一個能滿足版式要求的表格結(jié)構(gòu)，表格的每個塊填充所需文字與圖片。使用透明背景圖片實現(xiàn)各個塊中內(nèi)容的間距及空格。當(dāng)某個塊中的內(nèi)容需要再劃分，可以通過嵌套表格來完成，最終的結(jié)構(gòu)可能是一個多次嵌套的復(fù)雜表格。這種布局方式除了具有維護(hù)困難的缺陷外，還會影響搜索引擎對這種布局網(wǎng)站的收錄。

2.2 利用DIV+CSS進(jìn)行網(wǎng)頁布局

目前DIV+CSS進(jìn)行網(wǎng)頁布局是網(wǎng)頁的主流布局方式。DIV是一個塊狀元素，相當(dāng)于一個容器。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成一個塊，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進(jìn)行控制。CSS是Cascading Style Sheets(層疊樣式表)的縮寫。它是定義HTML元素樣式的一種結(jié)構(gòu)化語言，它通過腳本程序調(diào)用和改變對象的屬性。簡單地說，DIV用于搭建網(wǎng)站結(jié)構(gòu)（框架）、CSS 用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化），實質(zhì)即使用XHTML對網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)，使用CSS將表現(xiàn)與內(nèi)容分離，便于網(wǎng)站維護(hù)，簡化HTML頁面代碼，可以獲得一個較優(yōu)秀的網(wǎng)站結(jié)構(gòu)便于日后維護(hù)、協(xié)同工作和搜索引擎蜘蛛抓取。

三、DIV+CSS網(wǎng)頁布局中的SEO優(yōu)化技巧

用DIV+CSS布局的網(wǎng)頁，頁面代碼精簡，容易向W3C標(biāo)準(zhǔn)靠攏，便于搜索引擎的蜘蛛抓取內(nèi)容，是目前最適合搜索引擎的頁面結(jié)構(gòu)。下文討論幾種DIV+CSS網(wǎng)頁布局中的SEO優(yōu)化技巧。

3.1 頁面代碼中關(guān)鍵內(nèi)容優(yōu)先

搜索引擎蜘蛛抓取站點頁面內(nèi)容是按照從上而下，從左至右的順序進(jìn)行的。大多數(shù)網(wǎng)站采用左中右三欄式，而頁面的主要內(nèi)容一般處于中間欄，如果按順序?qū)戫撁娲a，按照搜索引擎蜘蛛抓取站點內(nèi)容的規(guī)則，如果左欄內(nèi)容較多，會影響中間欄內(nèi)容的權(quán)值。因此采用DIV+CSS布局可以將中間欄的DIV塊寫在前面，再分別寫其他欄的DIV塊，然后通過CSS進(jìn)行定位，就可完成網(wǎng)頁布局，而且可將主要內(nèi)容寫在前面。

3.2 LOGO圖片的處理技巧

代表網(wǎng)站名稱的通常是LOGO圖片，而文字性的網(wǎng)站名字才是SEO的首選。為了解決這個問題，通常將網(wǎng)站名字放在H1標(biāo)簽中，再通過CSS的設(shè)置來實現(xiàn)顯示LOGO圖片并隱藏網(wǎng)站名字。在CSS的屬性設(shè)置中，首先將背景圖片設(shè)置為相應(yīng)的LOGO圖片，為了使網(wǎng)站名字的文字信息隱藏起來，再將 text-indent設(shè)置一個很大的負(fù)值，不讓其在顯示器的正常范圍出現(xiàn)，同時為了使LOGO圖片實現(xiàn)鏈接的效果，將A標(biāo)簽設(shè)置為塊級元素，并設(shè)置和圖片一樣大小的相應(yīng)寬高。具體參考例子代碼如下：

Html代碼片段：

網(wǎng)站名稱

CSS代碼片段:

#test-logo h1 a{}{

text-indent:-9999px;

background: url(../images/logo_test.png) no-repeat;

width: 120px;

height: 30px;

font-size:0;

display:block;

}

3.3網(wǎng)頁上較長標(biāo)題的處理技巧

當(dāng)網(wǎng)頁布局遇到較長的標(biāo)題的時候，會顯示標(biāo)題的一部分，其余部分用省略號表示。這樣可能會出現(xiàn)標(biāo)題中關(guān)鍵內(nèi)容不能完整表示而使搜索引擎蜘蛛忽略的情況。此時，可以在Html代碼中完整表示標(biāo)題信息，再使用CSS來控制顯示效果，從而實現(xiàn)瀏覽器中顯示的是省略了的標(biāo)題，但實際頁面代碼有完整的標(biāo)題信息的目的。具體參考代碼如下：

Html代碼片段：

• 某個比較長的標(biāo)題比較長的標(biāo)題

CSS代碼片段：

li{

width:20px;

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

}

四、總結(jié)

DIV+CSS 布局方式，使網(wǎng)頁樣式與內(nèi)容分離，結(jié)構(gòu)簡單，較表格布局減少了頁面代碼，提高了頁面加載速度，便于網(wǎng)站維護(hù)和更新。這些有利于搜索引擎的抓取和接收，有利于SEO優(yōu)化。

本文討論了DIV+CSS布局中進(jìn)行SEO優(yōu)化的一些技巧，在進(jìn)行網(wǎng)頁設(shè)計的過程中，合理有效地運用WEB設(shè)計標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁布局，需要通過不斷地實踐和體驗，本文提到的技巧希望起到拋磚引玉的作用。

參考文獻(xiàn):

[1][美]Michael Bowers. 精通CSS 與HTML 設(shè)計模式[M].北京：人民郵電出版社，2008.

[2]何麗.精通DIV+CSS 網(wǎng)頁樣式布局[M].北京：清華大學(xué)出版社，2011.

[3]溫謙.CSS設(shè)計徹底研究[M].北京：人民郵電出版社，2009