SEO視角下DIV+CSS網頁布局優化研究

李斐

摘要：目前網頁布局主要采用DIV+CSS的方式。文章結合標準的搜索引擎優化手段，從布局結構、命名規范、一行三欄標準結構三方面入手研討優化網頁布局的方法，提高網站在搜索引擎自然搜索結果中的排名。

關鍵詞：DIV+CSS；網頁布局；SEO

0 引言

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

1 SEO介紹

1.1 SEO及工作原理

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

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

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

1.2 搜索引擎優化目標

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

2 DIV+CSS頁面布局技術

2.1 DIV+CSS技術

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

“DIV+CSS”技術進行網頁布局時，就是在HTML中存放正文信息，而將控制正文信息的CSS與網頁分離，這種內容和表現分離的形式是DIV+CSS布局區別于表格、框架、庫、模塊布局的最大優勢。

2.2 DIV+CSS網頁布局特點

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

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

3 基于SEO的網頁布局優化

3.1 利于Spider爬行的布局結構

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

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

（1）采用表格布局的網頁

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

（2）采用DIV+CSS布局的網頁

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

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

3.2 一行三欄式的優化途徑

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

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

3.3 符合SEO規范的命名原則

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

（1）以英文形式為優，拼音次之。

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

（3）所有Alt標簽進行優化，并緊密聯系網頁關鍵詞信息。

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

4 結語

基于XTHML標準的DIV+CSS布局方式，由于結構簡單且內容和形式分離，受到搜索引擎的喜愛。利用DIV+CSS進行網頁布局的同時，了解搜索引擎的基本運作原理，利用搜索引擎優化技術合理布局設計網站，將有利于促進網站長期高效的發展。