使用DIV+CSS標準重構網站對SEO更具優(yōu)勢

【摘 要】現(xiàn)在DIV+CSS已經很風靡了，各大網站紛紛采用DIV+CSS標準重構自己的網站。采用DIV+CSS模式后，給用戶最直觀的體驗就是網頁打開速度快了。DIV+CSS所以成為目前網頁布局主流，主要核心原因，其實不僅僅是其符合W3C標準，而是通過采用DIV+CSS，網頁表現(xiàn)與內容分離。本文章將從幾個方面論述DIV+CSS相對于Table模式對SEO具有的優(yōu)勢。

【關鍵詞】DIV；CSS；TABLE；SEO；搜索引擎

一、什么是DIV+CSS

DIV元素是用來為HTML文檔內大塊（Block-Level）的內容提供結構和背景的元素。

DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，用于定義HTML元素的顯示形式，是W3C（萬維網聯(lián)盟，World Wide Web Consortium）推出的格式化網頁內容的標準技術。網頁設計者必須掌握的技術之一。

DIV+CSS是網站標準（或稱“WEB標準”）中常用的術語之一，是一種網頁的布局方法，這種網頁布局方法有別于傳統(tǒng)的HTML網頁設計語言中的表格（TABLE）定位方式，可實現(xiàn)網頁頁面內容與表現(xiàn)相分離。在XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現(xiàn)各種定位。

XHTML是The Extensible HyperText Markup Language（可擴展超文本標識語言）的縮寫。XHTML基于可擴展標記語言（XML），是一種在HTML基礎上優(yōu)化和改進的的新語言，目的是基于XML應用與強大的數(shù)據(jù)轉換能力，適應未來網絡應用更多的需求。

二、DIV+CSS布局網站的好處

相對于傳統(tǒng)的TABLE定位方式，DIV+CSS這種布局方式具有以下4個顯著優(yōu)勢：

1.表現(xiàn)和內容相分離

采用DIV+CSS布局模式的網頁有獨立的樣式文件，能夠將網頁的設計部分剝離出來，HTML文件中只存放頁面代碼和文本信息，大大縮減頁面代碼。

2.提高搜索引擎對網頁的索引效率

由于采用DIV+CSS布局方式的網頁中只包含結構化內容的HTML標簽，沒有頁面表現(xiàn)的樣式代碼。經過標準化重構后的頁面文件大小能夠從50KB“瘦身”至9.8KB。因而，搜索引擎將更快捷有效地搜索到你的網頁內容，并給予一個較高的評價

3.提高頁面瀏覽速度

對于同一個頁面視覺效果，采用DIV+CSS重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。

4.易于維護和改版

采用TABLE布局最大的壞處就是不利于結構和表現(xiàn)分離，后期維護比較麻煩。而使用DIV+CSS能很好的解決這個問題。只要簡單的修改幾個CSS文件中的屬性，整個網站就能從顏色、布局等方面發(fā)生很大的改變，從而改變整個網站的設計風格?？梢?，DIV+CSS布局對網站的維護和更新更加便利、高效。

三、DIV+CSS布局模式對搜索引擎優(yōu)化（SEO①）的優(yōu)勢

DIV+CSS對搜索引擎優(yōu)化（SEO）的優(yōu)勢有哪些？

1.代碼精簡讓spider②爬行更順暢

使用DIV+CSS布局，頁面代碼精簡，代碼精簡所帶來的直接好處有兩點：

一是提高spider爬行效率。spider能在最短的時間內爬完整個頁面，這樣對收錄質量有好處。

二是由于能高效的爬行，網站就會受到spider喜歡，這樣對收錄數(shù)量有一定好處。

2.解決表格嵌套讓spider爬行至每一個角落

很多關于網站如何推廣的文章中稱，搜索引擎一般不抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎官方的證實。

通常情況下，使用Table布局時，為了達到一定的視覺效果，必須使用多個表格層層嵌套。根據(jù)一些實驗結果的情況來看，spider爬行在遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。如果嵌套的表格中是核心內容，spider爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。而DIV+CSS布局基本上不會存在這樣的問題，從技術角度來說，XHTML在控制樣式時也不需要過多的嵌套。

