prerender-SPA程式的SEO最佳化策略

隨著web2.0的興起，ajax的時代已經成為了事實，更如今Knockout,backbone, angular,ember前端MDV(model driver view)架構強勢而來，Single Page Application已經為大家所熟悉了。如今常見的SPA程式，restfull和前端MDV之類的架構能夠實實在在的減少我們的代碼開發量，讓我更多的注意力關注在真正的商務邏輯上。在眾多前端MDV架構從部落格中可以看出來筆者還是鐘愛於angular，然而服務端平台的選擇的話：在.net平台筆者會首選webapi+oData,jvm平台spring restfull。

但是相應帶來的是搜尋引擎最佳化(SEO)是個難題，因為爬蟲不會去執行JavaScript。現在很幸運的是在Google推出angular之後，也給出了一些解決方案：Google's ajax crawling protocol.此協議現在已被Google和bing所實現。

在協議中規定，搜尋引擎會把帶有#!someurl的連結轉換為escaped_fragment=someurl訪問解析，例如：

www.example.com/ajax.html#!key=value

將會變為

www.example.com/ajax.html?_escaped_fragment_=key=value

所以如果我們需要更好的SEO的支援的話，我們可以從現在開始把我們程式中的#變為#！,特別angular程式，因為架構原聲支援對#！的解析。

基於這個協議和phantomjs(headless的瀏覽器核心)我們的SPA SEO工具 prerender(http://prerender.io/)應運而生，在官方和社區的支援下，現在已經有node.js express,ruby on rails,java,asp.net,php,python主流架構和nginx之類的支援。

prerender架構流程圖如下：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/12202R927-0.jpg" title="prerender.jpg" alt="011727108.jpg" />

prerender分為兩個部分一部分為後端雲端服務和應用程式用戶端，用戶端主要攔截來自爬蟲的請求在轉寄到後端雲端服務處理返回處理後並且去掉多餘script/css的html在返回給爬蟲。

後端雲端服務nodejs項目），利用phantomjs這個無ui headless的瀏覽器核心載入頁面地址，並等到頁面解析後擷取document html，並處理去掉無用的部分返回到前段用戶端程式。

而前段程式則為不同語言架構而實現的不同攔截器，如java的filter，asp.net mvc的HttpModule，主要任務為攔截請求並轉寄給後端雲端服務處理。其攔截規則為：

1. 檢查url中是否帶有escaped_fragment或者請求user-agent是已知或者配置的爬蟲user-agent

2. 確認攔截的不是js,css之類的資源檔

3. 在確認url是在白名單中可選如果配置的白名單的話）

4. 確認不應該在黑名單中(可選如果配置了黑名單的話)

註：最好值配置黑名單或者白名單中的一種方式。

有了prerender，因為SEO而放棄SPA不再是理由了，關於prerender的任何issue大家可以及時提出，讓它更加完善。具體關於如何使用和測試請轉向首頁和各個client程式頁面，http://prerender.io/

本文出自 “破狼” 部落格，請務必保留此出處http://whitewolfblog.blog.51cto.com/3973901/1338198