搜尋優化之友好的網頁設計製作

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

　　一、目錄結構和URL

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

　　二、目錄層次：

　　對於一個小型網站來說，一般只有一層子目錄，如下：www.yoursite/dir1/page.htm拆分一下www.yoursite 是域名dir1 是一級目錄名page 是檔名。對搜尋引擎而言，這種單一的目錄結構最為理想，即扁平結（Flat）。而對規模大一些的網站，往往需要二到三層子目錄。象這樣：www.yoursite/dir1/dir2/dir3/page.htm。搜尋引擎還是會往抓取二到三層子目錄下的檔案，但最好不要超過3層，假如超過4層，象以下這個頁面，搜尋引擎就很難往搜尋它了：www.yoursite/dir1/dir2/dir3/dir4/page.h tm。

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

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

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

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

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

　　三、目錄和檔案命名：

　　根據關鍵字無所不在的原則，可以在目錄名稱和檔名稱中使用到關鍵詞。但假如是關鍵片語，則需要用分隔符分開。我們常用連字元“-”和下劃線“_”進行分隔，URL 中還經常出現空格碼“ ”。因此，假如以“中國製造”作檔名，就可能出現以下三種分隔形式：A、made-in-china.htm ;B、made_in_china.htm ;C、made in china.htm

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

　　四、盡對URL和相對URL：

　　盡對URL：即網 頁路徑使用包含頂級域名在內的完整 的URL 。如：www.yoursite/page1/index.html 是一個盡對路徑，其中/page1/index.html 則為相對 路徑，由瀏覽器自動在該連結前加上www.yoursite。總體上，Google 在排名時並不在意 URL 使用的是相對路徑還是盡對路徑。

　　動態URL：前很多網站都有資料庫驅動天生的URL，即動態URL，往往表現為在URL中出現“?”、“=”、“%”，以及“&”、“$”等字元，動態 URL 不利於搜尋引擎抓取網頁會影響網站排名，通常是通過技術解決方案將動態URL轉化成靜態的URL形式如：將 www.domain/messages.php?id=2&type=5轉化為 www.domain/messages/2/5/

　　五、導航結構：

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

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

　　2、“麵包屑型 Breadcrumbs)”路徑：所謂“麵包屑”是比喻使用者通過主導航到目標網頁的訪問過程中的路徑提示，使使用者瞭解所處網站中的位置而不至於迷失“方向”，並方便回到上級頁面和出發點。路徑中的每個欄目最好新增連結。如下：時代營銷：首頁 > 網路營銷動態 > 特別報導。即使沒有具體的路徑來源，也至少應該在每個子頁面提示回首頁的連結，包括頁面的 LOGO作連結。

　　3、首頁突出重要內容：除了主欄目，還應該將次級目錄中的重要內容以連結的方式在首頁或其它子頁中多次呈現，以突出重點。搜尋引擎會對這種一站內多次出現的連結給予充分重視，對網頁級別（PageRank）進步有很大幫助，這也是每個網站首頁的網頁級別一般高於其它頁面級別的重要因素9U8U網頁遊戲門戶|http://www.9u8u.com/，由於每個子頁都對首頁進行了連結。

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

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

　　工具推薦：Xenu：home.snafu.de/tilman/xenulink.html  天生網站輿圖

　　六、框架結構：

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

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

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

　　還有一個辦法是採用 iframe 即內聯框架（Inner Frame）技術來避免 Frame 帶來的不便。所謂 iframe 也是框架的一種形式，它是相當於在主瀏覽器視窗中內嵌一個子視窗，內容自動開啟。iframe 可以嵌在網頁中的任意部分，也可以隨意定義其大小，其程式碼顯示為： <iframe src=xx width=x height=x scrolling=xx frameborder=x></iframe>” 對搜尋引擎來說，iframe 中的文字是可見的，也可以跟蹤到其中連結指向的頁面，不過與使用者所見不同的是，搜尋引擎將 iframe 內容看成單獨的一個頁面內容，與被內嵌的頁?**薰亍?

　　七、影象優化：

　　一般而言，搜尋引擎只識讀文字內容，對影象是不可見的。同時，影象檔案直接延緩頁面載入時間，假如超過 20 秒網站還不能載入，使用者和搜尋引擎極有可能離開你的網站。因此，除非你的網站內容是圖片為主，比如遊戲站點或者圖片至關重要，否則儘量避免使用大圖片，更不要採用純影象製作網頁 SPLASH PAGE)。網站圖片優化的核心有兩點：增加搜尋引擎可見的文字描述，以及在保持影象質量的情況下儘量壓縮影象的檔案大小。

　　八、Alt 屬性：

　　每個影象<IMG>標籤中都有 ALT 屬性，搜尋引擎會讀取該屬性以瞭解影象的資訊。因此，最好在所有插圖的 ALT 屬性中都有文字描述，並帶上該頁關鍵字在其中。文字說明：除了 ALT 屬性文字，還可以考慮以下方法直接優化影象，使之被搜尋到：

　　1、在圖片上方或下方加上包含關鍵詞的描述文字；

　　2、在程式碼中增加一個包含關鍵詞段的 heading 標題標籤，然後在圖片下方增加文字描述。

　　3、在圖片下方或旁邊增加如“更多某某”連結，包含關鍵詞。

　　4、建立一些既吸引使用者又吸引搜尋引擎的文字內頁，先把流量吸引到這些頁面，再提供文字連結指向你的圖片頁面。

