如何讓搜索引擎抓取AJAX內(nèi)容解決方案

2020-03-22 20:31:34

字體：大中小

供稿：網(wǎng)友

越來越多的網(wǎng)站，開始采用"單頁面結(jié)構(gòu)"（Single-page application）。整個網(wǎng)站只有一張網(wǎng)頁，采用html' target='_blank'>Ajax技術(shù)，根據(jù)用戶的輸入，加載不同的內(nèi)容。這種做法的好處是用戶體驗好、節(jié)省流量，缺點是AJAX內(nèi)容無法被搜索引擎抓取。舉例來說，你有一個網(wǎng)站。 http://example.com 用戶通過井號結(jié)構(gòu)的URL，看到不同的內(nèi)容。 http://example.com#1 http://example.com#2 http://example.com#3 但是，搜索引擎只抓取example.com，不會理會井號，因此也就無法索引內(nèi)容。為了解決這個問題，Google提出了"井號+感嘆號"的結(jié)構(gòu)。 http://example.com#!1 當(dāng)Google發(fā)現(xiàn)上面這樣的URL，就自動抓取另一個網(wǎng)址： http://example.com/ _escaped_fragment_=1 只要你把AJAX內(nèi)容放在這個網(wǎng)址，Google就會收錄。但是問題是，"井號+感嘆號"非常難看且煩瑣。Twitter曾經(jīng)采用這種結(jié)構(gòu)，它把 http://twitter.com/ruanyf 改成 http://twitter.com/#!/ruanyf 結(jié)果用戶抱怨連連，只用了半年就廢除了。那么，有沒有什么方法，可以在保持比較直觀的URL的同時，還讓搜索引擎能夠抓取AJAX內(nèi)容？我一直以為沒有辦法做到，直到前兩天看到了Discourse創(chuàng)始人之一的Robin Ward的解決方法，不禁拍案叫絕。Discourse是一個論壇程序，嚴(yán)重依賴Ajax，但是又必須讓Google收錄內(nèi)容。它的解決方法就是放棄井號結(jié)構(gòu)，采用 History API。所謂 History API，指的是不刷新頁面的情況下，改變瀏覽器地址欄顯示的URL(準(zhǔn)確說，是改變網(wǎng)頁的當(dāng)前狀態(tài))。這里有一個例子，你點擊上方的按鈕，開始播放音樂。然后，再點擊下面的鏈接，看看發(fā)生了什么事？地址欄的URL變了，但是音樂播放沒有中斷！History API 的詳細(xì)介紹，超出這篇文章的范圍。這里只簡單說，它的作用就是在瀏覽器的History對象中，添加一條記錄。 window.history.pushState(state object, title, url); 上面這行命令，可以讓地址欄出現(xiàn)新的URL。History對象的pushState方法接受三個參數(shù)，新的URL就是第三個參數(shù)，前兩個參數(shù)都可以是null。 window.history.pushState(null, null, newURL); 目前，各大瀏覽器都支持這個方法：Chrome（26.0+），F(xiàn)irefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。下面就是Robin Ward的方法。首先，用History API替代井號結(jié)構(gòu)，讓每個井號都變成正常路徑的URL，這樣搜索引擎就會抓取每一個網(wǎng)頁。 example.com/1 example.com/2 example.com/3 然后，定義一個JavaScript函數(shù)，處理Ajax部分，根據(jù)網(wǎng)址抓取內(nèi)容（假定使用jQuery）。function anchorClick(link) {
var linkSplit = link.split('/').pop();
$.get('api/' + linkSplit, function(data) {
$('#content').html(data);
});
}再定義鼠標(biāo)的click事件。 $('#container').on('click', 'a', function(e) {
window.history.pushState(null, null, $(this).attr('href'));
anchorClick($(this).attr('href'));
e.preventDefault();
}); 還要考慮到用戶點擊瀏覽器的"前進(jìn) / 后退"按鈕。這時會觸發(fā)History對象的popstate事件。 window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});定義完上面三段代碼，就能在不刷新頁面的情況下，顯示正常路徑URL和AJAX內(nèi)容。最后，設(shè)置服務(wù)器端。因為不使用井號結(jié)構(gòu)，每個URL都是一個不同的請求。所以，要求服務(wù)器端對所有這些請求，都返回如下結(jié)構(gòu)的網(wǎng)頁，防止出現(xiàn)404錯誤。 html
body
section id='container' /section
noscript
... ...
/noscript
/body
/html 仔細(xì)看上面這段代碼，你會發(fā)現(xiàn)有一個noscript標(biāo)簽，這就是奧妙所在。我們把所有要讓搜索引擎收錄的內(nèi)容，都放在noscript標(biāo)簽之中。這樣的話，用戶依然可以執(zhí)行AJAX操作，不用刷新頁面，但是搜索引擎會收錄每個網(wǎng)頁的主要內(nèi)容！PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：gbk和gb2312的區(qū)別有哪些？（總結(jié)）

下一篇：備案小知識：個人網(wǎng)站怎么備案？