SPA之SEO

參考連接：6 Things You Should Know About Fragment URLs

在項目開發中，由於使用了Vue.js來開發一個SPA（單頁面應用），因此在這個項目開始變大的時候，很天然的就想到用vue-router來創建多個模塊入口。vue-router默認的是使用hash模式，就是會在#後面跟着路徑用來區分並渲染相應的組件，還有一種是history模式，這種模式能在不刷新當前頁面的狀況下改變URL，而且形式很是乾淨清爽的，好比：https://segmentfault.com/u/zh...，帶上了hash就多是 https://segmentfault.com#!/u/zhoushx3。

開發過SPA網站的朋友應該知道，SPA是SEO不友好的（後面會解釋）。咱們通常是會根據URL的路徑或者hash來渲染對應的組件或頁面。打個比方：

1. 網站首頁：aa.bb.com/index

2. 點擊頁面某一按鈕，修改window.location.hash='#how'，URL變成aa.bb.com/index#how，同時經過ajax或者其餘方式得到數據並渲染。

3. 點擊另外一按鈕，修改window.location.hash='#what'，URL變成aa.bb.com/index#what，同時頁面更新渲染。

上面我舉的栗子是使用hash。固然也可使用以下的history模式，好比：

1. 網站首頁：aa.bb.com/index

2. 點擊頁面某一按鈕，執行history.pushState({}, '', '/how')，URL會變成aa.bb.com/how

3. 點擊頁面某一按鈕，執行history.pushState({}, '', '/what')，URL會變成aa.bb.com/what

使用這種方式URL就會更好看點。

好像有點扯遠了，其實我只是想找個引子帶出hash這貨而已，開始。

認識URL中的Hash

舉個栗子：http://www.zuodanye.com/pcent...，代號爲W。
對應下URL的組成：protocol :// hostname[:port] / path / ;parameters#fragment
沒錯，#後面的部分也叫作fragment，帶有#的URL也叫Fragment URL。
這裏fragment等同於hash.
在#左邊的表明這個資源在服務器的位置，右邊的則是指明資源內的位置，能夠理解成就是錨點。好比標籤<a>的用法，<a href='#what'>，當點擊它的時候屏幕會滾到它的位置。

Fragment部分沒有包含在請求頭中

check it out:

聽說是由於Fragment部分只對瀏覽器有用，也就是前端，而且它不會對服務器返回什麼資源有所影響，因此這個部分就在Request URL中被忽略掉了。
因此若是把?key=value這部分放在了#後面，那麼服務器在拿GET參數的時候就拿不到這塊了的哦。

Fragment的特色

修改window.location.hash也就是#後面並不會致使頁面刷新，這一點在優化用戶體驗上是大大的好。
雖然頁面不會刷新，不過會在瀏覽器的history記錄中添加一條記錄，因此返回和前進按鈕就能夠利用了。

說說Google爬蟲（不一樣爬蟲其原理應該是差很少的）

Google爬蟲在爬網站的時候，HTML中的內容和內嵌的連接會成爲搜索索引的一部分。因爲它並不具備一個腳本引擎，因此它只會爬網站的源碼而不會執行任何腳本，這樣子#後面的部分就徹底失去了做用，畢竟#只有javascrip纔會去使用到。
因此，若是使用AJAX和#來區分路徑的話，這樣的路徑是不會被收錄到索引的。爲了解決這個問題，Google支持了一種轉化，即爬蟲會把hash部分識別成URL參數，方式：

• 首先須要把#變成#!，即 http://www.zuodanye.com/pcent... ==> http://www.zuodanye.com/pcenter#!myProject

• 當Google爬蟲遇到這樣的URL，會將其識別成 http://www.zuodanye.com/pcent...。
  這樣子咱們只要爲這個連接返回相應的頁面或者數據便可。

不過這種方式仍是顯得略很差看，因此若是瀏覽器支持history API的話，固然仍是用history的好。

總結

若是SPA網站要對SEO友好點的話，應該至少有下面的部分：

• 利用history.pushState來修改URL，監聽onpopstate來相應返回和前進。
  URL的變化可能以下：www.zuodanye.com -> www.zuodanye.com/pcenter -> www.zuodanye.com/home
  這個過程當中頁面不會刷新，用戶體驗好。

• server路由添加/pcenter和/home，以及對應的Render頁面，這樣子就能夠爲不一樣路徑下的頁面編寫不一樣的TDK。

• 若是瀏覽器不支持histroyAPI，那就降級使用hash來切換不一樣的路徑，這樣子至少可以不刷新跳轉，優化體驗。