■鄭冰

在通常情況下使用 AJAX ，可能會被搜索引擎忽視，同樣使用基于 JavaScript 的鏈接導(dǎo)航也可能帶來同樣的后果。搜索引擎是用來索引內(nèi)容而非執(zhí)行應(yīng)用程序代碼。因此，如果采取錯誤的方式應(yīng)用JavaScript，可能會降低網(wǎng)站搜索引擎的友好性，相反，當(dāng)JavaScript被適當(dāng)?shù)貞?yīng)用時，網(wǎng)站的友好性將不會受到影響。本文 將 探 討 使 用 Asp.net、JavaScript、JQuery、HTML等當(dāng)前主流的Web開發(fā)相關(guān)技術(shù)，實(shí)現(xiàn)能夠同時兼顧SEO以及AJAX無刷新用戶體驗(yàn)的網(wǎng)站設(shè)計與實(shí)現(xiàn)過程，提出搜索引擎與AJAX并存最大平衡的方法，解決搜索引擎不支持JavaScript、AJAX等網(wǎng)頁特效的問題。

一、開發(fā)背景

在互聯(lián)網(wǎng)這個海量、雜亂的信息面前，普通網(wǎng)民獲取信息的方式，主要是通過搜索引擎搜索，無論社交網(wǎng)站取得了怎樣的快速增長，搜索引擎仍然是網(wǎng)民最主要的信息查找方式。就拿廣西電視臺官網(wǎng)美麗天下網(wǎng)為例，在來路分析中，搜索引擎比例占所有來路總數(shù)的90%以上。這就意味著搜索引擎優(yōu)化仍然是網(wǎng)站開發(fā)人員必須面臨的重要課題。

由于JavaScript的內(nèi)容不能被大多數(shù)搜索引擎檢索，谷歌和百度搜索引擎官方文檔都有提到不建議網(wǎng) 站 使 用 JavaScript，JavaScript會干擾搜索引擎正常抓取網(wǎng)頁，所以做網(wǎng)站的搜索引擎優(yōu)化時一般強(qiáng)調(diào)導(dǎo)航菜單等重要的代碼部分盡量不使用JavaScript。如果大面積的鏈接都使用JavaScript，無疑將大大降低搜索引擎抓取收錄的機(jī)會。很多采用JavaScript技術(shù)的網(wǎng)頁往往在頁面一開始就堆積大量java代碼，以致meta及關(guān)鍵詞遲遲不能出現(xiàn)，被推至頁面底部，對搜索引擎很不友好。網(wǎng)頁中過多的JavaScript代碼無疑是對搜索引擎分析網(wǎng)頁內(nèi)容增加難度，如果網(wǎng)頁中的鏈接也是有不少JavaScript組成的話，那么搜索引擎甚至無法順著鏈接去抓取網(wǎng)頁。一方面我們在網(wǎng)頁制作中需要使用JavaScript來制作絢麗的特效，實(shí)現(xiàn)良好的用戶體驗(yàn)，而另一方面，JavaScript又會對搜索引擎抓取、分析造成不好的影響。如何在不影響網(wǎng)頁效果而又對搜索引擎友好的前提下使用JavaScript，從而不影響SEO效果呢？如何能夠?qū)崿F(xiàn)兩者的最大平衡？這些是所有網(wǎng)站開發(fā)人員長期以來一個很頭疼的問題。 接下來我們將以美麗天下網(wǎng)新聞頻道列表頁為例，討論解決這種沖突的具體方法和實(shí)現(xiàn)過程。

二、SEO概述

