解决前后端分离项目的SEO问题

方案

手动实现后端渲染

针对爬虫机器人，把静态页面吐出来，而对于正常用户访问，直接重定向到源网站

使用框架本身SSR方案

对于使用VUE、React实现的项目，框架本身是支持SSR的，本人使用过 umi ssr
实现过一个简单的demo，但对于负责站点，还没有经过验证

使用SSR中间件

对于其他框架或三方开发的平台，我们想实现SSR，可以借助三方SSR中间件：

• prerender

  本人使用过，生成的静态页面源代码，和浏览器查看的源代码一致

• Puppeteer
  

  Puppeteer 官方文档

  大部分可以在浏览器端完成的事，你都可以用 puppeteer 来完成，包括：

  • 生成页面截图、PDF
  • 对页面SSR
  • 自动化测试
  • 等等

  它的实现其实就是调用了 headless chrome，
  puppeteer 会自动下载并使用特定版本的 Chromium，当然也可以指定你自己本地的Chrome

  Chrome 和 Chromium 的关系，有点像是 Oracle Jdk 和 OpenJdk 的关系

• Rendertron
  

  render-tron

  也是一个基于 Headless Chrome 的渲染解决方案，用于动态渲染和连载网页。

  功能比上面两个完善，支持缓存和刷新缓存、缓存过期设置，非常好用~

对比

对上面两种方式来说，使用SSR中间件是最方便的，使用原则：

• 如果你的项目框架支持ssr功能，建议直接使用它
• 如果你的项目自身进行ssr扩展很复杂，可以考虑使用上面的中间件，但也要自己扩展很多功能
  • 对于上面提到的三种渲染中间件：
    • prerender属于商用软件，但有基础开源版，拥有渲染的核心功能，足够使用；
    • Puppeteer基于Headless Chrome，能实现浏览器上能实现的功能，其实就是调用Chrome API
    • ☆Rendertron也是基于Headless Chrome，能实现SSR，同时支持缓存功能，就本文而言，算是比较好的

相关文章

• Prerender —— 解决 JavaScript SEO 利器
• ahrefs-一款强大的SEO分析工具
• puppeteer ssr
• 动态渲染对SEO的影响