前后端分离项目如何做seo

2019-04-16-09:22 于公司

假如面试官问你：前后端分离项目如何做seo？

1、使用prerender，如果说不用prerender，你怎么回答呢？

2、先去 www.baidu.com/robots.txt 找出常见的爬虫，然后在 ngnix 服务器上判断访问者的 User Agent （划重点）是否是爬虫。

如果是：用 ngnix 反向代理到我们自己用 nodejs + puppeteer 实现的爬虫服务器。

知识点：

puppeteer ：谷歌推出，可以理解为无界面版本的 chrome 浏览器，通俗说就是可以在服务端使用浏览器（页面不展示而已）。

实际上是通过调用Chrome DevTools开放的接口与Chrome通信，Chrome DevTools的接口很复杂，但puppeteer对其进行了封装，我们调用起来还是很方便的。

为什么说前后端分离不利于seo的原因如下：

seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不回去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 所以服务端渲染就是尽量在服务器发送到浏览器前 页面上就是有数据的。

第二个问题，一般的数据逻辑操作是放在后端的。排序这个如果仅仅是几条数据，前后端排序开起来是一样的，如果是有1000条数据，前端要排序就要都请求过来。这样显然是不合理的。

可以利用现在的前端框架做同构支持（目前热门的前端框架都支持同构）。在初次网址访问时由服务器渲染页面内容，Client端资源做CDN，这样就可以支持SEO优化了。

如果使用的是angularjs的话，可以看看Prerender - AngularJS SEO, BackboneJS SEO, or EmberJS SEO

---