關於vue項目的seo問題

 不可否定的是，vue現在火。但是在實際項目中，特別是像一下交互網站，我們不可避免會考慮到的是seo問題，這直接關係到我們網站的排名，很多人說用vue搭建的網站不能做優化，那我們真的要放棄vue，放棄前後端分離開發麼？

        首先，可以肯定的是前後端分離不利於SEO，爲什麼呢？

        1.搜索引擎的基礎爬蟲的原理就是抓取你的url，然後獲取你的html源代碼並解析。 而你的頁面通常用了vue等js的數據綁定機制來展示頁面數據，爬蟲獲取到的html是你的模型頁面而不是最終數據的渲染頁面，所以說用js來渲染數據對seo並不友好。

        2.seo 本質是一個服務器向另一個服務器發起請求，解析請求內容。但一般來說搜索引擎是不回去執行請求到的js的。也就是說，如果一個單頁應用，html在服務器端還沒有渲染部分數據數據，在瀏覽器才渲染出數據，而搜索引擎請求到的html是沒有渲染數據的。 這樣就很不利於內容被搜索引擎搜索到。 所以服務端渲染就是儘量在服務器發送到瀏覽器前 頁面上就是有數據的。

        3.一般的數據邏輯操作是放在後端的。排序這個如果僅僅是幾條數據，前後端排序開起來是一樣的，如果是有1000條數據，前端要排序就要都請求過來。這樣顯然是不合理的。

        這就代表交互網站不用vue做麼？當然不是。

        無意間在知乎看見vue的作者是這麼說的：

 

 

   所以說，即使是像vue這種前後端分離開發的網站，我們還是能夠通過其他技術解決seo問題的。

常用的解決方案有三種：

1. 頁面預渲染
2. 服務端渲染

3. 路由採用h5 history模式

而應用到的技術也是有很多，大體上我總結了四個，也是比較常用的：

第一，ssr,vue官方文檔給出的服務器渲染方案，這是一套完整的構建vue服務端渲染應用的指南，具體參考https://cn.vuejs.org/v2/guide/ssr.html

第二，vue-meta-info，這個是針對單頁面的meta SEO的另一種思路，參考網站 https://zhuanlan.zhihu.com/p/29148760

第三，nuxt 簡單易用，參考網站 https://zh.nuxtjs.org/guide/installation

第四，phantomjs 頁面預渲染，具體參考 phantomjs.org

而市場上依靠vue做出來的唱功案例還是很多的：

1） https://www.bilibili.com （bilibili）
2） http://m.sohu.com （手機搜狐網）
3） https://juejin.im/timeline （掘金）
4） http://element.eleme.io/#/en-US （2）
5） https://classics.autotrader.com （New&Used Classic Car for sale）
6） http://qiqu.uc.cn （奇趣百科）

7） https://m.uhouzz.com/apartments （異鄉好居）

那麼他們是如何做優化的呢？我們通過分析，總結以下幾點

1） bilibili做了基本的seo優化，比如

（1）TDK描敘詳細。
（2）提升網頁加載速度：對外聯css,以及js使用了延遲加載以及dns-prefetch，preload。

（3）外聯較多，關鍵詞排名高。

2） 掘金網站使用了vue-meta-info 管理網站的meta，應該配合使用了prerender-spa-plugin 對SEO進行了優化

3） Element在logo上加了首頁的地址，並且只有logo是放在h1標籤中。

4） 有一些流量不太高的網站比如http://www.marshall.edu （Marshall University）做了seo社會化分享優化，在meta信息中出現了property=」og:title」這種新東西；https://we.dji.com/zh-CN/campus （大疆招聘）使用了Nuxt

這些網站中出現率最高的公共組件或公共方法有四個：

1） 麪包屑導航
2） Icon
3） 搜索框

4） Button組件

關於收錄問題：

    網站收錄，搜索引擎在爬取你的網頁以後，通過對網頁內容進行檢測，將符合收錄規則的網頁存庫。因此該網頁將會出現在與網頁內容相關的查詢的搜索結果中。

    搜索引擎判斷一個網站權重高低的尺度無非兩個：收錄和外鏈。因此百度收錄的高低很大程度上影響着網站在百度的排名

    目前百度spider抓取新鏈接的途徑有兩個：

    一是主動出擊發現抓取

    二就是從百度站長平臺的鏈接提交工具中獲取數據，其中通過主動推送功能「收」上來的數據最受百度spider的歡迎。

        對於站長來說，如果鏈接很長時間不被收錄，建議嘗試使用主動推送功能，尤其是新網站，主動推送首頁數據，有利於內頁數據的抓取。

        這只是我片面的分析，具體情況我們還要根據網站定位，開發成本，後期的維護成本等綜合考慮，但是我覺得掘金真的是一個非常成功的案例，既然有人給我們邁出了這一步，我們也要緊跟潮流，畢竟互聯網是一個與時俱進的行業。如果我們永遠停留在傳統的混合開發，也會給我們的公司，給我們個人帶來一些影響。