網(wǎng)站設計者都希望用戶(hù)在搜索引擎上檢索某一內容的相關(guān)網(wǎng)站時(shí)，自己的網(wǎng)站能夠出現在搜索引擎結果頁(yè)面比較靠前的位置。隨著(zhù)搜索引擎優(yōu)化技術(shù)的不斷發(fā)展，這種成本低而回報高的搜索引擎營(yíng)銷(xiāo)方式越來(lái)越受到網(wǎng)站設計者的喜愛(ài)和擁護。而DIV+CSS作為主流網(wǎng)頁(yè)布局方式，不僅要考慮網(wǎng)站的美觀(guān)性，還要考慮提高搜索引擎程序的爬行效率，使得搜索引擎能夠抓取大量的關(guān)鍵信息。因此高效合理的網(wǎng)頁(yè)布局在搜索引擎對網(wǎng)站評價(jià)排序時(shí)就顯得尤為重要。

1 SEO介紹

1.1 SEO及工作原理

SEO是Search Engine Optimization的縮寫(xiě)，中文為搜索引擎優(yōu)化。搜索引擎優(yōu)化的主要任務(wù)之一就是提高網(wǎng)站的搜索引擎友好性，其每個(gè)環(huán)節都會(huì )與搜索引擎的工作流程存在必然的聯(lián)系，研究SEO實(shí)際上就是對搜索引擎工作過(guò)程進(jìn)行逆向推理。

SEO的工作原理主要基于頁(yè)面收錄、頁(yè)面分析、頁(yè)面排序及關(guān)鍵字查詢(xún)四部分。搜索引擎首先通過(guò)Spider(蜘蛛程序)自動(dòng)訪(fǎng)問(wèn)互聯(lián)網(wǎng)，然后沿著(zhù)網(wǎng)頁(yè)中的超鏈接爬到其他網(wǎng)頁(yè)上，并把爬行中經(jīng)過(guò)的網(wǎng)頁(yè)信息收集起來(lái);其次通過(guò)對原始頁(yè)面的索引快速定位，提取頁(yè)面關(guān)鍵信息后切詞并建立關(guān)鍵字索引和反向索引列表;最后結合頁(yè)面內外部因素進(jìn)行評估排序。

用戶(hù)在搜索引擎中輸入查詢(xún)請求后，搜索引擎首先對查詢(xún)信息進(jìn)行切詞及匹配，再向用戶(hù)返回相應的頁(yè)面排序列表。

1.2 搜索引擎優(yōu)化目標

SEO對網(wǎng)站的處理主要是從根本上改善網(wǎng)站的結構和內容，擴充網(wǎng)站的數據流通。隨著(zhù)網(wǎng)站信息承載量的增加、內部結構的合理化完善化，可以將網(wǎng)站應該發(fā)揮的作用最大化。SEO的終極目標不是僅僅提高網(wǎng)站在搜索引擎中的排名，而是將網(wǎng)站收益和投資之比大幅提高。

2 DIV+CSS頁(yè)面布局技術(shù)

2.1 DIV+CSS技術(shù)

在網(wǎng)站設計制作過(guò)程中，定位布局是尤為重要的環(huán)節。與傳統的利用TABLE定位布局的方式不同，DIV+CSS布局技術(shù)可以實(shí)現頁(yè)面內容與表現的分離。其標準的稱(chēng)呼應該是“XHTML+CSS”，由于在使用XHTML對網(wǎng)站進(jìn)行標準化重構的時(shí)候，DIV作為使用頻率最高的元素，所以被習慣稱(chēng)為“DIV+CSS”。

“DIV+CSS”技術(shù)進(jìn)行網(wǎng)頁(yè)布局時(shí)，就是在HTML中存放正文信息，而將控制正文信息的CSS與網(wǎng)頁(yè)分離，這種內容和表現分離的形式是DIV+CSS布局區別于表格、框架、庫、模塊布局的最大優(yōu)勢。

2.2 DIV+CSS網(wǎng)頁(yè)布局特點(diǎn)

網(wǎng)頁(yè)代碼精簡(jiǎn)、結構清晰。這種正文和表現的分離形式，大大減少了網(wǎng)頁(yè)代碼的體積。這種布局是將網(wǎng)頁(yè)的修飾部分剝離到一個(gè)獨立的樣式文件中，置于網(wǎng)頁(yè)文件以外，再以外部鏈接的形式引入到頁(yè)面中，使得頁(yè)面結構清晰，網(wǎng)頁(yè)瀏覽速度提高。

易于維護且布局靈活。網(wǎng)站維護和更新階段需要對網(wǎng)頁(yè)的代碼進(jìn)行有針對性的修改，采用內容與形式分離的DIV+CSS技術(shù)，只需要修改CSS就能進(jìn)行網(wǎng)站的維護和更新，而不需要更改網(wǎng)頁(yè)的基本結構。

