對(duì)搜索引擎友好的網(wǎng)頁設(shè)計(jì)制作

時(shí)間：2022-07-06 17:15:01 | 來源：建站知識(shí)

時(shí)間：2022-07-06 17:15:01 來源：建站知識(shí)

一般的網(wǎng)頁設(shè)計(jì)都由網(wǎng)頁設(shè)計(jì)師完成。設(shè)計(jì)師設(shè)計(jì)網(wǎng)站往往僅從美觀、創(chuàng)意和易用的角度考慮，這對(duì)于一個(gè)期望獲得搜索引擎排名優(yōu)秀的商業(yè)網(wǎng)站來說，已經(jīng)遠(yuǎn)遠(yuǎn)不夠了，網(wǎng)站策劃人員至少應(yīng)該為設(shè)計(jì)師遞交一份需求備忘錄，提醒在設(shè)計(jì)中需要配合和注意的環(huán)節(jié)。

目錄結(jié)構(gòu)和URL
URL是統(tǒng)一資源定位，即每個(gè)網(wǎng)頁的網(wǎng)址、路徑。網(wǎng)站文件的目錄結(jié)構(gòu)直接體現(xiàn)于URL。清晰簡(jiǎn)短的目錄結(jié)構(gòu)和規(guī)范的命名不僅有利于用戶體驗(yàn)和網(wǎng)址傳播，更是搜索引擎友好的體現(xiàn)。

目錄層次：
對(duì)于一個(gè)小型網(wǎng)站來說，一般只有一層子目錄，如下：
.happy175.com/home/page.htm

www.happy175.com是域名，home是一級(jí)目錄名，page是文件名。
對(duì)搜索引擎而言，這種單一的目錄結(jié)構(gòu)最為理想，即扁平結(jié)構(gòu)（Flat）。

而對(duì)規(guī)模大一些的網(wǎng)站，往往需要二到三層子目錄。象這樣：
.happy175.com/dir1/dir2/dir3/page.htm
搜索引擎還是會(huì)去抓取二到三層子目錄下的文件，但最好不要超過3層，如果超過4層，象以下這個(gè)頁面，搜索引擎就很難去搜索它了：.happy175.com/dir1/dir2/dir3/dir4/page.htm

當(dāng)然，以下情況下，即使深入第四層甚至更深層次的頁面，也同樣能被搜索到：

1、如果該頁提供了重要內(nèi)容，有大量來自其它網(wǎng)站的外部鏈接（Inbound Links）；
2、如果在首頁上增加一個(gè)該頁的鏈接，可以通過首頁直接到達(dá)，搜索Spider還是可以輕易地找到它；
3、如果有其它網(wǎng)站在頂級(jí)頁面上鏈接了該頁，其效果就好似你在自己的首頁上做了該鏈接。

此外，圖形、腳本、CGI-BIN和CSS樣式表則各自建立專門的目錄收入其中，一般不放在根目錄下。

目錄和文件命名：
根據(jù)關(guān)鍵字無所不在的原則,可以在目錄名稱和文件名稱中使用到關(guān)鍵詞。但如果是關(guān)鍵詞組,則需要用分隔符分開。我們常用連字符"-"和下劃線"_"進(jìn)行分隔，URL中還經(jīng)常出現(xiàn)空格碼"%20"。因此，如果以"中國制造"作文件名,就可能出現(xiàn)以下三種分隔形式：
made-in-china.htm
made_in_china.htm
made%20in%20china.htm

但事實(shí)上，至少在目前Google并不認(rèn)同"_"為分隔符。對(duì)Google來說， made-in-china和made%20in%20china都等于made in china，但made_in_china就被讀成了madeinchina，連在一起之后，關(guān)鍵詞就失去了意義。

因此，目錄和文件名稱如果有關(guān)鍵詞組，要用連字符"-"而不是下劃線"_"進(jìn)行分隔。