雖然這一結論沒有得到官方證實，但還是建議設計頁面的時候盡量不要使用多層表格嵌套。很多的SEOer們也已經認識到了這一點，相信他們不是沒有依據(jù)的。

3.提高加載速度讓spider坐上時光機

DIV+CSS布局較Table布局減少了頁面代碼量，頁面加載速度得到很大的提高，這在spider爬行時是非常有利的。過多的頁面代碼可能造成爬行超時，spider就會認為這個頁面無法訪問，影響收錄及權重。另一方面，真正的SEO網站優(yōu)化不只是為了追求收錄、排名，快速的響應速度是提高用戶體驗度的基礎，這對整個搜索引擎優(yōu)化及營銷都是非常有利的。

4.對搜索引擎排名的影響

基于XHTML標準的DIV+CSS布局，一般在設計完成后會盡可能的完善到能通過W3C驗證。事實證明，使用XHTML架構的網站排名狀況一般都不錯，造成此種情況的最大可能是spider爬行網站時，因以上差異導致收錄質量的不同。畢竟現(xiàn)在競爭激烈，各個網站紛紛使出看家本領，提高網站的商業(yè)價值。因此，建議設計者還是按照DIV+CSS標準布局為好。

四、影響SEO搜索引擎優(yōu)化的網頁制作細節(jié)

網頁主要由三部分組成：結構（Struc-ture）、表現(xiàn)（Presentation）和行為（Beha-vior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現(xiàn)標準語言主要包括CSS，行為標準主要包括對象模型、ECMAScript等。

1.將頁面的表現(xiàn)（css）與行為（Javas-cript）全部分離到外部文件中去，讓頁面代碼只用來顯示實際內容。

例如：

2.拋棄傳統(tǒng)Table布局模式，采用XHtml代碼編寫頁面。去掉頁面中的例如font/bgcolor等格式化控制標簽。用符合WEB標準的代碼來制作頁面。這樣能夠讓XHtml代碼結構化、語義化。提高頁面代碼的可讀性。

3.通過采用上述方法，你會發(fā)現(xiàn)你的html文件會變得非常小，如果可以，盡量讓代碼量越少越好。太大的頁面會影響搜索引擎的處理速度。一般通過XHtml+Css設計的網頁，html代碼應該可以控制在50K以內。

4.用好圖片的alt標簽合理的使用頁面關鍵字去描述圖片，增加頁面的關鍵字密度。

5.盡量不使用javascript來做與內容相關的事情。例如用document.write去顯示正文，會影響搜索引擎對頁面內容的搜索。

6.不要使用javascript實現(xiàn)網站的導航，因為會讓搜索引擎迷失方向。

7.每個頁面的關鍵字盡可能出現(xiàn)在頁面的標題，也就是頭部的Title標簽中。當然，要合理應用，太要太長。不要使用與頁面內容無關的網絡熱門關鍵字。

8.盡量在每個頁面代碼中合理使用標簽，并讓關鍵字出現(xiàn)在標簽中，讓頁面的文檔結構更清楚。

注釋：

①SEO（Search Engine Optimization），漢譯為搜索引擎優(yōu)化。seo是指在了解搜索引擎自然排名機制的基礎上，對網站進行內部及外部的調整優(yōu)化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多流量，從而達到網站銷售及品牌建設的目標。

②Spider，漢譯為蜘蛛。Search Engine Spider，即搜索引擎蜘蛛。把互聯(lián)網比喻成一張蜘蛛網，Spider就是在網上爬來爬去的蜘蛛。搜索引擎蜘蛛是通過網頁的鏈接地址來尋找網頁，從網站某一個頁面（通常是首頁）開始，讀取網頁的內容，找到在網頁中的其它鏈接地址，然后通過這些鏈接地址尋找下一個網頁，這樣一直循環(huán)下去，直到把整個網站的頁面都抓取完為止。