如何讓搜索引擎抓取AJAX內容？

時間 2019-11-17

標籤如何搜索引擎抓取 ajax 內容欄目搜索引擎简体版

原文原文鏈接

愈來愈多的網站，開始採用"單頁面結構"（Single-page application）。javascript

整個網站只有一張網頁，採用Ajax技術，根據用戶的輸入，加載不一樣的內容。html

這種作法的好處是用戶體驗好、節省流量，缺點是AJAX內容沒法被搜索引擎抓取。舉例來講，你有一個網站。html5

　　http://example.comjava

用戶經過井號結構的URL，看到不一樣的內容。api

　　http://example.com#1瀏覽器

　　http://example.com#2服務器

　　http://example.com#3app

可是，搜索引擎只抓取example.com，不會理會井號，所以也就沒法索引內容。函數

爲了解決這個問題，Google提出了"井號+感嘆號"的結構。網站

　　http://example.com#!1

當Google發現上面這樣的URL，就自動抓取另外一個網址：

　　http://example.com/?_escaped_fragment_=1

只要你把AJAX內容放在這個網址，Google就會收錄。可是問題是，"井號+感嘆號"很是難看且煩瑣。Twitter曾經採用這種結構，它把

　　http://twitter.com/ruanyf

改爲

　　http://twitter.com/#!/ruanyf

結果用戶抱怨連連，只用了半年就廢除了。

那麼，有沒有什麼方法，能夠在保持比較直觀的URL的同時，還讓搜索引擎可以抓取AJAX內容？

我一直覺得沒有辦法作到，直到前兩天看到了Discourse創始人之一的Robin Ward的解決方法，不由拍案叫絕。

Discourse是一個論壇程序，嚴重依賴Ajax，可是又必須讓Google收錄內容。它的解決方法就是放棄井號結構，採用 History API。

所謂 History API，指的是不刷新頁面的狀況下，改變瀏覽器地址欄顯示的URL(準確說，是改變網頁的當前狀態)。這裏有一個例子，你點擊上方的按鈕，開始播放音樂。而後，再點擊下面的連接，看看發生了什麼事？

地址欄的URL變了，可是音樂播放沒有中斷！

History API 的詳細介紹，超出這篇文章的範圍。這裏只簡單說，它的做用就是在瀏覽器的History對象中，添加一條記錄。

　　window.history.pushState(state object, title, url);

上面這行命令，可讓地址欄出現新的URL。History對象的pushState方法接受三個參數，新的URL就是第三個參數，前兩個參數均可以是null。

　　window.history.pushState(null, null, newURL);

目前，各大瀏覽器都支持這個方法：Chrome（26.0+），Firefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。

下面就是Robin Ward的方法。

首先，用History API替代井號結構，讓每一個井號都變成正常路徑的URL，這樣搜索引擎就會抓取每個網頁。

　　example.com/1

　　example.com/2

　　example.com/3

而後，定義一個JavaScript函數，處理Ajax部分，根據網址抓取內容（假定使用jQuery）。

　　function anchorClick(link) { 　　　　var linkSplit = link.split('/').pop(); 　　　　$.get('api/' + linkSplit, function(data) { 　　　　　　$('#content').html(data); 　　　　}); 　　}

再定義鼠標的click事件。

　　$('#container').on('click', 'a', function(e) { 　　　　window.history.pushState(null, null, $(this).attr('href')); 　　　　anchorClick($(this).attr('href')); 　　　　e.preventDefault(); 　　});

還要考慮到用戶點擊瀏覽器的"前進 / 後退"按鈕。這時會觸發History對象的popstate事件。