URL應(yīng)該越短越好。有人為了單純?cè)黾雨P(guān)鍵字而額外建多一個(gè)帶有關(guān)鍵字的子目錄，改變目錄結(jié)構(gòu)。由于URL中含有關(guān)鍵字本身對(duì)排名提高幫助并不大，因而這種做法多此一舉，也是搜索引擎反感的。

絕對(duì)URL和相對(duì)URL：

絕對(duì)URL：即網(wǎng)頁路徑使用包含頂級(jí)域名在內(nèi)的完整的URL。
如：www.happy175.com/page1/index.html是一個(gè)絕對(duì)路徑，其中/page1/index.html則為相對(duì)路徑，由瀏覽器自動(dòng)在該鏈接前加上www.happy175.com。
總體上，Google在排名時(shí)并不在意URL使用的是相對(duì)路徑還是絕對(duì)路徑。 動(dòng)態(tài)URL： 目前很多網(wǎng)站都有數(shù)據(jù)庫驅(qū)動(dòng)生成的URL，即動(dòng)態(tài)URL，往往表現(xiàn)為在URL中出現(xiàn)"?"、"="、"%"，以及"&"、"$"等字符。動(dòng)態(tài)URL極不利于搜索引擎抓取網(wǎng)頁，嚴(yán)重影響網(wǎng)站排名，通常是通過技術(shù)解決方案將動(dòng)態(tài)URL轉(zhuǎn)化成靜態(tài)的URL形式，如：
將.happy175.com/messages.php?id=2&type=5 轉(zhuǎn)化為.happy175.com/messages/2/5/ 下文將會(huì)專門提到動(dòng)態(tài)URL的解決方案。

導(dǎo)航結(jié)構(gòu)
網(wǎng)站導(dǎo)航是對(duì)引導(dǎo)用戶訪問網(wǎng)站的的欄目、菜單、在線幫助、布局結(jié)構(gòu)等形式的統(tǒng)稱。其主要功能在于引導(dǎo)用戶方便地訪問網(wǎng)站內(nèi)容，是評(píng)價(jià)網(wǎng)站專業(yè)度、可用度的重要指標(biāo)。同時(shí)對(duì)搜索引擎也產(chǎn)生諸多提示作用。概括地講，網(wǎng)站在導(dǎo)航方面應(yīng)注意以下幾點(diǎn)：

1、主導(dǎo)航醒目清晰
主導(dǎo)航一般體現(xiàn)為一級(jí)目錄，通過它們用戶和蜘蛛程序都可以層層深入訪問到網(wǎng)站所有重要內(nèi)容。因此主欄目必須在網(wǎng)站首頁第一屏的醒目位置體現(xiàn)，并最好采用文本鏈接而不是圖片。

2、"面包屑型(Breadcrumbs)"路徑
所謂"面包屑"是比喻用戶通過主導(dǎo)航到目標(biāo)網(wǎng)頁的訪問過程中的路徑提示，使用戶了解所處網(wǎng)站中的位置而不至于迷失"方向"，并方便回到上級(jí)頁面和起點(diǎn)。路徑中的每個(gè)欄目最好添加鏈接。
如下： 網(wǎng)信設(shè)計(jì)： 網(wǎng)信日志 > 技術(shù)資訊 > 網(wǎng)絡(luò)營銷
即使沒有詳細(xì)的路徑來源，也至少應(yīng)該在每個(gè)子頁面提示回首頁的鏈接，包括頁面的LOGO作鏈接。

3、首頁突出重要內(nèi)容
除了主欄目，還應(yīng)該將次級(jí)目錄中的重要內(nèi)容以鏈接的方式在首頁或其它子頁中多次呈現(xiàn)，以突出重點(diǎn)。搜索引擎會(huì)對(duì)這種一站內(nèi)多次出現(xiàn)的鏈接給予充分重視，對(duì)網(wǎng)頁級(jí)別（PageRank）提高有很大幫助，這也是每個(gè)網(wǎng)站首頁的網(wǎng)頁級(jí)別一般高于其它頁面級(jí)別的重要因素，因?yàn)槊總€(gè)子頁都對(duì)首頁進(jìn)行了鏈接。

