單頁應用如何解決 SEO ？

12-27

正在做一個網頁端為純Javascript的網站，邏輯很簡單，後台對於一切平台只提供API，不論是網站，APP，微信，全部使用同一套後台API，這樣很好管理

目前前端使用了Backbone + Underscore + jQuery，所有頁面內容，url變換等都是由javascript根據API發回的數據在用戶的瀏覽器里自動生成的，但是現在遇到了一個很大的問題就是無法SEO，很顯然Baidu不會看Javascript，那麼頁面對於它來說就是一個空洞洞的html和很多scirpt元素

關於這個問題在Stackoverflow上做了一些調查，也沒有什麼好的辦法，我並不希望在伺服器端額外花功夫走回動態頁面的老路，也有推薦使用phantom.js或者專門生成一些靜態頁面給搜索引擎看的

挺糾結應該怎麼搞的，知友們你們看怎麼辦？

利用後端渲染來解決
alloyteam的關於react後端渲染的文章：React伺服器端渲染實踐小結
還有vue2.0的後端渲染項目：GitHub - vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router vuex, with server-side rendering

至於backbone的解決方案暫時未知...

題主如果是做英文的話，google對ajax的支持是可以的，遵從google的ajax應用優化方案即可。參考鏈接：https://developers.google.com/webmasters/ajax-crawling/
如果是中文的話，呵呵呵

有人有時間，則搞大改，讓其支持直出（具體情況具體分析）。

沒人沒時間，則用phantomjs搞預渲染，或者連這個都沒時間弄的話，去接入http://prerender.io等預渲染服務。

反正SEO已經不再是SPA的攔路虎了

正巧看過一篇文章，正對題主的胃口，給題主分享一下！

所謂的單頁（Single Page Application）的應用[簡稱SPA]，是一種新興的頁面展示方式，這種方式通常採用HTML5等語言做出來的，像百度的siteapp就是一個非常典型的例子。

&是其標誌性的標註。

對於這種頁面來說，很多都是採用js等搜索引擎無法識別的技術來做的，所以百度是無法識別的，那麼這類型的網頁要怎麼做SEO呢？An7給我們介紹了一種非常好的方法，但是這種方法適用於大型網站，小型網站慎用。

最佳方案：用更高效的方式完成兩套頁面

簡單的架構圖，SPA這種架構，渲染是在客戶端（瀏覽器）完成的，大致流程如下

SPA簡單流程

蜘蛛無法執行JS，相應的頁面內容無從抓取，弊端還是那個弊端

但我們知道，傳統的服務端生成頁面，response里已經是伺服器渲染組裝好的HTML代碼，瀏覽器只負責正確地展現，蜘蛛負責正確的解析，所以，我們需要給蜘蛛渲染完成的HTML，那麼你的框架需要兼容如下流程的功能。

雙渲染的流程

我們看到，當訪問為SEO所需頁面的時候，數據傳輸到了SEO 伺服器完成渲染和組裝然後吐給瀏覽器和蜘蛛，那麼蜘蛛拿到的即是完全可見且融合了SPA的頁面——landing頁都是蜘蛛可見的，接下去用戶的點擊都是SPA的頁面。

需要注意的是，如果你是用URL來區分SPA架構與否，那麼內鏈及入口要全部使用SEO URL,只為用戶暴露SPA的鏈接，JS在這裡陰差陽錯地成為了優勢，那些SPA的鏈接將比較難被抓取的。

其實可以不使用URL來區分，延伸想想。

這樣一個流程，也無多少高精尖元素，其實只是「依照條件」增加了一個服務端自動渲染的步驟，在架構方案上再細細夯實，可以實現一套代碼兩處運行、SEO頁面可單獨自定義功能、、同一張landing人和蜘蛛沒有跳轉，沒有區別對待、全棧工程師的大量使用、SEO頁面永遠保持最新版等等省時省力的需求功能。

總之，如果你和我一樣，有文章前面部分的抱怨，SPA架構勢在必行，兩套頁面改版不能同步，單獨多做一套可抓取頁面沒有太多資源投入，與此同時還是想以比較保守的方式給蜘蛛展現網站的內容，那麼這個思路可以考慮，然後為自己量身定做。

關於單頁應用的網站優化，在實踐中我所經歷過的這些吧

優化不是按部就班，作為從業人員要審時度勢地採取不同方案，以結果為導向，上不了線，再好的優化也是個方案。

（轉載）

很多做網站優化的朋友可能想做單頁網站或者由於很多原因需要做單頁網站，但是這其中最令人擔心的就是這種只有一個頁面的網站如何才能做好SEO優化，使得網站不至於淹沒在中眾多網站之中。很多朋友可能認為單一頁面的網站很難做好SEO 優化工作，但是這並不意味著我們就該放棄優化。以下簡要給出三點理由：

1.有利於增加網站權重。因為單頁網站只有一個頁面，所以我們所有的內容以及建立的鏈接都是基於這個頁面而產生的，所有的反向鏈接都指向同一頁面、同一域名，這就賦予了網站很高的權重。

2.有利於網站的相關性。因為我們的所有內容都放在同一個頁面之下，頁面內容非常充實，關鍵字的相關性也會很大。搜索引擎演算法非常關注頁面內容與關鍵字是否具有相關性，所以這也是做單頁網站優化必要性的理由之一。

3.有利於搜索引擎的爬行。單頁網站的結構非常簡單，這在一定程度上為搜索引擎的爬取工作減輕了負擔。有了搜索引擎的爬取就可以為進一步的優化工作打下基礎。

單頁網站優化建議

1.定義區域性內容

