兼顧SEO及AJAX無刷新用戶體驗的WEB設計與開發

■鄭冰

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

一、開發背景

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

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

二、SEO概述

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

三、Ajax異步回調的實現

（一）什么是AJAX異步回調

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

1. 通過異步模式，實現局部刷新或無刷新，提升用戶體驗。

2. 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少帶寬占用。

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

（二）什么是JQuery

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

（三）使用AJAX 和JQuery

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

圖一 未初始化數據的分頁代碼截圖

圖二 初始化數據后的分頁代碼截圖

圖三 直接使用JS方法調用回調數據代碼截圖

（四）JS程序代碼如下：

通過以上的JS設置以及方法，就能起到節省帶寬、節省服務器資源、優化并且降低JS對SEO的影響等作用。通過異步回調、簡單的淡入等效果，能夠進一步提升用戶體驗。

四、初始化數據的實現

至此，我們已經實現了異步回調、JS優化、用戶個性體驗等效果，下面將進一步針對SEO進行頁面程序的優化，進一步提高搜索引擎友好度，增加搜索引擎的收錄量。

（一）頁面數據必須真實存在

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

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

圖一、圖三都可以直接使用AJAX異步回調實現網頁淡入淡出等絢麗的效果，網民看到的最終效果也是一樣的，但是圖一的網頁源代碼中，容器是空的，容器代碼中并沒有任何數據，雖然網民能夠看到最終的效果，搜索引擎卻無法獲取到相關數據，從而認為這個頁面是空頁面，沒有實質內容，甚至會認為網站是在作弊，認為網站行為惡劣，導致網站頁面的權重被降低或者導致網站收錄直接被搜索引擎刪除等結果。

圖三中，雖然容器不是空的，但是所有鏈接都為空（HTML中#號代表空連接），并不存在真實的鏈接地址，而是通過JS的點擊事件返回網站頁面的相關鏈接，同樣能夠實現我們想要的視覺效果，搜索引擎卻無法根據鏈接搜索到下一層級的頁面，這也將影響到網站在搜索引擎中的收錄量和收錄結果，無法起到推廣的效果。

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

（二）初始化數據片段代碼

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

五、使用靜態與偽靜態技術

（一）靜態頁

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

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

（二）偽靜態

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

設置偽靜態的方法有多種，美麗天下網使用URLRewriter進行偽靜態設置，方法如下：

1.右鍵點擊要設置的網站,選擇屬性--主目錄--配置，找到 .aspx擴展名--編輯--復制可執行文件的路徑--關閉。截圖如圖4。

2. 點擊添加按鈕，粘貼剛復制的可執行文件路徑，擴展名填寫“.html”，取消“確認文件是否存在”的勾選狀態，點擊確定按鈕。截圖如圖5。

至此，兼顧SEO及AJAX無刷新用戶體驗的WEB設計已經完成，具體效果可參考美麗天下網新聞頻道 ：http://news1.gxtv.cn/。

圖四 復制可執行文件路徑

六、結論

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

圖五 配置html擴展名