4、使用網(wǎng)站地圖
網(wǎng)站地圖（Site Map）是輔助導(dǎo)航的手段，最初是為用戶設(shè)計(jì)，以方便用戶快捷到達(dá)目標(biāo)頁。良好的網(wǎng)站地圖設(shè)計(jì)常常以網(wǎng)站拓?fù)浣Y(jié)構(gòu)體現(xiàn)復(fù)雜的目錄關(guān)系，具有靜態(tài)、直觀、扁平、簡(jiǎn)單的特點(diǎn)。多采用文本鏈接，不用或少用修飾性圖片，以加快頁面加載速度。以上特點(diǎn)符合搜索引擎友好的要求，因此網(wǎng)站地圖在SEO中也有重要的意義。尤其對(duì)于那些采用圖片導(dǎo)航和動(dòng)態(tài)技術(shù)生成的網(wǎng)頁，通過在網(wǎng)站地圖中進(jìn)行文本鏈接，可在一定程度上彌補(bǔ)蜘蛛程序無法識(shí)別圖片和動(dòng)態(tài)網(wǎng)頁造成的頁面不可見的風(fēng)險(xiǎn)。

需要注意，網(wǎng)站地圖也要突出重點(diǎn)，盡量給出主干性內(nèi)容及鏈接，而不是所有細(xì)枝末節(jié)。一頁內(nèi)不適宜放太多鏈接。Google明確提出"如果網(wǎng)站地圖上的鏈接超過大約 100 個(gè)，則最好將網(wǎng)站地圖拆成多個(gè)網(wǎng)頁"。

框架結(jié)構(gòu)
框架結(jié)構(gòu)，即幀結(jié)構(gòu)（Frame）網(wǎng)頁表現(xiàn)為一個(gè)頁面內(nèi)的某一塊保持固定，其它部分信息可以通過滾動(dòng)條上下或左右移動(dòng)顯示，如左邊菜單固定，正文信息可移動(dòng)，或者頂部導(dǎo)航和LOGO部分保持固定，其它部分上下或左右移動(dòng)。我們的郵箱通常都采用框架建構(gòu)。框架型網(wǎng)頁的另一個(gè)表現(xiàn)是，深層頁面的域名通常不會(huì)在URL中體現(xiàn)出來，即使進(jìn)入深層子頁面，瀏覽器顯示出來的URL仍然是主頁的URL。

框架型網(wǎng)站的優(yōu)越性體現(xiàn)在頁面的整體一致性和更新方便上。尤其對(duì)于那些大型網(wǎng)站而言，框架結(jié)構(gòu)的使用可以使網(wǎng)站的維護(hù)變得相對(duì)容易。但框架對(duì)搜索引擎來說是一個(gè)很大的問題，這是由于大多數(shù)搜索引擎都無法識(shí)別框架，也沒有什么興趣去抓取框架中的內(nèi)容。此外，某些瀏覽器也不支持框架頁面。

如果網(wǎng)頁已經(jīng)使用了框架，或出于某種原因一定要使用框架結(jié)構(gòu)，則必須在代碼中使用"Noframes"標(biāo)簽進(jìn)行優(yōu)化，把Noframe標(biāo)簽看做是一個(gè)普通文本內(nèi)容的主頁。在區(qū)域中包含指向frame頁的鏈接以及帶有關(guān)鍵詞的描述文本，同時(shí)在框架以外的區(qū)域也出現(xiàn)關(guān)鍵詞文本。這樣，搜索引擎才能夠正確索引到框架內(nèi)的信息。

