# 前端工程師後端之旅 - 路由設計以及Slug SEO優化

路由的設計也是開發網站時的重點之一，不同的功能及頁面，甚至資料存取方式，都會收到Route規劃的影響。
我們得先知道，網站總共有哪些頁面，才能整理出頁面和頁面之間的關係，進而設計出合適的路由，下面是根據畫面整理出來的網站架構，如果對於網站畫面拆解有興趣的，可以參考上一篇：
### [從畫面拆解，到整理User Story](https://hackmd.io/h8GOsrcuTme4MibQfSnZuQ?both)

或可參考網站成果： http://mujingtsai.site/

### 文章大綱：

1. 網站 Sitemap
2. 路由設計
3. Slug SEO 優化

## 網站 Sitemap

根據該所有可到網站頁面可整理出如下面這樣的網站頁面圖，
這對確認需求有蠻大程度的幫助，討論需求時也比較不會東漏西漏：

### 前台Sitemap

### 後台Sitemap


## 路由設計：

原本的Route方式比較髒，雖然設計上算是Restful，
但route還要index.php還是不太美規，甚至有可能影響SEO，
因此我想要設計成直觀一點的路由。

### 商品類別路由

 /product/category/:category_id

### 商品路由

/product/:product_id 

### 新聞類別&&新聞路由
仿照product，一樣的方式，把product改為news:

 /post/category/:category_id

/post/:post_id 

### 購物車路由
原來的購物車路由跟結帳路由被放在同一個層級下，容易令人疑惑，因此如果能夠拆開比較好：

/cart

### 結帳頁面

/checkout

### 登入頁面

/user/login

### 會員資料頁：

/user/edit

## Slug SEO 優化：

Slug(別名) 是在URL裡面，藉由給每一個頁面一個不重複具有識別性的資料，達到以更語意化的方式存取資料，藉此提升SEO友善度。

很多時候在某個頁面有很多相同類型的資料要存取，比如商品列表內某一筆商品資料、某一筆文章資料......，我們會透過在路由內搭配變數，利用商品id去存取，例如：

/products/:id 

而在使用上我們就可以透過「/products/12」去找到第12筆商品內容頁面。基本上只要能夠確保每個:id變數是獨一無二具有識別性的，就能透過這個路由一次性處理多筆資料。

但是這樣子的用法對SEO來說並不夠友善，要針對路由優化SEO，有一個大原則是讓URL**簡短、清楚、語意化**，其實在這個情況下，可以與路由搭配的識別性資料，也不一定只有id。

我們可以一筆一筆商品自己給定不重複的slug，
但不難想到，以商品來說，通常**商品名稱**也是不會重複的識別性資料。
所以我們可以直接用拿來搭配使用，而且這樣子一看就知道是對應到哪個頁面了。
例如:

products/categories/限時優惠

當然我們還是得做一些防止slug重複的方法，以免意外性的名稱重複導致網站無法運作，由於使用Slug通常是在資料庫商品資料表的欄位內多插入一個Slug欄位，所以必須指定資料欄位為unique，防止相同的資料被寫入第二次，以rails 來說就是在migration寫入類似：

add_column  :posts , :slug , :string , :index => { :unique => true }

以指定唯一的索引，你可以透過

http://mujingtsai.site/products/categories/新品上架

來看到我的實作成果。