如何讓搜索引擎抓取AJAX內(nèi)容解決方案
越來越多的網(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的解決方法，不禁拍案叫絕。
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ā)生了什么事？
地址欄的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>仔細(xì)看上面這段代碼，你會(huì)發(fā)現(xiàn)有一個(gè)noscript標(biāo)簽，這就是奧妙所在。
我們把所有要讓搜索引擎收錄的內(nèi)容，都放在noscript標(biāo)簽之中。這樣的話，用戶依然可以執(zhí)行AJAX操作，不用刷新頁面，但是搜索引擎會(huì)收錄每個(gè)網(wǎng)頁的主要內(nèi)容！
- Ajax實(shí)現(xiàn)搜索引擎自動(dòng)補(bǔ)全功能
- 詳解js的延遲對(duì)象、跨域、模板引擎、彈出層、AJAX【附實(shí)例下載】
- JavaScript的History API使搜索引擎抓取AJAX內(nèi)容
- AJAX 支持搜索引擎問題分析
- 淺析ajax請(qǐng)求json數(shù)據(jù)并用js解析(示例分析)
- Ajax請(qǐng)求中的異步與同步，需要注意的地方說明
- AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法
- 原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼
- Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理（ajax異步下載文件）的簡(jiǎn)單方法
- Ajax引擎 ajax請(qǐng)求步驟詳細(xì)代碼
相關(guān)文章
這篇文章主要介紹了完整刪除ecshop中獲取店鋪信息的API的步鄹，十分的詳細(xì)，推薦給小伙伴們。2014-12-12
這篇文章主要介紹了php自定義session示例,需要的朋友可以參考下2014-04-04
CI框架無限級(jí)分類+遞歸的實(shí)現(xiàn)代碼
CodeIgniter是一個(gè)輕量級(jí)但功能強(qiáng)大的PHP框架，基于MVC設(shè)計(jì)模式，提供了一套豐富的類庫，簡(jiǎn)單易學(xué)，高效實(shí)用。下面給大家介紹CI框架無限級(jí)分類+遞歸的實(shí)現(xiàn)代碼，感興趣的朋友參考下吧2016-11-11
Laravel中數(shù)據(jù)遷移與數(shù)據(jù)填充的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于Laravel中數(shù)據(jù)遷移與數(shù)據(jù)填充的相關(guān)資料，文中通過示例代碼給大家詳細(xì)介紹了實(shí)現(xiàn)的步驟，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
centos7上編譯安裝php7以php-fpm方式連接apache
這篇文章主要介紹了centos7上編譯安裝php7以php-fpm方式連接apache的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Yii實(shí)現(xiàn)多按鈕保存與提交且不沖突的方法,是表單制作中非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
PHP實(shí)現(xiàn)財(cái)務(wù)審核通過后返現(xiàn)金額到客戶的功能
有這么一個(gè)返現(xiàn)的系統(tǒng)，當(dāng)前端客戶發(fā)起提現(xiàn)的時(shí)候，后端就要通過審核這筆返現(xiàn)訂單，才可以返現(xiàn)到客戶的賬號(hào)里。這篇文章主要介紹了PHP實(shí)現(xiàn)財(cái)務(wù)審核通過后返現(xiàn)金額到客戶 ,需要的朋友可以參考下2019-07-07
codeigniter使用技巧批量插入數(shù)據(jù)實(shí)例方法分享
CI批量插入數(shù)據(jù)，CodeIgniter是一個(gè)小巧但功能強(qiáng)大的 PHP 框架，作為一個(gè)簡(jiǎn)單而“優(yōu)雅”的工具包，它可以為 PHP 程序員建立功能完善的 Web 應(yīng)用程序2013-12-12
這篇文章主要介紹了CentOS7編譯安裝php7.1的教程詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
php安裝xdebug/php安裝pear/phpunit詳解步驟(圖)
PHP環(huán)境中安裝pear、phpunit以及xdebug全攻略,大家參考使用吧2013-12-12