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架構流程圖如下:

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/


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章