SEO是搜索引擎最佳化（Search Engine Optimization），又稱為搜索引擎優(yōu)化，主要工作是通過了解各類搜索引擎如何抓取互聯(lián)網(wǎng)頁面、如何進(jìn)行索引以及如何確定其對某一特定關(guān)鍵詞的搜索結(jié)果排名等技術(shù)，來對網(wǎng)頁進(jìn)行相關(guān)的優(yōu)化，使其提高搜索引擎排名，從而提高網(wǎng)站訪問量，簡單地說，SEO是一種讓網(wǎng)站在百度、谷歌、雅虎等搜索引擎獲得較好的排名，從而贏得更多潛在客戶一種的網(wǎng)絡(luò)營銷方式，也是SEM(搜索引擎營銷）的一種方式。

三、Ajax異步回調(diào)的實(shí)現(xiàn)

（一）什么是AJAX異步回調(diào)

AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX 是一種獨(dú)立于 Web服務(wù)器軟件的瀏覽器技術(shù)。AJAX的核心是JS對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術(shù)。AJAX的特點(diǎn)是:

1. 通過異步模式，實(shí)現(xiàn)局部刷新或無刷新，提升用戶體驗(yàn)。

2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少帶寬占用。

3. AJAX引擎在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，從而減少了大用戶量時造成的服務(wù)器負(fù)載。

（二）什么是JQuery

JQuery是一個優(yōu)秀的JS框架。它是輕量級的JS庫(壓縮后只有21k)，它兼容CSS3，還兼容各種瀏覽 器（IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+等）。JQuery使用戶能更方便地處理HTML Documents、Events，實(shí)現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。

（三）使用AJAX 和JQuery

AJAX 和JQuery是JS的高級使用技巧。通過 AJAX，JS可使用XMLHttpRequest對象來直接與服務(wù)器進(jìn)行通信。通過這個對象，JS可在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù)，AJAX 在瀏覽器與Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），AJAX可以實(shí)現(xiàn)動態(tài)不刷新（局部刷新）,就是能在不更新整個頁面的前提下維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶動作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變過的信息，使因特網(wǎng)應(yīng)用程序更小、更快、更友好。JQuery能夠使用戶的HTML頁保持JS代碼和HTML內(nèi)容分離，也就是說，不用再在HTML里面插入一堆JS來調(diào)用命令了，只需定義id即可。這就可以有效地防止因?yàn)镠TML中過多并且雜亂的JS代碼導(dǎo)致搜索引擎爬蟲無法獲取準(zhǔn)確地獲取網(wǎng)頁關(guān)鍵字，從而影響網(wǎng)頁在搜索引擎中的排名的后果。

圖一 未初始化數(shù)據(jù)的分頁代碼截圖

圖二 初始化數(shù)據(jù)后的分頁代碼截圖

圖三 直接使用JS方法調(diào)用回調(diào)數(shù)據(jù)代碼截圖

（四）JS程序代碼如下：

通過以上的JS設(shè)置以及方法，就能起到節(jié)省帶寬、節(jié)省服務(wù)器資源、優(yōu)化并且降低JS對SEO的影響等作用。通過異步回調(diào)、簡單的淡入等效果，能夠進(jìn)一步提升用戶體驗(yàn)。

四、初始化數(shù)據(jù)的實(shí)現(xiàn)

至此，我們已經(jīng)實(shí)現(xiàn)了異步回調(diào)、JS優(yōu)化、用戶個性體驗(yàn)等效果，下面將進(jìn)一步針對SEO進(jìn)行頁面程序的優(yōu)化，進(jìn)一步提高搜索引擎友好度，增加搜索引擎的收錄量。

（一）頁面數(shù)據(jù)必須真實(shí)存在

AJAX異步回調(diào)的一個嚴(yán)重的缺點(diǎn)就是網(wǎng)頁源代碼中的數(shù)據(jù)不真實(shí)，頁面中源代碼與用戶所見到的效果并不一致，搜索引擎蜘蛛是一只瞎子，它爬行抓取網(wǎng)頁方式是通過網(wǎng)頁源代碼進(jìn)行抓取的，蜘蛛并不會看到網(wǎng)頁最終顯示給網(wǎng)民的視覺效果，只認(rèn)識網(wǎng)頁中的源代碼，如果網(wǎng)頁源代碼不真實(shí)，會導(dǎo)致搜索引擎無法獲取到網(wǎng)頁的真實(shí)數(shù)據(jù)。更嚴(yán)重時，網(wǎng)頁會被搜索引擎判定為作弊，并給出“惡劣”的評價，這樣會嚴(yán)重影響網(wǎng)站在搜索引擎中的權(quán)重與整體排名，甚至直接刪除收錄。所以，我們必須得保證網(wǎng)頁所有重要數(shù)據(jù)在源代碼中真實(shí)存在。要做到數(shù)據(jù)源代碼真實(shí)存在，就必須做到每一個鏈接涉及到的頁面都初始化數(shù)據(jù)。

