AJAX的內(nèi)容怎么讓搜索引擎抓取-創(chuàng)新互聯(lián)

AJAX的內(nèi)容怎么讓搜索引擎抓??？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

目前創(chuàng)新互聯(lián)建站已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、株洲網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

越來越多的網(wǎng)站，開始采用"單頁面結(jié)構(gòu)"（Single-page application）。

整個(gè)網(wǎng)站只有一張網(wǎng)頁，采用Ajax技術(shù)，根據(jù)用戶的輸入，加載不同的內(nèi)容。

這種做法的好處是用戶體驗(yàn)好、節(jié)省流量，缺點(diǎn)是AJAX內(nèi)容無法被搜索引擎抓取。舉例來說，你有一個(gè)網(wǎng)站。


http://example.com 　　

用戶通過井號(hào)結(jié)構(gòu)的URL，看到不同的內(nèi)容。

http://example.com#1　　http://example.com#2　　http://example.com#3 　　

但是，搜索引擎只抓取example.com，不會(huì)理會(huì)井號(hào)，因此也就無法索引內(nèi)容。

為了解決這個(gè)問題，Google提出了"井號(hào)+感嘆號(hào)"的結(jié)構(gòu)。

http://example.com#!1　　

當(dāng)Google發(fā)現(xiàn)上面這樣的URL，就自動(dòng)抓取另一個(gè)網(wǎng)址：

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

只要你把AJAX內(nèi)容放在這個(gè)網(wǎng)址，Google就會(huì)收錄。但是問題是，"井號(hào)+感嘆號(hào)"非常難看且煩瑣。Twitter曾經(jīng)采用這種結(jié)構(gòu)，它把

http://twitter.com/ruanyf　　

改成

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

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

那么，有沒有什么方法，可以在保持比較直觀的URL的同時(shí)，還讓搜索引擎能夠抓取AJAX內(nèi)容？

我一直以為沒有辦法做到，直到前兩天看到了Discourse創(chuàng)始人之一的Robin Ward的解決方法，不禁拍案叫絕。

AJAX的內(nèi)容怎么讓搜索引擎抓取

Discourse是一個(gè)論壇程序，嚴(yán)重依賴Ajax，但是又必須讓Google收錄內(nèi)容。它的解決方法就是放棄井號(hào)結(jié)構(gòu)，采用 History API。

所謂 History API，指的是不刷新頁面的情況下，改變?yōu)g覽器地址欄顯示的URL(準(zhǔn)確說，是改變網(wǎng)頁的當(dāng)前狀態(tài))。這里有一個(gè)例子，你點(diǎn)擊上方的按鈕，開始播放音樂。然后，再點(diǎn)擊下面的鏈接，看看發(fā)生了什么事？

AJAX的內(nèi)容怎么讓搜索引擎抓取

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

History API 的詳細(xì)介紹，超出這篇文章的范圍。這里只簡(jiǎn)單說，它的作用就是在瀏覽器的History對(duì)象中，添加一條記錄。

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

上面這行命令，可以讓地址欄出現(xiàn)新的URL。History對(duì)象的pushState方法接受三個(gè)參數(shù)，新的URL就是第三個(gè)參數(shù)，前兩個(gè)參數(shù)都可以是null。

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

目前，各大瀏覽器都支持這個(gè)方法：Chrome（26.0+），F(xiàn)irefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。

下面就是Robin Ward的方法。

首先，用History API替代井號(hào)結(jié)構(gòu)，讓每個(gè)井號(hào)都變成正常路徑的URL，這樣搜索引擎就會(huì)抓取每一個(gè)網(wǎng)頁。

example.com/1　　example.com/2　　example.com/3　　

然后，定義一個(gè)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();
});　　

還要考慮到用戶點(diǎn)擊瀏覽器的"前進(jìn) / 后退"按鈕。這時(shí)會(huì)觸發(fā)History對(duì)象的popstate事件。

window.addEventListener('popstate', function(e) {    
anchorClick(location.pathname);  
 　　});

定義完上面三段代碼，就能在不刷新頁面的情況下，顯示正常路徑URL和AJAX內(nèi)容。

最后，設(shè)置服務(wù)器端。

因?yàn)椴皇褂镁?hào)結(jié)構(gòu)，每個(gè)URL都是一個(gè)不同的請(qǐng)求。所以，要求服務(wù)器端對(duì)所有這些請(qǐng)求，都返回如下結(jié)構(gòu)的網(wǎng)頁，防止出現(xiàn)404錯(cuò)誤。

<html>
<body>
　　<section id='container'></section>
　　<noscript>
　　　　... ...
 　　　　　　</noscript>
</body>
</html>

看完上述內(nèi)容，你們掌握AJAX的內(nèi)容怎么讓搜索引擎抓取的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前文章：AJAX的內(nèi)容怎么讓搜索引擎抓取-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article42/ddsshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、搜索引擎優(yōu)化、定制網(wǎng)站、App開發(fā)、網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名