讓網站的分面導航不再頭疼

06-13

原文來自SEOmoz，一直很想翻譯的文章，作者在2月份的時候寫過一篇《電子商務平台的要素與技巧》（以後有空再翻譯吧），裡面很重要的一點就是分面導航(facet navigation)，這是IA中的一個術語。中國有些人叫他們為二級導航或者次導航。OK，叫什麼都無所謂，只是在一個大中型站建立一個優秀的分面導航系統是一件很困難的事情，因為需要考慮到錯綜複雜的因素。

開發人員和SEO們肯定聽說過搜索引擎經常會提示說：不要為了SEO而SEO，優先考慮用戶

如果你問我說這句話的是針對網站的哪個部分的？很不幸的告訴你，大多數都是針對分面導航的。如果能不考慮搜索引擎來建立分面導航系統，那是再完美不過的事情了。但是很不幸的，事實情況並非如此。在本文中，我會嘗試著來打破那些為了同時為搜索引擎和用戶而做的東西。

在開始之前，我們現在看看分面導航的定義，分面導航經常出現在電子商務的網站，讓用戶可以使用過濾器（好吧，或者叫分面）來過濾成千上萬的產品。我們會在很多B2B/B2C網站看他們的身影。比如京東或者是阿里巴巴。如圖…

在上面這個例子中，我過濾一些條件來選擇我最想要的產品：

1.我要一個筆記本

2.我爸是李剛，我打算要一個蘋果筆記本

3.同上原因，所以我得買個10000以上的

4.同上原因，怎麼說屏幕也得挑個最大的

作為一個用戶，我能通過這些過濾器來選出我想要的產品。

對於搜索引擎來說，這邊會出現一大串不良後果。

初級分面導航

搜索引擎會開始抓取這些分面，不計後果的抓這些過濾頁面並且索引他們，最終抓累了，爬蟲們就離開你的站點了，如下圖

這是比較低級的分面導航建立方式（夜息註：看來國內還有不少站在用這個「低端」的方法，呵呵）因為它允許所有頁面都被抓取和索引，寄希望於搜索引擎自己能分辨出哪些重要哪些不重要。友情提醒：實際上，很多時候那些重要的頁面得不到搜索引擎的愛啊。

我能用noindex或者nofollow嗎？

不少電商網站用robots=noindex或者nofollow來作為一個解決方案，但是這些真的不能帶來太多的幫助，每種方法都有其弱點。

Noindex – 這玩意的確可以把這些醜陋的，過度分類的頁面禁止建立索引，但是無法阻止爬蟲在這些頁面上浪費時間和帶寬。

Nofollow – （夜息註：這邊我就自己來寫了，原文的觀點有點問題，nofollow對google來說是一個好方法，但是對於百度來說，nofollow的鏈接只是不傳遞權重和錨文本。並且nofollow也只能從這個頁面上阻止爬蟲，並不能從其他頁面上，甚至外部鏈接上阻止爬蟲，反正只用nofollow肯定不是最完美的方法來節約帶寬）

另外一個不太靈的方法…

有些網站使用了robots來禁止爬蟲抓取這些分面頁面。比如我只讓爬蟲爬到「筆記本」這個分類，再往下類似於「蘋果筆記本」，「惠普筆記本」的分面就不讓搜索引擎爬行了。這樣的結果就是「筆記本」這個會被索引，而「蘋果筆記本」就不會被索引了。

這樣做的壞處是容易丟掉很多能帶來大量搜索流量的著陸頁。比如京東，他會只想要「筆記本」的流量而不要「蘋果筆記本「的流量嗎？答案很顯然不是。所以為啥這也是不太靈的方法。

那我們怎麼才能建設一個完美的分面導航呢？

優秀的分面導航必須遵循以下一些原則：

1.簡單易用

2.不讓搜索引擎隨意抓取分面

3.讓搜索引擎抓取特定幾類能帶來高價值流量的分面。

