AngularJS們的SEO之殤

在過去的2014年， 前端開發因為大量前端框架的出現開發模式有了巨大的改變，MVC這個web伺服器端開發的模式，由於angularjs們的出現，變成了前端MVVM+後端RestAPI的模式，使得web開發效率有了極大的提升，前端工程師基於angularjs等前端框架利用ajax技術結合後端Restful API，可以達到前後端分離，UI和模型分離。
於是一個web頁面在angularjs等框架的武裝下，變成了具有豐富功能的單頁應用，基本可以達到類似window客戶端，flex等程式的互動能力。

可以說web開發由於angularjs，bootrap等前端框架下變得美好起來，不用為了跨瀏覽器相容，為了實現UI的操作些大段的css，js程式碼。 基於angularjs等框架的開發已經大範圍普及開來。可是開發者們在使用AngularJS將web程式從php，springmvc等伺服器端渲染改成目前的前端渲染+ajax通過restful API請求資料的純客戶端程式後，發現對於搜尋引擎來說，頁面裡的資料不能被爬蟲搜尋索引了。這就是需要去探討的前端AJAX單頁應用的SEO問題。

AJAX頁面的SEO問題

搜尋引擎爬蟲(又叫機器人)最初是被設計用來抓取網頁的HTML內容的。隨著web以及網站技術的進化，JavaScript變成了web的主要語言。AJAX允許我們在web上做非同步的操作。AngularJS們充分使用了非同步模型，帶給web頁面很好的互動性，但這也給Google的爬蟲帶來了問題。對於angularjs頁面來說，你的整個網站可能就僅僅是一個頁面，利用angularjs的檢視功能通過非同步請求填充資料，所有的頁面路由，檢視，和互動邏輯都是在客戶端完成。不論是你發表一個評論，寫一個郵件，建立一個客戶資料都是在一個頁面完成。和你的web頁面在沒有ajax非同步請求資料下，只是一個基本的空殼，沒有實際的內容資料。所有的資料都是在瀏覽器端通過非同步載入得到的。當你檢視一個angularjs的網頁原始碼是，你可能看到是主體部分是：

            <data-ng-view></data-ng-view>

然後發現資料都不在了。 這也是爬蟲所看到的，如果沒有做特別的SEO設定的話。

怎麼解決

Angularjs的好處太多，一切很美好，就是SEO這個問題成為開發者的唯一痛苦，在習慣angularjs的便利後，不用他就像是買了輛車，卻被SEO問題限號了，不能開。 於是為了angularJS們的AJAX SEO優化支援成為開發者們努力的目標，目前AJAX SEO優化已有一些不錯的解決方案，我們將在下面一一探討：

GOOGLE的AJAX爬蟲方案

GOOGLE對這類AJAX頁面有一套解決方案，可以讓angularjs頁面的資料像傳統頁面一樣被爬蟲抓取，不過需要按照google的方式對你的程式做一定的改造， 具體可以參考：oogle抓取AJAX內容的指南請參看 Google’s Webmaster AJAX Crawling Guidelines.

簡單說，他基本的方式是：

• 當一個搜尋引擎的爬蟲訪問你的應用程式並且看到時，它會在你的URL中新增一個?_escaped_fragment_=tag。
• 你的伺服器將會攔截這個請求，並把它傳送給一個用來處理這個特殊的爬蟲請求的中介軟體。

可是GOOGLE只是搜尋引擎的一種，其他的引擎對ajax頁面還不能很好支援，對於國內站點來說，baidu等國內搜尋引擎的SEO支援更為重要。所以我們還是需要考慮其他方案。

其次，需要針對性的按照google的方式對程式進行調整，也包括專門處理爬蟲請求的中介軟體開發工作，都有不少的開發量。

Prerender.io方案

可是說這是上面google方案的第三方解決方案。
Prerender.io，是一個相容多種不同平臺（包括Node，PHP和Ruby）的一個服務。該服務是完全開源的，但是如果你不想搭建一個你自己的SEO伺服器的話，你可以使用他們提供的解決方案。Prerender的人們認為，SEO是一件正確的事，並不是一個特權，他們已經做了一些了不起的工作來擴充套件他們的解決方案，新增了很多自定義的功能和外掛。通過引導爬蟲到prerender建立的代理頁面伺服器，相當於給爬蟲單獨建立了一個單獨的通道，將網頁快照餵給爬蟲。

這種方式麻煩在於需要建立一個prerender伺服器，需要給頁面建立快照，還是存在很多工作量。

PhontomJS方案

PhantomJS 是一個基於WebKit的伺服器端 JavaScript API。它全面支援web而不需瀏覽器支援，其快速，原生支援各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。PhantomJS可以用於頁面自動化，網路監測，網頁截圖，以及無介面測試等。

利用PhontomJS這個框架，我們可以找到一種簡單方式，通過phonetomJS代理將ajax頁面的資料在ajax資料完成後，將整個完整頁面傳給爬蟲，從而使得angularjs頁面對爬蟲來說，和傳統頁面一樣，包含了資料的完整頁面，從而達到SEO優化的目的。

這個方案可以說是一種非常簡單可行的方式，可以通過在你的web程式中增加一個filter來實現對爬蟲請求，通過PhontomJS取得完整頁面後在傳遞給爬蟲，基本算比較簡潔的解決了SEO的問題。如果想對angularjs做SEO，這是一個值得考慮的方案。

javascript的伺服器端渲染方案

這類方案出現後，我們看到一個很有意思的現象，原來的web頁面從PHP，JSP等純伺服器端渲染方式，變成angularjs們的javascript的客戶端渲染方式後，由於SEO問題需要解決， 於是javascript的伺服器端渲染方案出現了，這是一種權衡兩種模式後的一種改進方案，結合伺服器端渲染，javascript客戶端渲染兩種方式的優點，而出現的一種混合模式，這種模式和普通使用Jsp或PHP/ASP等伺服器端渲染區別所在，後者每切換一個頁面實際是從伺服器端再拉取一個新的頁面內容，而新式的JS伺服器端渲染技術是第一頁如同JS/PHP/ASP，一旦輸出渲染成功，頁面各種效果包括切換到下一頁都是由第一頁的JS全面掌管，這時如同AngularJS等客戶端Javascript驅動渲染頁面一樣，由AngularJS實時修改當前頁面的DOM。

這種模式出現成為解決angularjs們SEO問題的一種解決方案，除此之外，還能帶來更好的使用者體驗，載入頁面更快。

想了解這種方案可以參考一下文章：

Serverside React Rendering: Isomorphic JavaScript

INSIDE FASTBOOT: FAKING THE DOM IN NODE.JS。

目前這類方案還存在探索階段，如果angularjs們能夠很好的將這種思想結合在框架本身，是可以解決大部分的SEO問題。

總結

就目前來說，angularJS們的SEO問題，對開發者來說還是一件比較麻煩的事情，需要考慮較多因素。目前存在的方案也沒有非常成熟，不過在angularjs等越來越普及的情況下，相信SEO支援也會越來越好，拭目以待。