客服
如何讓搜索引擎抓取AJAX內容？
越來(lái)越多的網(wǎng)站，開(kāi)始采用"單頁(yè)面結構"（Single-page application）。
整個(gè)網(wǎng)站只有一張網(wǎng)頁(yè)，采用Ajax技術(shù)，根據用戶(hù)的輸入，加載不同的內容。
這種做法的好處是用戶(hù)體驗好、節省流量，缺點(diǎn)是AJAX內容無(wú)法被搜索引擎抓取。舉例來(lái)說(shuō)，你有一個(gè)網(wǎng)站。
http://example.com
用戶(hù)通過(guò)井號結構的URL，看到不同的內容。
http://example.com#1 http://example.com#2 http://example.com#3
但是，搜索引擎只抓取example.com，不會(huì )理會(huì )井號，因此也就無(wú)法索引內容。
為了解決這個(gè)問(wèn)題，Google提出了"井號+感嘆號"的結構。
http://example.com#!1
當Google發(fā)現上面這樣的URL，就自動(dòng)抓取另一個(gè)網(wǎng)址：
http://example.com/?_escaped_fragment_=1
只要你把AJAX內容放在這個(gè)網(wǎng)址，Google就會(huì )收錄。但是問(wèn)題是，"井號+感嘆號"非常難看且煩瑣。Twitter曾經(jīng)采用這種結構，它把
http://twitter.com/ruanyf
改成
http://twitter.com/#!/ruanyf
結果用戶(hù)抱怨連連，只用了半年就廢除了。
那么，有沒(méi)有什么方法，可以在保持比較直觀(guān)的URL的同時(shí)，還讓搜索引擎能夠抓取AJAX內容？西安做網(wǎng)站推薦閱讀>>> 織夢(mèng)dedecms 首頁(yè)列表點(diǎn)擊加載更多AJAX實(shí)現瀑布流效果，
我一直以為沒(méi)有辦法做到，直到前兩天看到了Discourse創(chuàng )始人之一的Robin Ward的解決方法，不禁拍案叫絕。
Discourse是一個(gè)論壇程序，嚴重依賴(lài)Ajax，但是又必須讓Google收錄內容。它的解決方法就是放棄井號結構，采用 History API。西安做網(wǎng)站推薦閱讀>>> 輔助移動(dòng)站點(diǎn)被百度抓取的工具——移動(dòng)化培訓長(cháng)沙視頻8，
所謂 History API，指的是不刷新頁(yè)面的情況下，改變?yōu)g覽器地址欄顯示的URL(準確說(shuō)，是改變網(wǎng)頁(yè)的當前狀態(tài))。這里有一個(gè)例子，你點(diǎn)擊上方的按鈕，開(kāi)始播放音樂(lè )。然后，再點(diǎn)擊下面的鏈接，看看發(fā)生了什么事？
地址欄的URL變了，但是音樂(lè )播放沒(méi)有中斷！
History API 的詳細介紹，超出這篇文章的范圍。這里只簡(jiǎn)單說(shuō)，它的作用就是在瀏覽器的History對象中，添加一條記錄。
window.history.pushState(state object, title, url);
上面這行命令，可以讓地址欄出現新的URL。History對象的pushState方法接受三個(gè)參數，新的URL就是第三個(gè)參數，前兩個(gè)參數都可以是null。
window.history.pushState(null, null, newURL);
目前，各大瀏覽器都支持這個(gè)方法：Chrome（26.0+），Firefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。
下面就是Robin Ward的方法。
首先，用History API替代井號結構，讓每個(gè)井號都變成正常路徑的URL，這樣搜索引擎就會(huì )抓取每一個(gè)網(wǎng)頁(yè)。
example.com/1 example.com/2 example.com/3
然后，定義一個(gè)JavaScript函數，處理Ajax部分，根據網(wǎng)址抓取內容（假定使用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(); });
還要考慮到用戶(hù)點(diǎn)擊瀏覽器的"前進(jìn) / 后退"按鈕。這時(shí)會(huì )觸發(fā)History對象的popstate事件。
window.addEventListener('popstate', function(e) { anchorClick(location.pathname); });
定義完上面三段代碼，就能在不刷新頁(yè)面的情況下，顯示正常路徑URL和AJAX內容。
最后，設置服務(wù)器端。
因為不使用井號結構，每個(gè)URL都是一個(gè)不同的請求。所以，要求服務(wù)器端對所有這些請求，都返回如下結構的網(wǎng)頁(yè)，防止出現404錯誤。西安網(wǎng)站建設推薦閱讀>>> 如何查看網(wǎng)站被百度抓取的情況？，
<html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>
仔細看上面這段代碼，你會(huì )發(fā)現有一個(gè)noscript標簽，這就是奧妙所在。
我們把所有要讓搜索引擎收錄的內容，都放在noscript標簽之中。這樣的話(huà)，用戶(hù)依然可以執行AJAX操作，不用刷新頁(yè)面，但是搜索引擎會(huì )收錄每個(gè)網(wǎng)頁(yè)的主要內容！
-- 阮一峰
相關(guān)文章：
-
西安網(wǎng)站建設_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò )公司...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統莫過(guò)于自助建站系統，市場(chǎng)上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...
-
現在想做一個(gè)網(wǎng)站成本很低了，買(mǎi)個(gè)域名，買(mǎi)個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設程序就可以開(kāi)始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng )建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設如何才能夠在眾多的同類(lèi)當中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設人員一直在思考的一個(gè)問(wèn)...
-
現在越來(lái)越多的企業(yè)重視網(wǎng)站的運營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò )小編認為沒(méi)用永恒不變得，而且要根據企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運營(yíng)推廣的...
-
隨著(zhù)互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開(kāi)網(wǎng)絡(luò )，而網(wǎng)站是網(wǎng)絡(luò )的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò )是由各種各樣的網(wǎng)站組成的，當下，網(wǎng)站是每個(gè)企業(yè)的標配，很多個(gè)人都有自己的網(wǎng)站，...
-
網(wǎng)站現在是一個(gè)企業(yè)的標配，很多沒(méi)有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用，那么今天西安蟠龍小編總結一下網(wǎng)站對企業(yè)都有哪些好處，希望看完之后您對網(wǎng)站有更深一層的認識。 一、低...
-
現在網(wǎng)站對一個(gè)企業(yè)越來(lái)越重要了，網(wǎng)站不僅是一個(gè)公司必備的名片，而且有利于提升企業(yè)的品牌形象，低成本擴大公司銷(xiāo)售的一個(gè)重要渠道，可以將公司的業(yè)務(wù)和產(chǎn)品推向全國，那么公司想...
-
在互聯(lián)網(wǎng)發(fā)展至今天，網(wǎng)站對于一個(gè)企業(yè)越來(lái)越重要，網(wǎng)站不僅能有效的提升企業(yè)品牌知名度，企業(yè)形象，也是一個(gè)企業(yè)的有力的銷(xiāo)售渠道，網(wǎng)絡(luò )營(yíng)銷(xiāo)推廣做好了可以做全國的業(yè)務(wù)，那一個(gè)企...
-
隨著(zhù)互聯(lián)網(wǎng)發(fā)展的迅猛，網(wǎng)站建設市場(chǎng)競爭越來(lái)越大，魚(yú)龍混雜，出現智能建站、模板建站、定制建站等服務(wù)，很多朋友搞不清楚他們的區別，以及定制型網(wǎng)站有什么優(yōu)勢，今天西安蟠龍小編...