在過(guò)去的2018年， 前端開發(fā)因?yàn)榇罅壳岸丝蚣艿某霈F(xiàn)開發(fā)模式有了巨大的改變，MVC這個(gè)web服務(wù)器端開發(fā)的模式，由于angularjs們的出現(xiàn)，變成了前端MVVM+后端RestAPI的模式，使得web開發(fā)效率有了極大的提升，前端工程師基于angularjs等前端框架利用ajax技術(shù)結(jié)合后端Restful API，可以達(dá)到前后端分離，UI和模型分離。 于是一個(gè)web頁(yè)面在angularjs等框架的武裝下，變成了具有豐富功能的單頁(yè)應(yīng)用，基本可以達(dá)到類似window客戶端，flex等程序的交互能力。

可以說(shuō)web開發(fā)由于angularjs，bootrap等前端框架下變得美好起來(lái)，不用為了跨瀏覽器兼容，為了實(shí)現(xiàn)UI的操作些大段的css，js代碼。 基于angularjs等框架的開發(fā)已經(jīng)大范圍普及開來(lái)。可是開發(fā)者們?cè)谑褂肁ngularJS將web程序從php，springmvc等服務(wù)器端渲染改成目前的前端渲染+ajax通過(guò)restful API請(qǐng)求數(shù)據(jù)的純客戶端程序后，發(fā)現(xiàn)對(duì)于搜索引擎來(lái)說(shuō)，頁(yè)面里的數(shù)據(jù)不能被爬蟲搜索索引了。這就是需要去探討的前端AJAX單頁(yè)應(yīng)用的SEO問(wèn)題。

AJAX頁(yè)面的SEO問(wèn)題

搜索引擎爬蟲(又叫機(jī)器人)最初是被設(shè)計(jì)用來(lái)抓取網(wǎng)頁(yè)的HTML內(nèi)容的。隨著web以及網(wǎng)站技術(shù)的進(jìn)化，JavaScript變成了web的主要語(yǔ)言。AJAX允許我們?cè)趙eb上做異步的操作。AngularJS們充分使用了異步模型，帶給web頁(yè)面很好的交互性，但這也給Google的爬蟲帶來(lái)了問(wèn)題。對(duì)于angularjs頁(yè)面來(lái)說(shuō)，你的整個(gè)網(wǎng)站可能就僅僅是一個(gè)頁(yè)面，利用angularjs的視圖功能通過(guò)異步請(qǐng)求填充數(shù)據(jù)，所有的頁(yè)面路由，視圖，和交互邏輯都是在客戶端完成。不論是你發(fā)表一個(gè)評(píng)論，寫一個(gè)郵件，創(chuàng)建一個(gè)客戶資料都是在一個(gè)頁(yè)面完成。和你的web頁(yè)面在沒(méi)有ajax異步請(qǐng)求數(shù)據(jù)下，只是一個(gè)基本的空殼，沒(méi)有實(shí)際的內(nèi)容數(shù)據(jù)。所有的數(shù)據(jù)都是在瀏覽器端通過(guò)異步加載得到的。當(dāng)你查看一個(gè)angularjs的網(wǎng)頁(yè)源代碼是，你可能看到是主體部分是： 然后發(fā)現(xiàn)數(shù)據(jù)都不在了。 這也是爬蟲所看到的，如果沒(méi)有做特別的SEO設(shè)置的話。

怎么解決

Angularjs的好處太多，一切很美好，就是SEO這個(gè)問(wèn)題成為開發(fā)者的唯一痛苦，在習(xí)慣angularjs的便利后，不用他就像是買了輛車，卻被SEO問(wèn)題限號(hào)了，不能開。 于是為了angularJS們的AJAX SEO優(yōu)化支持成為開發(fā)者們努力的目標(biāo)，目前AJAX SEO優(yōu)化已有一些不錯(cuò)的解決方案，我們將在下面一一探討：

GOOGLE的AJAX爬蟲方案

GOOGLE對(duì)這類AJAX頁(yè)面有一套解決方案，可以讓angularjs頁(yè)面的數(shù)據(jù)像傳統(tǒng)頁(yè)面一樣被爬蟲抓取，不過(guò)需要按照google的方式對(duì)你的程序做一定的改造， 具體可以參考：oogle抓取AJAX內(nèi)容的指南請(qǐng)參看 Google’s Webmaster AJAX Crawling Guidelines.

簡(jiǎn)單說(shuō)，他基本的方式是：

• 當(dāng)一個(gè)搜索引擎的爬蟲訪問(wèn)你的應(yīng)用程序并且看到時(shí)，它會(huì)在你的URL中添加一個(gè)?_escaped_fragment_=tag。

• 你的服務(wù)器將會(huì)攔截這個(gè)請(qǐng)求，并把它發(fā)送給一個(gè)用來(lái)處理這個(gè)特殊的爬蟲請(qǐng)求的中間件。

