DIV CSS 佈局教程網

當我們分析一個網站可用性的時候，必定會考慮到面包屑。對於用戶來說，面包屑幾乎是一個“透明”的玩意兒，有誰會仔細觀察那些頁面左上方的導航鏈接呢？是的，沒人在意，但卻也沒有人離得開它。

面包屑，就是在任何一個頁面，都能清楚的知道讓訪問者明白他所在的具體位置的網站 GPS 定位系統，而面包屑導航對於大型網站和按分級排列頁面的網站，更是不可或缺。就憑這一點，我們要介紹一下關於面包屑的一些核心內容：

一、面包屑的類型

一般來說，面包屑設計主要分為三種類型（作者堅持推薦第一種類型，因為後面兩種類型很容易造成內容重復的問題）

1、基於定位的面包屑：顯示用戶在網站整體結構中的具體位置。

2、基於路徑的面包屑：想象一下把用戶帶到當前頁面的路徑，這些頁面都是動態的而且都是基於搜索的結果，所以這類型的面包屑會導致有幾種達到該頁的方式：

以下為引用的內容：

咨詢> 服務 > 履行 > 服務 A

咨詢 > 服務 >優化 > 服務 A

咨詢 > 服務 > 升級 > 服務 A

3、基於屬性的面包屑：列出當前頁的屬性

二、面包屑的關鍵詞優化

很多人都將面包屑當做內部鏈接優化的另外一種方式，所以他們通常將面包屑關鍵詞設計如下：

以下為引用的內容：

主關鍵詞(鏈向主頁）>主關鍵詞+詞（目錄鏈接）-主關鍵詞+詞

例子：

以下為引用的內容：

海報(鏈向主頁）>明星海報(目錄鏈接)>阿根廷朱莉海報

有些時候（如上）這樣設計面包屑雖然看起來依然很自然，但總體來看作者更加傾向盡量減少以 SEO 中心化的設計，原因如下：

1、太聚焦在錨文本優化的面包屑設計看起來很別扭，會導致頁面內容非常不自然。

2、在網站可用性前不要過分注重 SEO。用戶通常都知道“主頁”意味著鏈向什麼地方，但如果硬換成關鍵詞就會引起誤會和猜想，所以還是使用一貫認同的面包屑設計標准。

三、面包屑和 Google

從今年 11 月份開始，Google 已經整合了面包屑導航到搜索結果裡面，使得更加吸引和可信賴性，但不是每個面包屑導航都可以被 Google 采用，但是將面包屑放在頁面的越頂部越好。

4、面包屑的最好實踐

面包屑真正能幫助用戶的時候才使用。對於大型的，多層次的網站，面包屑首先就可以幫助用戶，其次就是有助於 SEO 優化—這是一個額外的收益。不要僅僅為了更好的內部鏈接優化而使用面包屑。

當前頁不要鏈接。（最後的一頁的詞語不要加鏈接效果）

不要用面包屑導航取代主導航欄。（面包屑在網站結構當中是橫條結構的，試想下主導航卻是垂直型展示目錄和內容，沒有了主導航會怎樣呢？）

連貫地使用面包屑（這樣使得用戶在浏覽你的網站的時候更有安全感同時可以更快地熟悉你網站的結構）

不要將頁面的標題用作面包屑（這樣會導致標題太長而且沒有目的性）

本文首發 SEM Watch ，轉載請注明出處。

原文地址：http://semwatch.org/2009/12/breadcrumbs-design-usability-or-seo