　　總體上，網頁應儘量減少裝飾性圖片以及大圖片。而 Alt 屬性中的文字對搜尋引擎來說，其重要性比正文內容的文字要低。

　　九、Gif和JPGE影象優化：

　　Alt 屬性和文字說明都只是對影象之外的文字環境進行優化，對圖片本身的優化處理。對圖片檔案優化的目的是在儘量不影響影象畫面效果的情況下，我們可以把K值設小，開啟的速度就要快些了。將其檔案大小降到最低，以加快頁面整體下載速度。網頁圖片格式主要有 GIF 和 JPGE 兩種形式。一般來講，GIF 適用於線圖和企業標識，JPEG 適宜照片元素的格式。主要通過減少 GIF 顏色數目、縮小圖片尺寸和降低分辯率來縮小檔案，也可以採用層疊樣式表達到優化的目的。此外，將大圖片切割成若干小圖片於不同的格區間內進行拼接，也可以相對加快下載時間。

　　FLASH 優化可以從以下三個方面來考慮：

　　1、做一個輔助HTML版本：儲存原有 FLASH 版本的同時，還可以設計一個 HTML 格式的版本，這樣既可以保持動態美觀效果，也可以讓搜尋引擎通過 HTML 版本的網頁來發現網站。

　　2、將Flash內嵌HTML檔案：還可以通過改變網頁結構進行彌補，即不要將整個網頁都設計成 Flash 動畫，而是將 Flash內容嵌進到 HTML 檔案中，這樣對於使用者瀏覽並不會削弱視覺效果，搜尋引擎也可以從 HTML程式碼中發現一些必要的資訊，尤其是進進內容頁面的連結。即使首頁全部動用了 FLASH，也應該將進進內頁的關鍵性按鈕/連結置於 FLASH 檔案之外，以獨立純文字連結的方式呈現。上文案例將“中文版”連結置於 FLASH 檔案中，使得蜘蛛程式一無所獲，無法抓取到內頁資訊。

　　3、付費登入搜尋引擎：假如FLASH網站錯過了被免費的技術型搜尋引擎自動檢索的機會，或者搜尋結果排名效果不太理想，可以通過付費登入或做搜尋引擎關鍵詞廣告，同樣被使用者搜尋到。

　　總體上，貿易網站應儘量少用 FLASH，站點間進行廣告交換時也要避免採用 FLASH 廣?**喜摺?

　　十、表格使用：

　　表格是網頁最重要的排版方式。假如某個網頁採用了大段的長篇文字，除了可以將一頁文天職成多面，還可以考慮將文字置進不同表格中，這樣不僅治理方便，也使得該頁載入時每個表格內容依次載入，這樣訪問者就可以一邊看已下載內容一邊等待剩餘部分載入，而不是等待很久之後才一齊載入出來。表格之內套嵌太多表格也不利於頁面載入，因瀏覽器是先載入完大表格之後再載入內嵌的小表格，因此內嵌表格會終極降低整頁載入速度。

　　十一、網頁減肥：

　　程式碼設定不妥不僅延長網頁載入時間，也嚴重影響蜘蛛程式對網頁內容的抓取。通過對網頁程式碼進行清減（俗稱“網頁減肥”），往掉臃腫雜亂的程式碼，減小網頁檔案大小，能夠加快網頁載入速度，讓蜘蛛快速索引到重要內容正常情況下一個頁面的檔案大小在 15K 左釉冬最好不要超過 50K。

　　網頁減肥重點涉及以下幾個要點：

　　CSS 樣式：網頁製作應通過 CSS（層疊樣式表單）來同一定製字型風格，以使程式碼標準化，避免大量的字型和格式化標籤如< h1 >< /h1 >、< font size ×× color ×× >< /font >充斥頁面。通過 css 可以控制任何 HTML 標籤的風格。例如<td>,<p>,<body>,<table>,<tr>,<th>等，只要在HTML的<head>區內的<style type=\"text/css\">和</style>之間指定對應標籤的風格如字型，顏色，大小即可。通過設定，就把文字的字型、字號、顏色、背景色等同一起來，不用對每段文字單獨進行格式定義從而減少大量重複性標籤。留意把所有 css 檔案單獨存放在命名為 css 的外部檔案中通過設定 CSS 樣式，也可以提升導航文字的美觀度，達到與圖片導航同樣優美觀的效果，這點尤其提醒網頁設計師留意，沒有必要將導航條用圖片呈現。

　　JavaScript：正常情況下，網頁儘量以<HTML>作為程式碼的開始端。但採用JavaScript 技術的網頁往往在頁面一開始就堆積大量 JAVA 程式碼，以至 META 及關鍵字遲遲不能出現，被推至頁面底部，對搜尋引擎很不友好。有兩種方法可以使之得以改善：

　　1、將指令碼移至頁面底部：大部分的 JAVA 程式碼都可以移到頁面結束標籤之上，而不影響網站功能。這樣就能一開始突出關鍵詞，並加快頁面載入時間。

　　2、將 JAVA 指令碼置進一個.js 副檔名的檔案。包含你的 JavaScript 的.js 檔案通常在網站訪問者的瀏覽器中被快取下來，使得下次訪問速度加快，也使得網站修改和維護起來更加方便

　　工具推薦：網頁減肥工具：202.99.237.33/softdown/softdoc/net_opt.htm往除網頁中多餘程式碼，減小網頁。