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