3 基于SEO的網(wǎng)頁(yè)布局優(yōu)化

3.1 利于Spider爬行的布局結構

搜索引擎優(yōu)化的主旨是使得Spider(爬行蜘蛛)能夠盡量多沿著(zhù)網(wǎng)絡(luò )上的鏈接從一個(gè)網(wǎng)頁(yè)爬行到另一個(gè)網(wǎng)頁(yè)，Spider爬行過(guò)程中會(huì )抓取所經(jīng)過(guò)網(wǎng)頁(yè)的內容。Spider爬行中不會(huì )抓取網(wǎng)頁(yè)的完整信息，而是會(huì )按照某種準則，抓取頁(yè)面最有價(jià)值的信息。如果希望Spider能夠帶走盡量多的網(wǎng)站信息，網(wǎng)頁(yè)布局就要盡量合理。

常見(jiàn)的網(wǎng)頁(yè)布局形式主要分為表格布局和DIV+CSS布局，而這兩種布局形式在SEO的角度下對于關(guān)鍵信息的抓取形式是不同的。

(1)采用表格布局的網(wǎng)頁(yè)

為了達到更好的網(wǎng)頁(yè)顯示效果，表格布局形式下一般采用多層表格嵌套來(lái)劃分網(wǎng)頁(yè)結構。但是Spider的爬行對多層嵌套的表格敏感性較差，會(huì )選擇跳過(guò)嵌套內容的方式進(jìn)行抓取，有時(shí)甚至會(huì )直接放棄整個(gè)頁(yè)面。那么位于嵌套表格的關(guān)鍵信息很容易被忽略，并且由于抓取不到有效信息，Spider會(huì )將整個(gè)頁(yè)面認作為相似頁(yè)面，直接影響到Spider對網(wǎng)站的評價(jià)排名。

(2)采用DIV+CSS布局的網(wǎng)頁(yè)

采用DIV+CSS布局的網(wǎng)頁(yè)，由于網(wǎng)頁(yè)代碼精簡(jiǎn)，Spider可以在最短時(shí)間內爬完頁(yè)面，爬行效率的提高，可以影響到網(wǎng)頁(yè)的收錄情況。向W3C標準靠攏的DIV+CSS技術(shù)，由于頁(yè)面標簽較少，網(wǎng)頁(yè)關(guān)鍵內容更直接的裸露在Spider面前，增大了關(guān)鍵信息的頁(yè)面的抓取比重，從而提高Spider對網(wǎng)站的評價(jià)排名。

由此可見(jiàn)，DIV+CSS布局形式在搜索引擎優(yōu)化的角度下效果更優(yōu)。

3.2 一行三欄式的優(yōu)化途徑

搜索引擎的訪(fǎng)問(wèn)信息的規則是從上到下、從左到右的原則。因此在搜索代碼的時(shí)候，關(guān)鍵內容在網(wǎng)頁(yè)中的位置顯得尤為重要。DIV+CSS在頁(yè)面布局中常用的一行三欄式結構中，如果左欄內容太多，頁(yè)面內容權值就會(huì )隨之下降。因此，可以將關(guān)鍵信息寫(xiě)在頁(yè)面前部如圖1所示。

為了完整的顯示預設效果，則通過(guò)CSS定位控制左欄和右欄的位置達到預設效果，代碼實(shí)現如下，這樣的布局形式可以既不影響網(wǎng)頁(yè)的顯示效果，又能夠利于Spider的信息抓取。

3.3 符合SEO規范的命名原則

在搜索引擎優(yōu)化中，代碼優(yōu)化極為重要。因此在進(jìn)行DIV+CSS布局時(shí)，容器的命名就顯得尤為重要，必須符合SEO的基本命名規則，才能利于Spider的爬行。實(shí)際設計實(shí)現過(guò)程中，建議遵循以下四大基本原則：

(1)以英文形式為優(yōu)，拼音次之。

(2)容器名推薦小寫(xiě)命名，并盡量不縮寫(xiě)。

(3)所有Alt標簽進(jìn)行優(yōu)化，并緊密聯(lián)系網(wǎng)頁(yè)關(guān)鍵詞信息。

(4)盡量符合技術(shù)員常用的命名約定如表1所示。

基于XTHML標準的DIV+CSS布局方式，由于結構簡(jiǎn)單且內容和形式分離，受到搜索引擎的喜愛(ài)。利用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局的同時(shí)，了解搜索引擎的基本運作原理，利用搜索引擎優(yōu)化技術(shù)合理布局設計網(wǎng)站，將有利于促進(jìn)網(wǎng)站長(cháng)期高效的發(fā)展。