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