這一系列文總共有三篇，這是第一篇。
對於用 Vue, Angular, React 這類前端框架來講，如果沒有對 search engine 或 social network 特別處理的話，出來的結果一定不會如你所想的一樣。
因為 client side rendering (CSR) 的作用域通常是在 body 裡面的 container，所以對於 search engine 或 social network 來說，container 外的 head tag 只是一層皮，裡面的資料基本上沒有什麼用，因為解析出來的內容都一模一樣，沒有獨特性。
為了要讓每一頁的 head tag 都不一樣，最簡單的方式就是在 web 這一層的 expressjs server 多加一個特殊的 route，去 catch 所有 web 的 get request，類似附圖的程式碼。
然後搭配 path-to-regexp 來設定特定 url pattern 做不同的 head tag 設計，比如 kewang/trips/123 的 title 叫做 "kewang 的台北二天一夜行程"，kewang/journals/456 的 title 叫做 "kewang 的宜蘭三日遊記"，當然這裡的例子舉的很簡單，正規的做法應該要搭配資料庫來取得對應的 title 跟 og data 才對，也就是附圖程式裡面的 loadMetaDataFunction。
只要做好這類的處理，在 social network 上面應該就可以所向無敵了。但這世界可不只有 social network，更恐怖的谷歌大神還在後面等著你咧！
下一篇就來講一下如何對付搜尋引擎吧。
#prerender #funliday
