設計採用 AJAX 技術的網站,以提升無障礙程度

許多網站擁有者都已經發現,AJAX 建立的動態網頁能夠做為強大的網頁應用程式,進而提升網站的使用者體驗。但是,就像 Flash 一樣,如果未經妥善導入,AJAX 技術會讓搜尋引擎難以為網站建立索引。與 AJAX 相關的搜尋引擎問題主要有兩種:您必須確認搜尋引擎漫遊器可以看到您的內容,以及必須確定漫遊器能夠看到您的導覽方式並加以遵循。

儘管 Googlebot 非常瞭解 HTML 連結的結構,但在處理使用 JavaScript 進行導覽的網站時還是會發生問題。我們正致力於進一步瞭解 JavaScript 的運作方式,不過,如果要確保 Google 和其他搜尋引擎都可以檢索您建立的網站,建議還是要提供指向內容的 HTML 連結。

採用無障礙設計

我們鼓勵網站擁有者將製作網頁的重心放在滿足使用者,不要只著眼在搜尋引擎。設計 AJAX 網站時,請考慮使用者的需求,並留意有些使用者可能會使用不支援 JavaScript 的瀏覽器,例如螢幕閱讀器或行動裝置。測試網站無障礙程度最簡單的方法之一,是在預覽前先關閉瀏覽器的 JavaScript 功能,或使用 Lynx 這類純文字瀏覽器來檢視。以純文字來檢視網站也可協助您識別 Googlebot 可能難以辨識的其他內容,例如內嵌在圖片或 Flash 中的文字

避免使用 iframe,或者是個別連結至其內容

透過 iframe 顯示的內容可能無法編入索引,因此也無法出現在 Google 搜尋結果中。我們建議您盡量不要使用 iFrame 來顯示內容,如果一定要這麼做,請務必另外提供可連至 iframe 顯示內容的文字版連結,讓 Googlebot 能夠檢索並將此內容編入索引。

採用漸進增強的開發策略

如果要從頭開始設計網站,建議您只使用 HTML 來建立網站的架構和導覽功能,完成網站的網頁、連結和內容之後,再使用 AJAX 來美化外觀和介面。Googlebot 會很樂意處理 HTML,而使用新型瀏覽器的使用者也可以盡享 AJAX 帶來的視覺享受。

當然,有一些連結可能需要使用 JavaScript 來提供 AJAX 功能,網頁程式開發人員 Jeremy Keith 提出了一項叫做 Hijax 的技術,可讓 AJAX 和靜態連結同時存在。

在建立連結時將連結格式化,使其在提供靜態連結的同時,也會呼叫 JavaScript 函式。這樣一來,您就可以為 JavaScript 使用者提供 AJAX 功能,而非 JavaScript 使用者則會忽略該指令碼而連至靜態連結。例如:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

您會注意到,靜態連結的網址使用參數 ?foo=32,而非 AJAX 程式碼使用的片段 #foo=32。這點非常重要,因為搜尋引擎能夠辨識網址參數,但通常會忽略片段。而您現在提供了靜態連結,使用者和搜尋引擎就可以正確連結到他們想要共用或參照的內容。

雖然我們不斷致力於改善檢索功能,但強烈建議您使用 HTML 連結來協助我們 (以及其他搜尋引擎、行動裝置和使用者) 能夠完整瞭解您網站的架構。

遵循指南的規定

除了上述提示外,建議您同時參閱我們的網站管理員指南,進一步瞭解如何讓 Google 和使用者都易於瀏覽您的網站。指南中也舉出一些應避免的做法,包括幕後 JavaScript 重新導向。請記得最主要的原則:儘管您可以依據使用者具備的功能來提供不同的體驗,但提供的內容應該一致。舉例來說,假設我們替偉士的倉鼠農場建立了一個網頁。網頁的最上方是標題「偉士的倉鼠農場」,標題下方則是由 AJAX 技術提供的新進倉鼠投影片。關閉同一個網頁上的 JavaScript 後,應該要能顯示下列額外文字:

偉士的倉鼠農場:倉鼠、最佳倉鼠、便宜倉鼠、免費倉鼠、寵物、農場、倉鼠培育者、會跳舞的倉鼠、鼠類、最佳倉鼠資源、寵物玩具、跳舞課程、可愛、倉鼠特技、寵物食物、倉鼠產地、倉鼠旅館、倉鼠生日禮物建議和其他服務!

不論瀏覽器是否啟用 JavaScript,建議您都顯示相同的文字,而最佳的方式是提供 HTML 版本的投影播放給非 JavaScript 使用者。如要進一步瞭解隱藏文字,請參閱這篇文章