隨著(zhù)互聯(lián)網(wǎng)的飛速發(fā)展， 使用傳統靜態(tài)頁(yè)面和JavaScript技術(shù)開(kāi)發(fā)一個(gè)大型網(wǎng)站的難度越來(lái)越高。而Google 推出的AngularJS 則是基于傳統JavaScript 的一個(gè)MVC 框架，開(kāi)發(fā)者可以通過(guò)它來(lái)編寫(xiě)目前主流的單頁(yè)面應用。它克服了HTML在構建大型Web 應用上的不足，使用HTML 作為模板，簡(jiǎn)化應用組件，利用依賴(lài)注入和數據綁定，使開(kāi)發(fā)人員可以更有效地進(jìn)行一些大型網(wǎng)站以及APP 的開(kāi)發(fā)。為了使AngularJS 開(kāi)發(fā)的頁(yè)面支持搜索引擎爬蟲(chóng)， 需要對此單頁(yè)面模式進(jìn)行搜索引擎優(yōu)化(Search Engine Optimization，SEO)?，F有對于A(yíng)ngularJS 單頁(yè)面的SEO 策略的研究和相關(guān)文獻較少， 所以本文還結合了相關(guān)社區、論壇等一系列的網(wǎng)絡(luò )資源。本研究對AngularJS 單頁(yè)面的動(dòng)態(tài)數據無(wú)法被爬蟲(chóng)解析到的問(wèn)題提出了非實(shí)時(shí)和實(shí)時(shí)靜態(tài)化的兩種基于JavaEE 攔截器的SEO 策略。
1 單頁(yè)面靜態(tài)化策略
1.1 策略一：非實(shí)時(shí)的靜態(tài)化
智能識別爬蟲(chóng)機器人返回定期更新的緩存頁(yè)面的非實(shí)時(shí)靜態(tài)化SEO 原理。具體分為：①在項目部署或者在設定的一段時(shí)間后，對頁(yè)面進(jìn)行后臺的獲取、遍歷，通過(guò)配置文件設定的遍歷深度開(kāi)始對首頁(yè)進(jìn)行深度的鏈接獲取以及轉義，將各個(gè)鏈接對應的頁(yè)面交給下一步處理，直到所有遍歷結束;②對遍歷的頁(yè)面進(jìn)行SEO 處理， 生成或更新靜態(tài)HTML 緩存放入靜態(tài)頁(yè)面池，即配置文件設置的緩存路徑，并在遍歷結束后及時(shí)對無(wú)效鏈接的緩存進(jìn)行清理;③網(wǎng)絡(luò )請求首先通過(guò)攔截器(SEOFilter)，攔截器根據HTTP 請求的請求頭中包含的“User-Agent”等參數判斷此請求是否為爬蟲(chóng)機器人的請求，如果不是則返回正常的頁(yè)面用于A(yíng)ngularJS 內部渲染顯示， 反之則通過(guò)URL 轉義查詢(xún)并返回對應的SEO 緩存頁(yè)面給爬蟲(chóng)機器人用于抓取關(guān)鍵字。由于此策略是非實(shí)時(shí)的，所以它適用于較為穩定且對于搜索引擎的實(shí)時(shí)性要求不高的網(wǎng)站。例如政府辦公網(wǎng)站，它每日更新的內容不多且不會(huì )頻繁地修改頁(yè)面內容，則可以每日對服務(wù)器的靜態(tài)頁(yè)面進(jìn)行更新，即可滿(mǎn)足每日更新搜索引擎詞條的需求。
1.2 策略二：實(shí)時(shí)的靜態(tài)化
策略一為非實(shí)時(shí)的靜態(tài)化策略， 然而它不會(huì )很好地適用于需要經(jīng)常更新數據且對搜索引擎實(shí)時(shí)性要求較高的大型門(mén)戶(hù)網(wǎng)站。例如大型的新聞網(wǎng)站， 網(wǎng)站經(jīng)常會(huì )發(fā)布新的文章或者是公告， 并且需要搜索引擎能夠盡快地將新聞的鏈接和關(guān)鍵詞加入索引，那么頻繁更新緩存頁(yè)面的服務(wù)器開(kāi)銷(xiāo)會(huì )很大，并且緩存文件所占的空間也會(huì )越來(lái)越大， 因此針對此種情況提出了實(shí)時(shí)的靜態(tài)化策略。請求頁(yè)面時(shí)即時(shí)生成定時(shí)銷(xiāo)毀的靜態(tài)頁(yè)面緩存，爬蟲(chóng)機器人請求時(shí)， 首先查找是否存在緩存以及頁(yè)面緩存是否失效，如果緩存有效則返回靜態(tài)池中的靜態(tài)頁(yè)面，反之則生成新的靜態(tài)頁(yè)面或者更新靜態(tài)池內的靜態(tài)頁(yè)面， 修改后的實(shí)時(shí)靜態(tài)化策略原理..同時(shí)，此實(shí)時(shí)靜態(tài)化策略也改進(jìn)了頁(yè)面的緩存方式，它對于不同緩存頁(yè)面的關(guān)鍵字設置不同的清理權重(即更新頻率高低，需要人工設置)。 較為穩定的頁(yè)面———例如首頁(yè)菜單、公司信息等展示頁(yè)面可以設定較小的權重值;更新比較頻繁的頁(yè)面，例如新聞公告、發(fā)布消息的匯總頁(yè)則可以設定較大的權重值。權重越小的靜態(tài)頁(yè)面的緩存時(shí)間越久，可以保存一天甚至是一周，這樣可以大幅節省頻繁生成此類(lèi)緩存的資源浪費; 而權重越大的靜態(tài)頁(yè)面由于更新頻繁，所以緩存時(shí)間越短，考慮到搜索引擎的爬蟲(chóng)機器人不會(huì )實(shí)時(shí)抓取信息，而是間隔一段時(shí)間(一般為四至五小時(shí))才會(huì )重新抓取，因此可以在兩到三小時(shí)或更短的時(shí)間后清理此類(lèi)緩存。這里的緩存也可能會(huì )清理失敗，所以在判斷緩存是否存在的同時(shí)也需要檢查靜態(tài)頁(yè)面的失效時(shí)間， 避免過(guò)時(shí)的舊頁(yè)面緩存影響新發(fā)布信息的檢索。策略還規定了當網(wǎng)站重新部署后強制清理所有緩存。
2 單頁(yè)面靜態(tài)化策略實(shí)現及測試
2.1 實(shí)現步驟
靜態(tài)化策略的實(shí)現主要分成配置攔截器以及攔截器實(shí)現兩步。首先將AngularJS 的Web 項目加入JavaEE 的webapp 文件夾中，設置WEB-INF / web.xml 文件，確定外部工具路徑、緩存路徑、遍歷深度、攔截規則等參數，下面為少量配置代碼：
針對策略二的實(shí)時(shí)靜態(tài)化SEO 策略的攔截器SEOFilter 的實(shí)現原理攔截器首先判斷請求的發(fā)送方， 如果不是爬蟲(chóng)機器人則直接返回正常的頁(yè)面，反之則返回SEO 實(shí)時(shí)靜態(tài)化頁(yè)面。針對爬蟲(chóng)機器人的處理流程主要為：首先進(jìn)行URL 轉義，爬蟲(chóng)請求分析，記錄URL 并查詢(xún)遍歷深度(沒(méi)有此項參數則使用配置文件中的默認值);再將URL 進(jìn)行二次轉義，查詢(xún)緩存文件;如果存在緩存文件并且沒(méi)有失效，則直接返回SEO 靜態(tài)頁(yè)面;如果緩存文件不存在，或者緩存已失效并未及時(shí)銷(xiāo)毀，則先銷(xiāo)毀緩存，再進(jìn)入SEO 處理器;SEO 處理器利用第三方工具PhantomJS，它是一個(gè)以WebKit 為基礎的服務(wù)器端JavaScript 的API，不依賴(lài)于瀏覽器，全面支持各種Web 標準，例如頁(yè)面文檔對象模型(Document Object Model，DOM)處理等———對動(dòng)態(tài)頁(yè)面進(jìn)行搜索引擎優(yōu)化; 最后生成緩存頁(yè)面， 保存文件至緩存文件目錄(緩存池)，返回SEO 靜態(tài)頁(yè)面。
2.2 測試與分析
測試環(huán)境的系統為Windows Server 2008 R2， 部署平臺為T(mén)omcat 7.0.70，端口8083 為實(shí)時(shí)靜態(tài)化策略實(shí)現后的網(wǎng)站訪(fǎng)問(wèn)入口，端口8084 則為原始的AngularJS 網(wǎng)站的訪(fǎng)問(wèn)入口。首先使用瀏覽器訪(fǎng)問(wèn)網(wǎng)站， 攔截器判斷出請求為瀏覽器請求，并在控制臺顯示瀏覽器版本，瀏覽器可以正常瀏覽網(wǎng)頁(yè);之后再使用模擬百度爬蟲(chóng)機器人的工具分別對原始網(wǎng)頁(yè)和策略實(shí)現后網(wǎng)頁(yè)進(jìn)行爬蟲(chóng)，并顯示抓取的頁(yè)面信息。表明了爬蟲(chóng)機器人只能抓取AngularJS 單頁(yè)面中的部分關(guān)鍵字，包括標題、頁(yè)面底部描述等信息;而使用實(shí)時(shí)靜態(tài)化策略后，攔截器識別出了爬蟲(chóng)機器人然后在控制臺顯示，同時(shí)返回了SEO靜態(tài)頁(yè)面， 并且表明了網(wǎng)頁(yè)中的動(dòng)態(tài)數據已經(jīng)可以被一般的爬蟲(chóng)機器人抓取到，并顯示有用的關(guān)鍵字，包括發(fā)布公告、網(wǎng)站信息等主要標題與信息。
3 結束語(yǔ)
本文提出了非實(shí)時(shí)和實(shí)時(shí)靜態(tài)化的兩種SEO 策略，它們均可以實(shí)現AngularJS 單頁(yè)面SEO 靜態(tài)化的預期目的，不過(guò)它們也存在著(zhù)一些不足。策略一針對的是較為穩定且對搜索引擎檢索實(shí)時(shí)性要求不高的大型網(wǎng)站，例如政府辦公網(wǎng)站等。它可以定期對網(wǎng)站中的靜態(tài)頁(yè)面進(jìn)行更新， 但是對于實(shí)時(shí)性要求較高的門(mén)戶(hù)網(wǎng)站，它會(huì )頻繁地重新遍歷所有靜態(tài)頁(yè)面，大大增加服務(wù)器的壓力， 生成所有緩存的時(shí)間和服務(wù)器緩存頁(yè)面的數量也會(huì )相應增加。策略二針對的則是對搜索引擎檢索實(shí)時(shí)性要求較高的大型門(mén)戶(hù)網(wǎng)站，例如新聞網(wǎng)站等。它盡可能增加緩存頁(yè)面的實(shí)時(shí)性并且節約緩存文件的空間，但是對于實(shí)時(shí)性要求不高的網(wǎng)站，它會(huì )頻繁地銷(xiāo)毀再生成不需要實(shí)時(shí)更新的頁(yè)面緩存， 這也會(huì )浪費服務(wù)器的部分資源。因此，需要根據當前網(wǎng)站對于搜索引擎檢索實(shí)時(shí)性的要求來(lái)選擇適合的策略。同時(shí)， 本文的重點(diǎn)在于對AngularJS 單頁(yè)面的SEO 靜態(tài)化的策略與實(shí)現，所以對于關(guān)鍵字的優(yōu)化還可以做進(jìn)一步的研究。
最后，搜索引擎優(yōu)化是對于整個(gè)系統的一個(gè)協(xié)同優(yōu)化的過(guò)程，它由內部設計因素和外部鏈接因素共同影響，SEO 其實(shí)只是一個(gè)輔助行為，對于一個(gè)網(wǎng)站更重要的是其內容的全面與創(chuàng )新。