面向SEO的網(wǎng)站設(shè)計

zhsunsea 2007-08-15

展開全文

面向SEO的網(wǎng)站設(shè)計

[日期：2007-07-13]

來源：作者：

[字體：大中小]

面向SEO的網(wǎng)頁設(shè)計，并不是要通過改變網(wǎng)頁設(shè)計去主動迎合搜索引擎，而是通過堅持使用Web標(biāo)準(zhǔn)、保證網(wǎng)頁質(zhì)量來得到搜索引擎的認(rèn)可。

每個搜索引擎的排名算法各不相同，但可以肯定的是任何一種排名算法的目的都是讓具有高質(zhì)量、結(jié)構(gòu)清晰、知名度高的網(wǎng)站排名靠前。所以，堅持Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計是SEO的基礎(chǔ)。

　導(dǎo)航設(shè)計

網(wǎng)站的導(dǎo)航是網(wǎng)站功能的最直觀展示，因此在整個網(wǎng)頁的設(shè)計中占有重要地位。同時，導(dǎo)航的樣式設(shè)計，也為整個網(wǎng)站的樣式設(shè)計確定了基調(diào)。

導(dǎo)航樣式是多種多樣的，從表現(xiàn)形式看主要有：文字導(dǎo)航、圖片或flash導(dǎo)航以及帶有圖片背景的文字導(dǎo)航3類樣式。

1．文字導(dǎo)航

文字導(dǎo)航是SEO推薦的導(dǎo)航方式，通過DIV+CSS可以方便地制作文字導(dǎo)航，如圖20.7所示。

圖20.7 文字導(dǎo)航效果

文字導(dǎo)航可以很容易被網(wǎng)絡(luò)蜘蛛識別。網(wǎng)絡(luò)蜘蛛按導(dǎo)航鏈接逐層深入，抓取下級網(wǎng)頁。另外，采用文字導(dǎo)航會降低網(wǎng)頁文件大小，加快網(wǎng)頁打開速度，避免因文件過大而導(dǎo)致網(wǎng)站被網(wǎng)絡(luò)蜘蛛錯過。

2．圖片或Flash導(dǎo)航

很多企業(yè)網(wǎng)站、設(shè)計網(wǎng)站都采用了Flash或圖片導(dǎo)航（如圖20.8所示），這類導(dǎo)航都具有很強(qiáng)的視覺沖擊力，但并不是SEO推薦的導(dǎo)航方式，因為網(wǎng)絡(luò)蜘蛛不能識別圖片和Flash中的文字，而且也無法識別flash導(dǎo)航中的鏈接。因此，如果使用此類導(dǎo)航，還應(yīng)在頁面中配合文字導(dǎo)航使用。

圖20.8 Flash導(dǎo)航效果

3．圖片背景文字導(dǎo)航

在兼顧實用和形式的情況下，帶有圖片背景的文字導(dǎo)航是一個不錯的選擇（如圖20.9所示），即較好地滿足了視覺又采用了文字鏈接。

圖20.9 圖片背景文字導(dǎo)航示例

綜合評價以上3類導(dǎo)航樣式，建議用戶采用文字導(dǎo)航或圖片背景的文字導(dǎo)航，這將有助于改善網(wǎng)站性能和SEO。

　幀結(jié)構(gòu)

幀結(jié)構(gòu)多應(yīng)用于論壇、郵件等網(wǎng)站內(nèi)部頁面結(jié)構(gòu)，幀結(jié)構(gòu)的示例代碼如下：

</frameset>

</body>

</noframes>

幀結(jié)構(gòu)可實現(xiàn)在同一瀏覽器框架內(nèi)不同幀結(jié)構(gòu)內(nèi)的頁面調(diào)用，給網(wǎng)站開發(fā)者和用戶帶來便利，但是，某些瀏覽器不支持幀結(jié)構(gòu)，而且大部分的搜索引擎也無法識別幀結(jié)構(gòu)內(nèi)的內(nèi)容。因此，對于那些樂于被搜索引擎抓取的網(wǎng)頁，最好不要使用幀結(jié)構(gòu)。

　圖片優(yōu)化

圖片優(yōu)化主要有兩個方面：一是選擇適合Web頁面的圖片格式，同時壓縮圖片大小；二是對需要表達(dá)含義的圖片設(shè)置文字說明。

1．WEB圖片格式

GIF和JPEG是適合在Web頁面設(shè)計中使用的頁面。GIF只限于256種顏色，適合對圖片顯示質(zhì)量要求不高或單一色塊圖片，JPEG圖片適合顯示照片。

