對搜尋引擎友好的網頁設計製作

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

一般的網頁設計都由網頁設計師完成。 設計師設計網站往往僅從美觀、創意和易用的角度考慮，這對於一個期望獲得搜尋引擎排名優秀的商業網站來說，已經遠遠不夠了，網站策劃人員至少應該為設計師遞交一份需求備忘錄，提醒在設計中需要配合和注意的環節。





目錄結構和URL


URL是統一資源定位，即每個網頁的網址、路徑。 網站檔的目錄結構直接體現于URL。 清晰簡短的目錄結構和規範的命名不僅有利於使用者體驗和網址傳播，更是搜尋引擎友好的體現。





目錄層次：


對於一個小型網站來說，一般只有一層子目錄，如下：


HTTP://www.happy175.com/home/page.htm





www.happy175.com是功能變數名稱，home是一級目錄名，page是檔案名。


對搜尋引擎而言，這種單一的目錄結構最為理想，即扁平結構（Flat）。





而對規模大一些的網站，往往需要二到三層子目錄。 象這樣：


HTTP://www.happy175.com/dir1/dir2/dir3/page.htm


搜尋引擎還是會去抓取二到三層子目錄下的檔，但最好不要超過3層，如果超過4層，象以下這個頁面，搜尋引擎就很難去搜索它了：HTTP://www.happy175.com/dir1/dir2/dir3/dir4/page.htm





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





1、如果該頁提供了重要內容，有大量來自其它網站的外部連結（Inbound Links）；


2、如果在首頁上增加一個該頁的連結，可以通過首頁直接到達，搜索Spider還是可以輕易地找到它；


3、如果有其它網站在頂級頁面上連結了該頁，其效果就好似你在自己的首頁上做了該連結。





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





目錄和檔命名：


根據關鍵字無所不在的原則,可以在目錄名稱和檔案名稱中使用到關鍵字。 但如果是關鍵字組,則需要用分隔符號分開。 我們常用連字號"-"和底線"_"進行分隔，URL中還經常出現空格碼"%20"。 因此，如果以"中國製造"作檔案名,就可能出現以下三種分隔形式：


made-in-china.htm


made_in_china.htm


made%20in%20china.htm





但事實上，至少在目前Google並不認同"_"為分隔符號。 對Google來說， made-in-china和made%20in%20china都等於made in china，但made_in_china就被讀成了madeinchina，連在一起之後，關鍵字就失去了意義。





因此，目錄和檔案名稱如果有關鍵片語，要用連字號"-"而不是底線"_"進行分隔。





URL應該越短越好。 有人為了單純增加關鍵字而額外建多一個帶有關鍵字的子目錄，改變目錄結構。 由於URL中含有關鍵字本身對排名提高説明並不大，因而這種做法多此一舉，也是搜尋引擎反感的。





絕對URL和相對URL：





絕對URL：即網頁路徑使用包含頂層網域名在內的完整的URL。


如：www.happy175.com/page1/index.html是一個絕對路徑，其中/page1/index.html則為相對路徑，由瀏覽器自動在該連結前加上www.happy175.com。


總體上，Google在排名時並不在意URL使用的是相對路徑還是絕對路徑。 動態URL： 目前很多網站都有資料庫驅動生成的URL，即動態URL，往往表現為在URL中出現"?"、"="、"%"，以及"&"、"$"等字元。 動態URL極不利於搜尋引擎抓取網頁，嚴重影響網站排名，通常是通過技術解決方案將動態URL轉化成靜態的URL形式，如：


將HTTP://www.happy175.com/messages.php?id=2&type=5 轉化為HTTP://www.happy175.com/messages/2/5/ 下文將會專門提到動態URL的解決方案。





導航結構


網站導航是對引導使用者訪問網站的的欄目、功能表、線上說明、佈局結構等形式的統稱。 其主要功能在於引導使用者方便地訪問網站內容，是評價網站專業度、可用度的重要指標。 同時對搜尋引擎也產生諸多提示作用。 概括地講，網站在導航方面應注意以下幾點：





1、主導航醒目清晰


主導航一般體現為一級目錄，通過它們使用者和編目程式都可以層層深入訪問到網站所有重要內容。 因此主欄目必須在網站首頁第一屏的醒目位置體現，並最好採用文本連結而不是圖片。





2、"麵包屑型(Breadcrumbs)"路徑


所謂"麵包屑"是比喻使用者通過主導航到目標網頁的訪問過程中的路徑提示，使使用者瞭解所處網站中的位置而不至於迷失"方向"，並方便回到上級頁面和起點。 路徑中的每個欄目最好添加連結。


如下： 網信設計： 網信日誌 > 技術資訊 > 網路行銷


即使沒有詳細的路徑來源，也至少應該在每個子頁面提示回首頁的連結，包括頁面的LOGO作連結。





3、首頁突出重要內容


除了主欄目，還應該將次級目錄中的重要內容以連結的方式在首頁或其它子頁中多次呈現，以突出重點。 搜尋引擎會對這種一站內多次出現的連結給予充分重視，對網頁級別（PageRank）提高有很大説明，這也是每個網站首頁的網頁級別一般高於其它頁面級別的重要因素，因為每個子頁都對首頁進行了連結。





4、使用網站地圖