圖像優(yōu)化
一般而言，搜索引擎只識(shí)讀文本內(nèi)容，對(duì)圖像是不可見的。同時(shí)，圖像文件直接延緩頁面加載時(shí)間，如果超過20秒網(wǎng)站還不能加載，用戶和搜索引擎極有可能離開你的網(wǎng)站。因此，除非你的網(wǎng)站內(nèi)容是圖片為主，比如游戲站點(diǎn)或者圖片至關(guān)重要，否則盡量避免使用大圖片，更不要采用純圖像制作網(wǎng)頁(SPLASH PAGE)。
網(wǎng)站圖片優(yōu)化的核心有兩點(diǎn)：增加搜索引擎可見的文本描述，以及在保持圖像質(zhì)量的情況下盡量壓縮圖像的文件大小。
Alt屬性：
每個(gè)圖像<IMG>標(biāo)簽中都有ALT屬性，搜索引擎會(huì)讀取該屬性以了解圖像的信息。因此，最好在所有插圖的ALT屬性中都有文字描述，并帶上該頁關(guān)鍵字在其中。

Gif和JPGE圖像優(yōu)化：
Alt屬性和文本說明都只是對(duì)圖像之外的文本環(huán)境進(jìn)行優(yōu)化，下面簡(jiǎn)單談?wù)剬?duì)圖片本身的優(yōu)化處理。對(duì)圖片文件優(yōu)化的目的是在盡量不影響圖像畫面效果的情況下，將其文件大小降到最低，以加快頁面整體下載速度。

網(wǎng)頁圖片格式主要有GIF和JPGE兩種形式。一般來講，GIF適用于線圖和企業(yè)標(biāo)識(shí)；JPEG適宜照片元素的格式。主要通過減少GIF顏色數(shù)量、縮小圖片尺寸和降低分辯率來縮小文件，也可以采用層疊樣式表達(dá)到優(yōu)化的目的。PhotoShop的版本越高越適用于網(wǎng)絡(luò)圖形。此外，將大圖片切割成若干小圖片于不同的表格區(qū)間內(nèi)進(jìn)行拼接，也可以相對(duì)加快下載時(shí)間。

FLASH優(yōu)化：

由于FLASH優(yōu)美的視覺效果和廣闊的創(chuàng)意空間，F(xiàn)LASH技術(shù)在網(wǎng)頁設(shè)計(jì)和網(wǎng)絡(luò)廣告中的應(yīng)用非常廣泛，很多網(wǎng)站首頁甚至全部用FLASH設(shè)計(jì)。但FLASH網(wǎng)頁有一個(gè)非常致命的問題，即大部分搜索引擎無法識(shí)別FLASH中的信息。Google也只能檢索到部分Flash文件中的內(nèi)嵌鏈接。
FLASH優(yōu)化可以從以下三個(gè)方面來考慮：
1、做一個(gè)輔助HTML版本： 保留原有FLASH版本的同時(shí)，還可以設(shè)計(jì)一個(gè)HTML格式的版本，這樣既可以保持動(dòng)態(tài)美觀效果，也可以讓搜索引擎通過HTML版本的網(wǎng)頁來發(fā)現(xiàn)網(wǎng)站。
2、將Flash內(nèi)嵌HTML文件： 還可以通過改變網(wǎng)頁結(jié)構(gòu)進(jìn)行彌補(bǔ)，即不要將整個(gè)網(wǎng)頁都設(shè)計(jì)成Flash動(dòng)畫，而是將Flash內(nèi)容嵌入到HTML文件中，這樣對(duì)于用戶瀏覽并不會(huì)削弱視覺效果，搜索引擎也可以從HTML代碼中發(fā)現(xiàn)一些必要的信息，尤其是進(jìn)入內(nèi)容頁面的鏈接。 即使首頁全部動(dòng)用了FLASH，也應(yīng)該將進(jìn)入內(nèi)頁的關(guān)鍵性按鈕/鏈接置于FLASH文件之外，以獨(dú)立純文本鏈接的方式呈現(xiàn)。上文案例將"中文版"鏈接置于FLASH文件中，使得蜘蛛程序一無所獲，無法抓取到內(nèi)頁信息。
3、付費(fèi)登錄搜索引擎： 如果FLASH網(wǎng)站錯(cuò)過了被免費(fèi)的技術(shù)型搜索引擎自動(dòng)檢索的機(jī)會(huì)，或者搜索結(jié)果排名效果不太理想，可以通過付費(fèi)登錄或做搜索引擎關(guān)鍵詞廣告，同樣被用戶搜索到。