圖一和圖二、圖三給出未初始化數(shù)據(jù)的分頁代碼截圖與初始化數(shù)據(jù)后的分頁代碼截圖以及直接使用JS方法調(diào)用回調(diào)數(shù)據(jù)代碼截圖對比。

圖一、圖三都可以直接使用AJAX異步回調(diào)實(shí)現(xiàn)網(wǎng)頁淡入淡出等絢麗的效果，網(wǎng)民看到的最終效果也是一樣的，但是圖一的網(wǎng)頁源代碼中，容器是空的，容器代碼中并沒有任何數(shù)據(jù)，雖然網(wǎng)民能夠看到最終的效果，搜索引擎卻無法獲取到相關(guān)數(shù)據(jù)，從而認(rèn)為這個頁面是空頁面，沒有實(shí)質(zhì)內(nèi)容，甚至?xí)J(rèn)為網(wǎng)站是在作弊，認(rèn)為網(wǎng)站行為惡劣，導(dǎo)致網(wǎng)站頁面的權(quán)重被降低或者導(dǎo)致網(wǎng)站收錄直接被搜索引擎刪除等結(jié)果。

圖三中，雖然容器不是空的，但是所有鏈接都為空（HTML中#號代表空連接），并不存在真實(shí)的鏈接地址，而是通過JS的點(diǎn)擊事件返回網(wǎng)站頁面的相關(guān)鏈接，同樣能夠?qū)崿F(xiàn)我們想要的視覺效果，搜索引擎卻無法根據(jù)鏈接搜索到下一層級的頁面，這也將影響到網(wǎng)站在搜索引擎中的收錄量和收錄結(jié)果，無法起到推廣的效果。

圖二中的源代碼，存在真實(shí)的鏈接地址，真實(shí)的數(shù)據(jù)是搜索引擎搜錄與評價的依據(jù)。但只是有真實(shí)的鏈接地址并不能達(dá)到淡入淡出等絢麗視覺效果，必須通過結(jié)合前面2.4.1中講到的方法才能實(shí)現(xiàn)。

（二）初始化數(shù)據(jù)片段代碼

通過初始化數(shù)據(jù)，保證每一個涉及到的頁面都存在真實(shí)數(shù)據(jù)。搜索引擎沿著網(wǎng)頁源代碼中的真實(shí)鏈接訪問更多網(wǎng)站中的頁面，增加網(wǎng)站的收錄量，并能夠提高網(wǎng)站在搜索引擎中的排名和權(quán)重。增加網(wǎng)站曝光幾率，從而進(jìn)一步增加網(wǎng)站訪問量。初始化數(shù)據(jù)還有一個優(yōu)勢，有一些特定的用戶，根據(jù)自身計算機(jī)的安全考慮，會用安全工具或者手動禁用瀏覽器的JS功能，如果頁面中的數(shù)據(jù)不是真實(shí)存在而是通過JS調(diào)用的，用戶就無法看到頁面上的數(shù)據(jù)，并且無法點(diǎn)擊導(dǎo)航欄中的鏈接。反之，即使用戶屏蔽了JS，頁面的大部分重要數(shù)據(jù)及功能，仍可以以常規(guī)WEB方式表現(xiàn)。

五、使用靜態(tài)與偽靜態(tài)技術(shù)

（一）靜態(tài)頁

靜態(tài)網(wǎng)頁是實(shí)際存在的，無需經(jīng)過服務(wù)器編譯的，直接加載到客戶瀏覽器上就能顯示出來的，這種網(wǎng)頁不包含在服務(wù)器端運(yùn)行的任何腳本，網(wǎng)頁上的每一行代碼都是由網(wǎng)頁設(shè)計人員預(yù)先編寫好后，放置到Web服務(wù)器上的，在發(fā)送到客戶端的瀏覽器上后不再發(fā)生任何變化，因此稱其為靜態(tài)網(wǎng)頁。常見的靜態(tài)頁面有以.html或.htm為擴(kuò)展名的Web頁面。