我們可以先將頁面劃分為幾個特定的區域，將每一個區域作為一個單獨的頁面來做優化。為每一個區域選擇關鍵字、定義內容、設置各種標籤等。當然要記住，各個區域的關鍵字都應具有相關性，否則將會導致整個頁面的權重無法集中。

2.使用DIV分割區域

將你的每一個區域用DIV分割開來，這樣能夠使得網頁的結構更加清晰。雖然CSS id名稱並不是我們的SEO工作內容，但是這樣確實可以幫助我們更好地組織和管理網站。這種方法也可以適用於錨文本鏈接。如：

3.設置錨鏈接

搜索引擎都非常喜歡錨鏈接，特別是對於谷歌來說。與錨文本不同，錨鏈接能夠將用戶帶入同一頁面的特定區域。我們可以在每個區域設置特定的錨鏈接，正確導航用戶，方便用戶在同一頁面內找尋目標信息。如：

4.為每一區域設置H1標籤

通常情況我們只在一個頁面中最多設置一個H1標籤，但是在單頁網站中這可能有些不同。為每個區域設置一個H1標籤有利於突出頁面結構，能夠有助搜索引擎明白你的網站結構。但是要記住，每個區域設置一個H1標籤就可，切不可頻繁使用。

從長遠的角度來看，即使在網站優化開始階段只有一個頁面，最好能在以後擴展更多的頁面，成為多頁面網站。因為單頁面網站可能比較適合於早期做網站的朋友或者是一些特殊項目，隨著個人或者企業業務的擴大，我們不可能將所有的內容都集中在一個頁面上，因此發展多頁面網站才是長遠之計。繼續閱讀點擊http://www.yangdeyi.cc

當時我也是看過這篇文章後去做的單頁的SEO，後來成功了，正好可以回下帖。
單頁應用要採取特殊方式完成SEO的技術支持。本人開發了一個純JS網站，當時為了解決也是費了很多工夫Google了很多次。最終成功用代碼實現。說下思路：首先前端要採用history模式（HTML5 History API，目的是去掉#號，這是重要的開始！），一般用來寫單頁應用的框架都有這個模式。第二，要用後端做一套頁面，內容和對應的前端頁面一模一樣，即所謂靜態化，我用的sails框架即可實現這一點，主流的如Node.js的express框架也可以，php應該也行。第三，必須用nginx做代理跳轉，將搜索引擎識別出後流量引到後端的埠上，看到預先渲染給搜索引擎看的頁面，還有history模式自帶的404問題也需要在nginx里將404轉為index.html或者rewrite才可以。如果你要代碼的話，可以訪問我的網站http://www.itormore.com/mainshow/260。有完整代碼教程。（我是網站站長，有純JS網站開發問題可以交流）

新建一個網站端的頁面，判斷如果是網站端，就輸出這個頁面。

單做一個給搜索引擎看的頁面不知道行不行

我用了PhantomJS做預渲染，Google收錄完美，百度只收錄首頁。
貌似會被當作弊

把頁面關鍵內容收錄在 noscript 里？
峰哥有一篇文章也說到如何讓搜索引擎抓取AJAX內容？

我覺得有兩種辦法：1.使用重要頁面靜態頁面 2.非海外站點適用單做一套頁面給搜索引擎的方式，但是要保證另外一套搜索引擎絕對爬取不到，且兩套的URL一致。

雙頁面就好了！ http://www.corshop.com

單頁seo其實並沒有什麼難的，我覺得把握住以下幾個方向即可

1、首先從seo權重的角度去思考，單頁會喪失後續內容持續更新的大權重，所以要想辦法在其他權重提權，個人認為，單頁面內容構建是最重要的，你可以針對自己做的詞先百度一下看看排名靠前站點的內容在有針對性的設計自己的獨特內容，盡量不要和前面幾個站的內容一樣

2、單頁不像多頁面網站可以幫助百度索引伺服器更深入的理解你的網站，所以要把單頁面的語義做到極致，單頁面語義做到極致有兩方面，一方面是頁面標籤的部署，諸如TDK標籤、H標籤、strong標籤等使用，另外一個角度就是頁面關鍵詞密度，關鍵詞位置，關鍵詞距離的放置，除此還建議你在頁面盡量部署和你優化的詞有關的近義詞和相關詞來幫助索引伺服器基於你的頁面進行索引

3、頁面代碼盡量精簡，不要使用無關特效，特別是js這種能不用就不用，頁面要控制長度，太長的頁面百度爬蟲會截取，截取後的頁面可能會因為分析不到位導致頁面空短而不被蜘蛛爬取

4、除了語義個人認為就是鏈接了，鏈接分為站內鏈接和站外鏈接，站內鏈接因為是單頁所以可以圍繞你做的關鍵詞為錨文本，做單頁自身的鏈接指向到本頁，另外可以通過A標籤的name屬性在本頁設置對應錨區域，比如你的頁面做的關鍵詞是西安seo，你可以參考http://seo.xianseopeixun.com這個網站的方法來部署站內鏈接，在部署站外鏈接的時候，要注意錨文本一定和自己的詞相關，可適當添加友情鏈接

5、網站上線之後要吸引爬蟲快速爬取，你可以使用百度官方提供的站長工具，百度分享工具等吸引爬蟲快速爬取頁面，上面提到的這個網站也有對工具使用的詳細介紹

做好以上五個方面，就算是單頁，也是可以很好的被百度收錄並獲取不錯的排名，這些是本人的實戰經驗，你可以搜索西安seo,西安seo優化，上面提到的網站排名都不錯，而且網站只有一個頁面