## 题目 ### 前后端分离的项目如何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)