單頁(yè)應(yīng)用（Single Page Application）的搜索引擎優(yōu)化

　　單頁(yè)應(yīng)用并不是一個(gè)全新發(fā)明的技術(shù)，而是隨著互聯(lián)網(wǎng)的發(fā)展，越來(lái)越受web開發(fā)者歡迎，單頁(yè)應(yīng)用的體驗(yàn)可以模擬原生應(yīng)用，一次開發(fā)，多端兼容，效果酷炫，節(jié)省成本。然而，由于單頁(yè)應(yīng)用基本全部使用JS，受制于SEO效果，目前國(guó)內(nèi)使用單頁(yè)應(yīng)用技術(shù)的網(wǎng)站還是少之又少。在已知使用單頁(yè)應(yīng)用的站點(diǎn)中，攜程旅行的SEO效果一直不錯(cuò)，那么今天，我們請(qǐng)攜程旅行SEO技術(shù)負(fù)責(zé)人安琦老師為我們分享了單頁(yè)應(yīng)用SEO解決四大方案，其中第四套是目前攜程旅行采用的技術(shù)方案，監(jiān)控?cái)?shù)據(jù)表明效果符合預(yù)期：

　　一、單頁(yè)應(yīng)用？此SPA不是彼SPA…

　　我們所說(shuō)的“單頁(yè)應(yīng)用”都為Single Page Application的直譯，基本市面上“單頁(yè)面應(yīng)用”、“One Page Application”、“SPA”及某些語(yǔ)境下的“webapp ” 都是指這一類移動(dòng)站點(diǎn)。

　　那么典型的SPA是什么樣子？我們用手機(jī)看看這條URL，http://cc-ng-z.azurewebsites.net/，可以衍生想象一下乘以N倍的：切換頁(yè)面無(wú)需加載的效果，HTML和JS無(wú)法比擬的動(dòng)畫，以及對(duì)原生APP的追求……

　　*案例采用了angularJS這個(gè)鼎鼎大名的框架

　　關(guān)于HTML5及單頁(yè)應(yīng)用的處境，推薦以下兩篇文章，第二篇實(shí)際上是百度UMX寫的，但是現(xiàn)在原文刪掉了，可以對(duì)自己的移動(dòng)站點(diǎn)在技術(shù)架構(gòu)上有個(gè)抉擇和處理：

　　HTML5移動(dòng)應(yīng)用開發(fā)的生態(tài)環(huán)境簡(jiǎn)介

　　論Web App、Hybrid App以及Native App的設(shè)計(jì)差異

　　二，高科技永遠(yuǎn)連累我們干苦力的

　　為什么這么寫，因?yàn)镾PA對(duì)SEO損傷很大，非常大。

　　優(yōu)點(diǎn)當(dāng)然毋庸置疑：效果酷炫，我在視覺和產(chǎn)品面前無(wú)從反駁；性能高速度快，全JS嘛當(dāng)然快，我在運(yùn)維和產(chǎn)品面前無(wú)言以對(duì)；運(yùn)算分散，異步加載，又省硬件又省流量，我在開發(fā)和產(chǎn)品面前徹底投降；JS前后端，一個(gè)人干一個(gè)站的活兒——關(guān)于這一點(diǎn)，我在老板、HR和產(chǎn)品面前哭的像一個(gè)孩子。總之，在各路人馬的一番碾壓后，我手里的網(wǎng)站改版了，一個(gè)SPA誕生了。

　　問(wèn)題接踵而來(lái)：我發(fā)現(xiàn)所有頁(yè)面都變成了全JS生成；所有URL中參數(shù)前面都被#分割；第三方統(tǒng)計(jì)系統(tǒng)無(wú)法再正常工作；PC和移動(dòng)的適配正則全部失效了；所有人都高興了，只有你，做SEO的、做網(wǎng)站優(yōu)化的，欲哭無(wú)淚。

　　實(shí)際上我觀察下來(lái)，只要使用了SPA架構(gòu)的站點(diǎn)或多或少收到傷害，當(dāng)看到有些大站點(diǎn)沒做處理，只有可能搜索對(duì)于他們是個(gè)微不足道的渠道，比如錘子手機(jī)官網(wǎng)甚至不可思議地在PC站點(diǎn)上使用了類似架構(gòu)，我相信他們的索引是有點(diǎn)問(wèn)題的。這讓我想到知乎上一個(gè)問(wèn)題，說(shuō)AMAZON的URL那么亂（當(dāng)時(shí)）是因?yàn)樗麄儾蛔⒅豐EO嗎？答案是不是，是他們更注重tracking。同理，SPA帶來(lái)的優(yōu)點(diǎn)勝過(guò)SEO，我被PK掉了。

　　三，求人不如求己

　　在SPA項(xiàng)目面前，我發(fā)現(xiàn)我被放在了所有人的對(duì)立面，無(wú)法抗拒這種時(shí)髦架構(gòu)的上線，當(dāng)然不得不說(shuō)效果確實(shí)比WAP即視感的站點(diǎn)高端和好用太多，不要螳臂當(dāng)車逆歷史車輪而動(dòng)。既然反抗也很痛，那么享受吧！我知道，我還和搜索引擎在一起；老板要的是解決方案，當(dāng)然回滾這種方案會(huì)讓我先滾。

　　讓我們看看一個(gè)典型的SPA網(wǎng)站架構(gòu)，和傳統(tǒng)的服務(wù)端生成內(nèi)容不同，在傳統(tǒng)的網(wǎng)站，當(dāng)你發(fā)起請(qǐng)求的時(shí)候，頁(yè)面的組裝是在服務(wù)器上完成的，反饋給瀏覽器的是已經(jīng)完成組裝的HTML內(nèi)容；而之于SPA，服務(wù)端負(fù)責(zé)了數(shù)據(jù)和素材的存儲(chǔ)，頁(yè)面的邏輯執(zhí)行和組裝是在瀏覽器上通過(guò)Javascript完成和呈現(xiàn)的，這也就意味著，SPA不需要請(qǐng)求→接受、請(qǐng)求→接受、請(qǐng)求→接受、請(qǐng)求→接受這樣玩了。完全憑借本地?cái)?shù)據(jù)，即可完成基本的頁(yè)面請(qǐng)求和訪問(wèn)。

　　基于此，當(dāng)某人需要像APP那樣切換頁(yè)面但不刷新，并要在此基礎(chǔ)上做文章時(shí)，#(井號(hào))這個(gè)奇葩的符號(hào)粉墨登場(chǎng)，完成了“又要本地傳輸數(shù)據(jù)又不需要刷新頁(yè)面”這個(gè)奇葩需求的歷史任務(wù)，給單頁(yè)應(yīng)用的可抓取性重重一擊。整個(gè)SPA的網(wǎng)站，URL不可抓取，頁(yè)面內(nèi)容不可抓取，糟透了。

　　解決思路倒也簡(jiǎn)單，圍繞全JS和URL可用解決問(wèn)題。