## 題目 ### 前后端分離的項目如何seo ## 1. 答案 先去[robots](https://www.baidu.com/robots.txt)找出常見的爬蟲，然后在nginx上判斷來訪問頁面用戶的User-Agent是否是爬蟲，如果是爬蟲，就用nginx方向代理到我們自己用nodejs + puppeteer實現的爬蟲服務器上，然后用你的爬蟲服務器爬自己的前后端分離的前端項目頁面，增加扒頁面的接收延時，保證異步渲染的接口數據返回，最后得到了頁面的數據，返還給來訪問的爬蟲即可。 ## 2. 答案 * 那么我們首先得了解Search Engine才能談如何做到讓頁面被收錄，這里就拿最常見的百度和google來舉例吧。 * 百度是不支持收錄SPA的頁面的，而且SPA的網站對于百度的spider來說等于是只有1個頁面，那么如何做到讓這種搜索引擎收錄頁面呢？ * 首先我們可以自行提交sitemap，讓蜘蛛主動去爬，但是遇到sitemap中的URL，到達指定頁面后頁面只有一段js怎么辦，我們可以利用比如標簽來進行最簡單的優化，比如在noscript里打印出當前頁面一些關鍵的信息點，但是這個做法大家一看就非常的蠢，因為正常用戶并不需要這些內容，占用下載量，而且不好維護。 * 那么我們如何判斷當前頁面是否支持運行javascript呢？前端已做到，用noscript，后端不行，那么只好針對百度的spider做UA判斷了，這也就是大家常見的一些解決方案，使用phantomjs或者nginx代理，來對spider訪問的頁面進行特殊的處理，達到被收錄的效果。那么這么做其實是有一些副作用的，比如你收錄的頁面和用戶正常訪問的頁面差別較大是有被搜索引擎K掉的風險的， * 所以更多的做法還是選擇首屏使用ssr的方式渲染，先通過后端路由保證頁面的主要信息可以被服務器端輸出，然后其他的功能，包括用戶之后的路由跳轉控制，再使用前端路由來做，曾經的項目經驗在新浪博客手機版中也是這么做的，當然當時沒有ssr，是后端直接渲染的模板，用戶訪問后，再進行交互則再采用前后端分離和前端路由控制來完成。 * 然后就是google的搜索引擎，是支持hashtag再rewrite訪問你的靜態版的，但是畢竟只有google支持，所以正規的做法都是使用pushState來對頁面URL做前端的后續無刷新控制，對爬蟲和所有用戶提供任何入口的ssr或者首屏的直接渲染，才是最完美的SEO支持方案。 本人也比較認同 ssr 的處理方式，當然 ssr 的成本相對高。 ## 相關知識 ### puppeteer puppeteer 是一個Chrome官方出品的headless Chrome node庫。它提供了一系列的API, 可以在無UI的情況下調用Chrome的功能, 適用于爬蟲、自動化處理等各種場景 ## 參考文章 [前后端分離的項目如何seo](https://github.com/airuikun/Weekly-FE-Interview/issues/13)