單頁(yè)面應(yīng)用程序?qū)嶋H上將視圖呈現(xiàn)從服務(wù)器傳輸?shù)綖g覽器。服務(wù)器僅提供JSON格式數(shù)據(jù)，視圖和內(nèi)容由本地JavaScript組織和呈現(xiàn)。搜索搜索引擎抓取的內(nèi)容需要完整的HTML和內(nèi)容，單頁(yè)面應(yīng)用程序架構(gòu)網(wǎng)站，并且不支持搜索。

如果網(wǎng)站的用戶(hù)體驗(yàn)和搜索友好，如果我們有更好的體驗(yàn)和友好的搜索支持，這是一把雙刃劍。

單頁(yè)面應(yīng)用程序只有一頁(yè)。視圖的變化通常由路線驅(qū)動(dòng)。首先，我們來(lái)談?wù)剢雾?yè)應(yīng)用程序的URL中的＃。許多使用單位結(jié)構(gòu)網(wǎng)站的URL出現(xiàn)。

##是瀏覽器URL中的錨點(diǎn)。當(dāng)前頁(yè)面更改##參數(shù)時(shí)，頁(yè)面將跳轉(zhuǎn)到錨點(diǎn)的位置。通過(guò)JavaScript，我們可以在##：

在##之后更改參數(shù)后，頁(yè)面不會(huì)重載，因此大多數(shù)單頁(yè)架構(gòu)網(wǎng)站使用URL中的##作為當(dāng)前視圖的URL地址，例如：

Backbone.js通過(guò)更改＃參數(shù)來(lái)組織視圖。有一個(gè)演示可用于直觀地體驗(yàn)URL更改。

閱讀本演示后，您可能會(huì)發(fā)現(xiàn)熟悉的符號(hào)＃!這是Twitter在URL上使用的。此徽標(biāo)由Google提出（AJAX抓取：網(wǎng)站網(wǎng)站管理員和開(kāi)發(fā)者指南1）：

由于復(fù)雜的單頁(yè)架構(gòu)頁(yè)面很難被Google抓取，因此為開(kāi)發(fā)人員開(kāi)發(fā)了一個(gè)規(guī)范：

_escaped_fragment_此參數(shù)是Google指定的命名。如果開(kāi)發(fā)人員想要向Google提交網(wǎng)站內(nèi)容，則必須使用此參數(shù)生成靜態(tài)頁(yè)面。

根據(jù)上面的演示，我只想舉例說(shuō)明Google如何抓取頁(yè)面:

http://119.28.4.22/?escapedfragment _=/detail/1

因此，Server需要為Google抓取生成靜態(tài)內(nèi)容。

以下是單頁(yè)架構(gòu)的簡(jiǎn)要介紹。如果爬網(wǎng)程序訪問(wèn)根目錄，則配置服務(wù)器端路由。

當(dāng)Google訪問(wèn)119.28.4.22/#!/detail/1時(shí)，它將自動(dòng)轉(zhuǎn)換為http://119.28.4.22/?_escaped_fragment_=/detail/1，以Nginx為例：

/api是后臺(tái)服務(wù)的接口。 Nodejs用作示例。代理設(shè)置如下：

這樣，我們將重寫(xiě)Google對(duì)/api接口的訪問(wèn)權(quán)限，然后在服務(wù)器的/api處理請(qǐng)求中輸出靜態(tài)內(nèi)容。

Gogole的規(guī)范必須具有站點(diǎn)地圖支持，因?yàn)樗梢杂糜趩雾?yè)架構(gòu)站點(diǎn)，索引頁(yè)面也是JavaScript呈現(xiàn)的。提交站點(diǎn)地圖時(shí)，您無(wú)需關(guān)注參數(shù)名稱(chēng)_escaped_fragment_，只需提交帶有哈希符號(hào)的URL，例如：

技術(shù)趨勢(shì)的步伐很快，單頁(yè)應(yīng)用程序，URL散列和渲染方法實(shí)際上已經(jīng)流行了很長(zhǎng)時(shí)間。對(duì)于許多具有良好數(shù)據(jù)的外國(guó)用戶(hù)，開(kāi)發(fā)人員將選擇HTML5 History API的pushstate功能。丟棄＃！在URL中。但是，網(wǎng)站，＃在IE6和7等低端瀏覽器中更受歡迎，可以非常兼容。關(guān)于使用HTML5 History API構(gòu)建單頁(yè)應(yīng)用程序，也歡迎討論。

參考文獻(xiàn)1:https://support.google.com/webmasters/answer/174992?hl=zh-Hans