如何讓搜尋引擎抓取AJAX內容

越來越多的網站，開始採用"單頁面結構"（Single-page application）。

整個網站只有一張網頁，採用Ajax技術，根據使用者的輸入，載入不同的內容。

這種做法的好處是使用者體驗好、節省流量，缺點是AJAX內容無法被搜尋引擎抓取。舉例來說，你有一個網站。

http://example.com

使用者通過井號結構的URL，看到不同的內容。

http://example.com#1

http://example.com#2

http://example.com#3

但是，搜尋引擎只抓取example.com，不會理會井號，因此也就無法索引內容。

為瞭解決這個問題，Google提出了"井號+驚嘆號"的結構。

http://example.com#!1

當Google發現上面這樣的URL，就自動抓取另一個網址：

http://example.com/?_escaped_fragment_=1

更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/ajax/

只要你把AJAX內容放在這個網址，Google就會收錄。但是問題是，"井號+驚嘆號"非常難看且煩瑣。Twitter曾經採用這種結構，它把

http://twitter.com/ruanyf

改成

http://twitter.com/#!/ruanyf

結果使用者抱怨連連，只用了半年就廢除了。

那麼，有沒有什麼方法，可以在保持比較直觀的URL的同時，還讓搜尋引擎能夠抓取AJAX內容？

我一直以為沒有辦法做到，直到前兩天看到了Discourse創始人之一的Robin Ward的解決方案，不禁拍案叫絕。

Discourse是一個論壇程式，嚴重依賴Ajax，但是又必須讓Google收錄內容。它的解決方案就是放棄井號結構，採用 History API。

所謂 History API，指的是不重新整理頁面的情況下，改變瀏覽器地址欄顯示的URL(準確說，是改變網頁的目前狀態)。這裡有一個例子，你點擊上方的按鈕，開始播放音樂。然後，再點擊下面的連結，看看發生了什麼事？

地址欄的URL變了，但是音樂播放沒有中斷！