網站地圖（Site Map）是輔助導航的手段，最初是為使用者設計，以方便使用者快捷到達目標頁。 良好的網站地圖設計常常以網站拓撲結構體現複雜的目錄關係，具有靜態、直觀、扁平、簡單的特點。 多採用文本連結，不用或少用修飾性圖片，以加快頁面載入速度。 以上特點符合搜尋引擎友好的要求，因此網站地圖在SEO中也有重要的意義。 尤其對於那些採用圖片導航和動態技術生成的網頁，通過在網站地圖中進行文本連結，可在一定程度上彌補編目程式無法識別圖片和動態網頁造成的頁面不可見的風險。





需要注意，網站地圖也要突出重點，儘量給出主幹性內容及連結，而不是所有細枝末節。 一頁內不適宜放太多連結。 Google明確提出"如果網站地圖上的連結超過大約 100 個，則最好將網站地圖拆成多個網頁"。

框架結構
框架結構，即幀結構（Frame）網頁表現為一個頁面內的某一塊保持固定，其它部分資訊可以通過捲軸上下或左右移動顯示，如左邊功能表固定，正文資訊可移動，或者頂部導航和LOGO部分保持固定， 其它部分上下或左右移動。 我們的郵箱通常都採用框架建構。 框架型網頁的另一個表現是，深層頁面的功能變數名稱通常不會在URL中體現出來，即使進入深層子頁面，瀏覽器顯示出來的URL仍然是主頁的URL。

框架型網站的優越性體現在頁面的整體一致性和更新方便上。 尤其對於那些大型網站而言，框架結構的使用可以使網站的維護變得相對容易。 但框架對搜尋引擎來說是一個很大的問題，這是由於大多數搜尋引擎都無法識別框架，也沒有什麼興趣去抓取框架中的內容。 此外，某些瀏覽器也不支援框架頁面。

如果網頁已經使用了框架，或出於某種原因一定要使用框架結構，則必須在代碼中使用"Noframes"標籤進行優化，把Noframe標籤看做是一個普通文本內容的主頁。 在區域中包含指向frame頁的連結以及帶有關鍵詞的描述文本，同時在框架以外的區域也出現關鍵字文本。 這樣，搜尋引擎才能夠正確索引到框架內的資訊。

圖像優化
一般而言，搜尋引擎只識讀文本內容，對圖像是不可見的。 同時，影像檔直接延緩頁面載入時間，如果超過20秒網站還不能載入，使用者和搜尋引擎極有可能離開你的網站。 因此，除非你的網站內容是圖片為主，比如遊戲網站或者圖片至關重要，否則儘量避免使用大圖片，更不要採用純圖像製作網頁(SPLASH PAGE)。
網站圖片優化的核心有兩點：增加搜尋引擎可見的文本描述，以及在保持圖像品質的情況下儘量壓縮圖像的檔案大小。
Alt屬性：
每個圖像<IMG>標籤中都有ALT屬性，搜尋引擎會讀取該屬性以瞭解圖像的資訊。 因此，最好在所有插圖的ALT屬性中都有文字描述，並帶上該頁關鍵字在其中。

Gif和JPGE圖像優化：
Alt屬性和文本說明都只是對圖像之外的文本環境進行優化，下面簡單談談對圖片本身的優化處理。 對圖片檔優化的目的是在儘量不影響圖像畫面效果的情況下，將其檔案大小降到最低，以加快頁面整體下載速度。

網頁圖片格式主要有GIF和JPGE兩種形式。 一般來講，GIF適用于線圖和企業標識；JPEG適宜照片元素的格式。 主要通過減少GIF顏色數量、縮小圖片尺寸和降低分辯率來縮小檔，也可以採用層疊樣式表達到優化的目的。 PhotoShop的版本越高越適用于網狀圖形。 此外，將大圖片切割成若干小圖片于不同的表格區間內進行拼接，也可以相對加快下載時間。

FLASH優化：

由於FLASH優美的視覺效果和廣闊的創意空間，FLASH技術在網頁設計和網路廣告中的應用非常廣泛，很多網站首頁甚至全部用FLASH設計。 但FLASH網頁有一個非常致命的問題，即大部分搜尋引擎無法識別FLASH中的資訊。 Google也只能檢索到部分Flash檔中的內嵌連結。
FLASH優化可以從以下三個方面來考慮：
1、做一個輔助HTML版本： 保留原有FLASH版本的同時，還可以設計一個HTML格式的版本，這樣既可以保持動態美觀效果， 也可以讓搜尋引擎通過HTML版本的網頁來發現網站。
2、將Flash內嵌HTML檔： 還可以通過改變網頁結構進行彌補，即不要將整個網頁都設計成Flash動畫，而是將Flash內容嵌入到HTML檔中，這樣對於使用者流覽並不會削弱視覺效果， 搜尋引擎也可以從HTML代碼中發現一些必要的資訊，尤其是進入內容頁面的連結。 即使首頁全部動用了FLASH，也應該將進入內頁的關鍵性按鈕/連結置於FLASH檔之外，以獨立純文字連結的方式呈現。 上文案例將"中文版"連結置於FLASH檔中，使得編目程式一無所獲，無法抓取到內頁資訊。
3、付費登錄搜尋引擎： 如果FLASH網站錯過了被免費的技術型搜尋引擎自動檢索的機會，或者搜尋結果排名效果不太理想，可以通過付費登錄或做搜尋引擎關鍵字廣告，同樣被使用者搜索到。