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

　　一高效流通、單頁應(yīng)用?此SPA不是彼SPA…

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

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

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

　　關(guān)于HTML5及單頁應(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)品面前無從反駁;性能高速度快重要作用，全JS嘛當(dāng)然快，我在運(yùn)維和產(chǎn)品面前無言以對(duì);運(yùn)算分散最為顯著，異步加載尤為突出，又省硬件又省流量，我在開發(fā)和產(chǎn)品面前徹底投降;JS前后端環境，一個(gè)人干一個(gè)站的活兒——關(guān)于這一點(diǎn)空間載體，我在老板、HR和產(chǎn)品面前哭的像一個(gè)孩子相對簡便≈匾M成部分？傊诟髀啡笋R的一番碾壓后合作，我手里的網(wǎng)站改版了勃勃生機，一個(gè)SPA誕生了。

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

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

　　三，求人不如求己

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

　　讓我們看看一個(gè)典型的SPA網(wǎng)站架構(gòu)seo單頁面生成軟件，和傳統(tǒng)的服務(wù)端生成內(nèi)容不同先進水平，在傳統(tǒng)的網(wǎng)站便利性，當(dāng)你發(fā)起請(qǐng)求的時(shí)候，頁面的組裝是在服務(wù)器上完成的重要平臺，反饋給瀏覽器的是已經(jīng)完成組裝的HTML內(nèi)容;而之于SPA緊迫性，服務(wù)端負(fù)責(zé)了數(shù)據(jù)和素材的存儲(chǔ)，頁面的邏輯執(zhí)行和組裝是在瀏覽器上通過Javascript完成和呈現(xiàn)的更適合，這也就意味著聽得懂，SPA不需要請(qǐng)求→接受、請(qǐng)求→接受高質量發展、請(qǐng)求→接受全方位、請(qǐng)求→接受這樣玩了。完全憑借本地?cái)?shù)據(jù)影響力範圍，即可完成基本的頁面請(qǐng)求和訪問大局。

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

　　解決思路倒也簡(jiǎn)單探索，圍繞全JS和URL可用解決問題堅持先行。

　　【方案一：盡人皆知的Google抓取AJAX方案】

　　如何讓搜索引擎抓取AJAX內(nèi)容?

　　A proposal for making AJAX crawlable

　　Google給了官方指導(dǎo)，并在Twitter上做了個(gè)最大的case滿意度，但后來T家放棄了情況較常見，我想更多是T戰(zhàn)略上的放棄。騰訊的ISUX博客上也曾經(jīng)推廣過這種方式，居然是在2014年體製，如下文：?jiǎn)雾搼?yīng)用的SEO淺談

　　總的來說構建，這種方案可以兼容Google，如果資源實(shí)在有限探討，有著能抓多少是多少的心態(tài)單頁面網(wǎng)站自動(dòng)生成助手，可以試試高效流通。主要不幸的是調解製度，5年前Google已和我們?cè)僖娏?/p>

　　【方案二：再做一個(gè)服務(wù)端生成內(nèi)容的鏡像網(wǎng)站】

　　說實(shí)話，量級(jí)不大的網(wǎng)站并且極度依賴搜索引擎這個(gè)渠道的情況下功能，這不失為一種方案應用的因素之一，第一，蜘蛛絕對(duì)可抓取;第二預期，URL規(guī)則的完全可控(要知道現(xiàn)在流行的路由方式開展試點，在配置URL規(guī)則上相對(duì)于URLrewrite是有天生缺陷的);第三，SPA模式URL衍生的所有問題不再是問題共同。

　　但是面臨的問題也令我望而卻步：我要說服team再維護(hù)一個(gè)一模一樣的網(wǎng)站推進一步，不是做完了事，是維護(hù)簡單化，這意味著修Bug要有資源修力度，改版要有資源改(能說服自己搜索進(jìn)來然后點(diǎn)兩下看到的網(wǎng)站不一樣嗎?)、所有相關(guān)功能的測(cè)試系統性、發(fā)布勇探新路、常規(guī)測(cè)試，都要耦合在一起傳遞，當(dāng)站點(diǎn)大到一定程度試驗，流程前所未有地臃腫，推進(jìn)無休止的爭(zhēng)吵開展攻關合作，所有煩惱包圍著我製度保障，讓我想靜靜。我預(yù)計(jì)自己會(huì)累垮的有效手段，即使搞定了所有的資源進行部署，網(wǎng)站優(yōu)化人員自身也將面臨著非常繁重的工作，兩個(gè)網(wǎng)站怎么融合應用情況，適配跳轉(zhuǎn)怎么設(shè)定保護好，是否需要主動(dòng)判斷蜘蛛展現(xiàn)不同的內(nèi)容，內(nèi)鏈入口怎么放表現，都是耦合特點，且是硬耦合，網(wǎng)站大了頁面多了單網(wǎng)頁生成工具，越做耦合越多和諧共生，以后一碰就是坑質生產力。