靜態(tài)頁面的優(yōu)缺點(diǎn)與動態(tài)頁面的優(yōu)缺點(diǎn)是相對的。動態(tài)頁面是一對多訪問，通過一個頁面，可以根據(jù)若干參數(shù)返回其不同的數(shù)據(jù)。但是靜態(tài)頁面只能是一個頁面對應(yīng)一個內(nèi)容，也就是多對多的關(guān)系。由于靜態(tài)頁對搜索引擎是非常友好的，搜索引擎也相對比較樂意收錄靜態(tài)頁面，所以，建議網(wǎng)站的重要信息頁面，最好生成靜態(tài)頁，這有助于網(wǎng)站的收錄，也有助于網(wǎng)民的訪問，提高網(wǎng)站收錄量和排名，同時提高網(wǎng)民體驗(yàn)度。

（二）偽靜態(tài)

偽靜態(tài)頁是介于靜態(tài)頁與動態(tài)頁之間一種折中的方法，偽靜態(tài)的本質(zhì)是動態(tài)頁，主要優(yōu)點(diǎn)是能夠提升動態(tài)頁對搜索引擎的友好度以及域名地址方便易記。對于一些需要時時顯示更新信息，或者根本無法創(chuàng)建靜態(tài)頁又需要被搜索引擎收錄的情況，比較常用偽靜態(tài)的方法。比如美麗天下網(wǎng)新聞頻道列表頁的真實(shí)地址是：http://news.gxtv.cn/NewsList.aspx?Column=8&page=1設(shè)置偽靜態(tài)后的地址是：http://news.gxtv.cn/NewsList-8-1.html。第二個網(wǎng)址明顯比第一個網(wǎng)址簡潔易記，并且沒有“?”和后面的一堆參數(shù)，更有助于搜索引擎的解析及收錄。

設(shè)置偽靜態(tài)的方法有多種，美麗天下網(wǎng)使用URLRewriter進(jìn)行偽靜態(tài)設(shè)置，方法如下：

1.右鍵點(diǎn)擊要設(shè)置的網(wǎng)站,選擇屬性--主目錄--配置，找到 .aspx擴(kuò)展名--編輯--復(fù)制可執(zhí)行文件的路徑--關(guān)閉。截圖如圖4。

2. 點(diǎn)擊添加按鈕，粘貼剛復(fù)制的可執(zhí)行文件路徑，擴(kuò)展名填寫“.html”，取消“確認(rèn)文件是否存在”的勾選狀態(tài)，點(diǎn)擊確定按鈕。截圖如圖5。

至此，兼顧SEO及AJAX無刷新用戶體驗(yàn)的WEB設(shè)計已經(jīng)完成，具體效果可參考美麗天下網(wǎng)新聞頻道 ：http://news1.gxtv.cn/。

圖四 復(fù)制可執(zhí)行文件路徑

六、結(jié)論

任何獨(dú)立的技術(shù)都有各自的優(yōu)缺點(diǎn)，只有通過長期的經(jīng)驗(yàn)總結(jié)與實(shí)踐，結(jié)合各種技術(shù)的優(yōu)勢，才能開發(fā)出令用戶滿意的效果。美麗天下網(wǎng)采用ASP.NET（C#）進(jìn)行開發(fā)，并結(jié)合了時下比較流行的JQuery庫，在搜索引擎優(yōu)化與用戶體驗(yàn)上，找到了一個合理的平衡。美麗天下網(wǎng)作為廣西電視臺的官方網(wǎng)站，用戶體驗(yàn)與搜索引擎優(yōu)化尤為重要。通過搜索引擎吸引更多用戶來到我們網(wǎng)站，然后通過良好的用戶體驗(yàn)留住用戶，達(dá)到良好的口碑，一傳十，十傳百，最終達(dá)到宣傳我臺形象，宣傳我臺節(jié)目的良性循環(huán)。

圖五 配置html擴(kuò)展名