越來(lái)越多的網(wǎng)站,開(kāi)始采用"單頁(yè)面結(jié)構(gòu)"(Single-page application)。
整個(gè)網(wǎng)站只有一張網(wǎng)頁(yè),采用Ajax技術(shù),根據(jù)用戶(hù)的輸入,加載不同的內(nèi)容。
這種做法的好處是用戶(hù)體驗(yàn)好、節(jié)省流量,缺點(diǎn)是AJAX內(nèi)容無(wú)法被搜索引擎抓取。舉例來(lái)說(shuō),你有一個(gè)網(wǎng)站。
http://example.com用戶(hù)通過(guò)井號(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),因此也就無(wú)法索引內(nèi)容。
為了解決這個(gè)問(wèn)題,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ì)收錄。但是問(wèn)題是,"井號(hào)+感嘆號(hào)"非常難看且煩瑣。Twitter曾經(jīng)采用這種結(jié)構(gòu),它把
http://twitter.com/ruanyf改成
http://twitter.com/#!/ruanyf結(jié)果用戶(hù)抱怨連連,只用了半年就廢除了。
那么,有沒(méi)有什么方法,可以在保持比較直觀的URL的同時(shí),還讓搜索引擎能夠抓取AJAX內(nèi)容?
我一直以為沒(méi)有辦法做到,直到前兩天看到了Discourse創(chuàng)始人之一的Robin Ward的解決方法,不禁拍案叫絕。
Discourse是一個(gè)論壇程序,嚴(yán)重依賴(lài)Ajax,但是又必須讓Google收錄內(nèi)容。它的解決方法就是放棄井號(hào)結(jié)構(gòu),采用 History API。
所謂 History API,指的是不刷新頁(yè)面的情況下,改變?yōu)g覽器地址欄顯示的URL(準(zhǔn)確說(shuō),是改變網(wǎng)頁(yè)的當(dāng)前狀態(tài))。這里有一個(gè)例子,你點(diǎn)擊上方的按鈕,開(kāi)始播放音樂(lè)。然后,再點(diǎn)擊下面的鏈接,看看發(fā)生了什么事?
地址欄的URL變了,但是音樂(lè)播放沒(méi)有中斷!
History API 的詳細(xì)介紹,超出這篇文章的范圍。這里只簡(jiǎn)單說(shuō),它的作用就是在瀏覽器的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)頁(yè)。
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(); });還要考慮到用戶(hù)點(diǎn)擊瀏覽器的"前進(jìn) / 后退"按鈕。這時(shí)會(huì)觸發(fā)History對(duì)象的popstate事件。
window.addEventListener('popstate', function(e) { anchorClick(location.pathname); });定義完上面三段代碼,就能在不刷新頁(yè)面的情況下,顯示正常路徑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)頁(yè),防止出現(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)簽之中。這樣的話(huà),用戶(hù)依然可以執(zhí)行AJAX操作,不用刷新頁(yè)面,但是搜索引擎會(huì)收錄每個(gè)網(wǎng)頁(yè)的主要內(nèi)容!
-- 阮一峰
轉(zhuǎn)載請(qǐng)保留原文地址: http://m.448gfe.cn/show-395.html