在過去的2018年， 前端開發因為大量前端框架的出現開發模式有了巨大的改變，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的網頁源代碼是，你可能看到是主體部分是： 然后發現數據都不在了。 這也是爬蟲所看到的，如果沒有做特別的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支持也會越來越好，拭目以待。