單頁應用（Single Page Application）的搜索引擎優化

　　單頁應用并不是一個全新發明的技術，而是隨著互聯網的發展，越來越受web開發者歡迎，單頁應用的體驗可以模擬原生應用，一次開發，多端兼容，效果酷炫，節省成本。然而，由于單頁應用基本全部使用JS，受制于SEO效果，目前國內使用單頁應用技術的網站還是少之又少。在已知使用單頁應用的站點中，攜程旅行的SEO效果一直不錯，那么今天，我們請攜程旅行SEO技術負責人安琦老師為我們分享了單頁應用SEO解決四大方案，其中第四套是目前攜程旅行采用的技術方案，監控數據表明效果符合預期：

　　一、單頁應用？此SPA不是彼SPA…

　　我們所說的“單頁應用”都為Single Page Application的直譯，基本市面上“單頁面應用”、“One Page Application”、“SPA”及某些語境下的“webapp ” 都是指這一類移動站點。

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

　　*案例采用了angularJS這個鼎鼎大名的框架

　　關于HTML5及單頁應用的處境，推薦以下兩篇文章，第二篇實際上是百度UMX寫的，但是現在原文刪掉了，可以對自己的移動站點在技術架構上有個抉擇和處理：

　　HTML5移動應用開發的生態環境簡介

　　論Web App、Hybrid App以及Native App的設計差異

　　二，高科技永遠連累我們干苦力的

　　為什么這么寫，因為SPA對SEO損傷很大，非常大。

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

　　問題接踵而來：我發現所有頁面都變成了全JS生成；所有URL中參數前面都被#分割；第三方統計系統無法再正常工作；PC和移動的適配正則全部失效了；所有人都高興了，只有你，做SEO的、做網站優化的，欲哭無淚。

　　實際上我觀察下來，只要使用了SPA架構的站點或多或少收到傷害，當看到有些大站點沒做處理，只有可能搜索對于他們是個微不足道的渠道，比如錘子手機官網甚至不可思議地在PC站點上使用了類似架構，我相信他們的索引是有點問題的。這讓我想到知乎上一個問題，說AMAZON的URL那么亂（當時）是因為他們不注重SEO嗎？答案是不是，是他們更注重tracking。同理，SPA帶來的優點勝過SEO，我被PK掉了。

　　三，求人不如求己

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

　　讓我們看看一個典型的SPA網站架構，和傳統的服務端生成內容不同，在傳統的網站，當你發起請求的時候，頁面的組裝是在服務器上完成的，反饋給瀏覽器的是已經完成組裝的HTML內容；而之于SPA，服務端負責了數據和素材的存儲，頁面的邏輯執行和組裝是在瀏覽器上通過Javascript完成和呈現的，這也就意味著，SPA不需要請求→接受、請求→接受、請求→接受、請求→接受這樣玩了。完全憑借本地數據，即可完成基本的頁面請求和訪問。

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

　　解決思路倒也簡單，圍繞全JS和URL可用解決問題。