說著總比做著容易，我們來看看如何實現這些目標。

解決方案1：AJAX

這年頭還不知道ajax的SEO幾乎滅絕了吧。在兩年前，以Google為代表的搜索引擎已經向抓取ajax內容前進了一大步，請看Google官方博客《如何讓你的ajax內容被爬蟲抓取》。站長們現在能讓網站的ajax內容被Google抓取了！（夜息註：度娘還不行）AJAX技術帶來的用戶體驗的變化，網站從中獲益不少。

在我們的例子中，我打算用ajax來做一個網站的分面導航，並且讓搜索引擎也能抓取到分面頁面。目前有少量電子商務平台是這麼做的。

對於啟用JavaScript的用戶

AJAX讓用戶在選擇和取消過濾器的時候更加快速和易用。在這個例子中我，我們想要一個不能被抓取的AJAX分面導航。這些細分是完全為了用戶考慮的。

這是Oakley glasses的靜態頁面，我們能在頁面上隨意的過濾，頁面不會被重載，URL也不會變，但是產品可以被正確的過濾出來。

禁用JavaScript用戶和所有的搜索引擎

這是整個方法的核心所在，我們製造了一個不使用ajax的靜態Html頁面，並且在上面的分面是人工選出來的，鏈接到了更加深層的html頁面，並且這些頁面是事先統計出能帶來大量搜索流量的頁面。

讓我們來解釋一下

當我們在這樣的網站上購物時，開啟JavaScript的用戶看到的是

這個導航通過JS在頁面載入時就生成了，但是當禁用JS的用戶（包括搜索引擎）的用戶到達時，它就不再站別，取而代之的是：

現在，我們新增了一個叫做「熱門分類」的頁面被抓取了。搜索引擎便可以、抓取這些能帶來大量流量的頁面了。（夜息註：作者後面說他從沒見過有網站這麼干過，我感覺應該有人想到吧）

等等，這不是偽裝頁面么？

偽裝頁面事實上是指給用戶和搜索引擎顯示不同的內容。在我看來這邊不算偽裝頁面，事實上我覺得Google還可能挺喜歡這樣子的頁面。拋開搜索引擎考慮一下，如果你的網站恰好來訪了一位禁用JS的用戶，那純AJAX導航的頁面豈不是要讓他抓狂。Google本著用戶體驗第一的原則，是不會把這樣的行為認定為作弊的。（夜息註：Google的確是一個比較大肚的搜索引擎，想想logo用CSS把錨文本漂移出去的案例，這種更加談不上用戶體驗，純粹是為了SEO，Google都不會懲罰你）

解決方案2：有選擇的使用Robots.txt

這個東西方法可以說是本文開頭那些低端，不太靈方法的升級版本，通過對url的標記，我們可以在robots裡面標記出哪些頁面要被抓，哪些頁面不要被抓。以阿里巴巴www.alibaba.com為例，他們的robots.txt文件中有一條：Disallow:/products/

然後在阿里巴巴國際站的分面導航中，/products/目錄是作為不需要的分面而屏蔽的。並且還用了nofollow,（夜息註：紅色虛線框表示nofollow, 一般SEO插件都有這功能，圖有點丑，不好意思了）

從這個圖裡面我們可以猜想，地域性+關鍵詞的頁面流量或者轉化率是比較高的，阿里巴巴才讓這些頁面被抓取，至於那些細分的頁面就不在這邊讓搜索引擎抓了吧，因為還有其他入口，這邊就賣個關子，有興趣的同學就自己去研究一下吧。

兩個方法都能做出優秀的分面導航導航，但是我更加喜歡第一種AJAX的做法，那樣更加照顧用戶體驗。

還有更多的方法和案例嗎？

我希望有更多人能改善他們的導航系統，變得更加巧妙，精準。這相當於訪客的「雷達」系統。如果你知道其他優秀的分面導航實施方法，歡迎留言告訴我並且和大家討論交流。