從SEO和用戶體驗角度來說，適合對圖片按鈕或網(wǎng)頁結(jié)構(gòu)上的圖片使用GIF格式，因為JPEG圖片加載時是逐行顯示，而GIF是先顯示圖片輪廓在逐漸清晰內(nèi)容。

2．a(chǎn)lt和title屬性

alt屬性用于指定圖片的替換文字，title屬性用于設(shè)置當(dāng)前對象的說明信息。

現(xiàn)在，用戶使用搜索引擎已經(jīng)不局限在文字搜索的范圍，圖片搜索逐漸被重視。搜索引擎是無法解析圖片內(nèi)容的，而帶有alt和title屬性是圖片搜索引擎識別圖片的主要依據(jù)，所以必須設(shè)置圖片的alt屬性和title屬性。

在進(jìn)行SEO優(yōu)化時，適合將alt屬性設(shè)置為圖片本來的含義，而將title設(shè)置成指示性信息，示例如下：

在本例中圖片的alt屬性設(shè)置為“主頁”，作用是當(dāng)圖片不可顯示時用戶可以看到圖片應(yīng)該表達(dá)的含義。將title屬性設(shè)置為“返回網(wǎng)站主頁”，作用是當(dāng)用戶將鼠標(biāo)指向圖片時，提示給用戶的信息。效果如圖20.10所示。

圖20.10 alt與title屬性示例

　CSS優(yōu)化

CSS樣式表控制著整個網(wǎng)頁的樣式。隨著頁面布局的復(fù)雜以及表現(xiàn)形式的豐富，CSS樣式代碼也急劇膨脹，導(dǎo)致網(wǎng)頁文件變大。因此，需要對CSS文件進(jìn)行優(yōu)化。

對CSS的優(yōu)化主要有以下幾個方面：

1．屬性設(shè)置

例如對margin、padding屬性設(shè)置時，原代碼如下：

margin:0px 0px 0px 0px；

優(yōu)化后的代碼如下：

margin: 0px;

本例中要實現(xiàn)的效果是將對象的外邊界設(shè)置為0px，兩個代碼實現(xiàn)效果是一樣的，顯然后面的寫法更簡潔。

2．使用分組選擇器

定義選擇器樣式時，經(jīng)常會遇到不同選擇器內(nèi)容相同或類似的情況，代碼如下：

h1 {

font-size: 18px;

color: #0000FF;

text-align: left;

}

h2 {

font-size: 18px;

color: #0000FF;

text-align: left;

}

可以使用分組選擇器的方式，將樣式相同的選擇器放置在一個分組中定義，代碼如下：

h1,h2 {

font-size: 18px;

color: #0000FF;

text-align: left;

}

3．使用類選擇器

類選擇器的好處是在樣式中定義一次后，在HTML代碼中，定義可重復(fù)應(yīng)用。所以，在應(yīng)用CSS進(jìn)行網(wǎng)頁布局時，除了基本的布局必須用id選擇器定義外，其他部分的樣式定義盡量使用類選擇器定義，這也是優(yōu)化CSS的一種方法。

主機(jī)優(yōu)化

托管網(wǎng)頁的主機(jī)性能對SEO也存在影響，要選擇性能穩(wěn)定的網(wǎng)頁托管主機(jī)。

使用穩(wěn)定的主機(jī)

網(wǎng)站的訪問者希望被訪問的目標(biāo)網(wǎng)站能夠被快速地打開。同樣，當(dāng)網(wǎng)絡(luò)機(jī)器人或網(wǎng)絡(luò)蜘蛛正要光顧一個目標(biāo)網(wǎng)站時，如果目標(biāo)網(wǎng)站主機(jī)正處于癱瘓狀態(tài)，那么對于網(wǎng)站來說可能會有兩種后果：一是失去被網(wǎng)絡(luò)蜘蛛獲取的機(jī)會，二是網(wǎng)絡(luò)蜘蛛判斷此網(wǎng)站不存在，將從搜索引擎的索引數(shù)據(jù)庫中將網(wǎng)站的信息刪除，所以一定要使用穩(wěn)定的網(wǎng)頁托管主機(jī)。

網(wǎng)站轉(zhuǎn)移注意事項

更換網(wǎng)頁服務(wù)器前，要確保目標(biāo)主機(jī)上的網(wǎng)頁目錄和文件和更換前的主機(jī)保持一致。在測試通過后，再進(jìn)入域名管理系統(tǒng)，修改DNS，指向新主機(jī)的IP地址。

域名解析一般需要幾小時甚至更長時間，在此期間用戶可以正常訪問網(wǎng)站的網(wǎng)頁內(nèi)容，即使網(wǎng)絡(luò)蜘蛛此時訪問，也會抓取更新的網(wǎng)頁內(nèi)容。