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架構流程圖以下：

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/