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