SEO視角下DIV+CSS網(wǎng)頁布局優(yōu)化研究

李斐

摘要：目前網(wǎng)頁布局主要采用DIV+CSS的方式。文章結(jié)合標(biāo)準(zhǔn)的搜索引擎優(yōu)化手段，從布局結(jié)構(gòu)、命名規(guī)范、一行三欄標(biāo)準(zhǔn)結(jié)構(gòu)三方面入手研討優(yōu)化網(wǎng)頁布局的方法，提高網(wǎng)站在搜索引擎自然搜索結(jié)果中的排名。

關(guān)鍵詞：DIV+CSS；網(wǎng)頁布局；SEO

0 引言

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

1 SEO介紹

1.1 SEO及工作原理

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

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

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

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

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

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

2.1 DIV+CSS技術(shù)

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

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

2.2 DIV+CSS網(wǎng)頁布局特點

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

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

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

3.1 利于Spider爬行的布局結(jié)構(gòu)

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

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

（1）采用表格布局的網(wǎng)頁

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

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

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

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

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

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

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

3.3 符合SEO規(guī)范的命名原則

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

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

（2）容器名推薦小寫命名，并盡量不縮寫。

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

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

4 結(jié)語

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