可是GOOGLE只是搜索引擎的一種，其他的引擎對(duì)ajax頁(yè)面還不能很好支持，對(duì)于國(guó)內(nèi)站點(diǎn)來(lái)說(shuō)，baidu等國(guó)內(nèi)搜索引擎的SEO支持更為重要。所以我們還是需要考慮其他方案。

其次，需要針對(duì)性的按照google的方式對(duì)程序進(jìn)行調(diào)整，也包括專門處理爬蟲請(qǐng)求的中間件開發(fā)工作，都有不少的開發(fā)量。

Prerender.io方案

可是說(shuō)這是上面google方案的第三方解決方案。 Prerender.io，是一個(gè)兼容多種不同平臺(tái)（包括Node，PHP和Ruby）的一個(gè)服務(wù)。該服務(wù)是完全開源的，但是如果你不想搭建一個(gè)你自己的SEO服務(wù)器的話，你可以使用他們提供的解決方案。Prerender的人們認(rèn)為，SEO是一件正確的事，并不是一個(gè)特權(quán)，他們已經(jīng)做了一些了不起的工作來(lái)擴(kuò)展他們的解決方案，添加了很多自定義的功能和插件。通過(guò)引導(dǎo)爬蟲到prerender建立的代理頁(yè)面服務(wù)器，相當(dāng)于給爬蟲單獨(dú)建立了一個(gè)單獨(dú)的通道，將網(wǎng)頁(yè)快照喂給爬蟲。

這種方式麻煩在于需要建立一個(gè)prerender服務(wù)器，需要給頁(yè)面建立快照，還是存在很多工作量。

PhontomJS方案

PhantomJS 是一個(gè)基于WebKit的服務(wù)器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各種Web標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。PhantomJS可以用于頁(yè)面自動(dòng)化，網(wǎng)絡(luò)監(jiān)測(cè)，網(wǎng)頁(yè)截屏，以及無(wú)界面測(cè)試等。

利用PhontomJS這個(gè)框架，我們可以找到一種簡(jiǎn)單方式，通過(guò)phonetomJS代理將ajax頁(yè)面的數(shù)據(jù)在ajax數(shù)據(jù)完成后，將整個(gè)完整頁(yè)面?zhèn)鹘o爬蟲，從而使得angularjs頁(yè)面對(duì)爬蟲來(lái)說(shuō)，和傳統(tǒng)頁(yè)面一樣，包含了數(shù)據(jù)的完整頁(yè)面，從而達(dá)到SEO優(yōu)化的目的。

這個(gè)方案可以說(shuō)是一種非常簡(jiǎn)單可行的方式，可以通過(guò)在你的web程序中增加一個(gè)filter來(lái)實(shí)現(xiàn)對(duì)爬蟲請(qǐng)求，通過(guò)PhontomJS取得完整頁(yè)面后在傳遞給爬蟲，基本算比較簡(jiǎn)潔的解決了SEO的問(wèn)題。如果想對(duì)angularjs做SEO，這是一個(gè)值得考慮的方案。

javascript的服務(wù)器端渲染方案

這類方案出現(xiàn)后，我們看到一個(gè)很有意思的現(xiàn)象，原來(lái)的web頁(yè)面從PHP，JSP等純服務(wù)器端渲染方式，變成angularjs們的javascript的客戶端渲染方式后，由于SEO問(wèn)題需要解決， 于是javascript的服務(wù)器端渲染方案出現(xiàn)了，這是一種權(quán)衡兩種模式后的一種改進(jìn)方案，結(jié)合服務(wù)器端渲染，javascript客戶端渲染兩種方式的優(yōu)點(diǎn)，而出現(xiàn)的一種混合模式，這種模式和普通使用Jsp或PHP/ASP等服務(wù)器端渲染區(qū)別所在，后者每切換一個(gè)頁(yè)面實(shí)際是從服務(wù)器端再拉取一個(gè)新的頁(yè)面內(nèi)容，而新式的JS服務(wù)器端渲染技術(shù)是第一頁(yè)如同JS/PHP/ASP，一旦輸出渲染成功，頁(yè)面各種效果包括切換到下一頁(yè)都是由第一頁(yè)的JS全面掌管，這時(shí)如同AngularJS等客戶端Javascript驅(qū)動(dòng)渲染頁(yè)面一樣，由AngularJS實(shí)時(shí)修改當(dāng)前頁(yè)面的DOM。

這種模式出現(xiàn)成為解決angularjs們SEO問(wèn)題的一種解決方案，除此之外，還能帶來(lái)更好的用戶體驗(yàn)，加載頁(yè)面更快。

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

Serverside React Rendering: Isomorphic JavaScript

INSIDE FASTBOOT: FAKING THE DOM IN NODE.JS。

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

總結(jié)

就目前來(lái)說(shuō)，angularJS們的SEO問(wèn)題，對(duì)開發(fā)者來(lái)說(shuō)還是一件比較麻煩的事情，需要考慮較多因素。目前存在的方案也沒(méi)有非常成熟，不過(guò)在angularjs等越來(lái)越普及的情況下，相信SEO支持也會(huì)越來(lái)越好，拭目以待。