隨着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架構流程圖如下:
prerender分為兩個部分一部分為后端雲服務和應用程序客戶端,客戶端主要攔截來自爬蟲的請求在轉發到后端雲服務處理返回處理后並且去掉多余script/css的html在返回給爬蟲。
后端雲服務(nodejs項目),利用phantomjs這個無ui headless的瀏覽器內核加載頁面地址,並等到頁面解析后獲取document html,並處理去掉無用的部分返回到前段客戶端程序。
而前段程序則為不同語言框架而實現的不同攔截器,如java的filter,asp.net mvc的HttpModule,主要任務為攔截請求並轉發給后端雲服務處理。其攔截規則為:
- 檢查url中是否帶有escaped_fragment或者請求user-agent是已知或者配置的爬蟲user-agent
- 確認攔截的不是js,css之類的資源文件
- 在確認url是在白名單中(可選如果配置的白名單的話)
- 確認不應該在黑名單中(可選如果配置了黑名單的話)
注:最好值配置黑名單或者白名單中的一種方式。
有了prerender,因為SEO而放棄SPA不再是理由了,關於prerender的任何issue大家可以及時提出,讓它更加完善。具體關於如何使用和測試請轉向主頁和各個client程序頁面,http://prerender.io/