spa 搜索引擎_SPA项目开箱即用的SEO解决方案

前言

本文章写于 2019-07-05 请注意时效性。

有关 SPA 项目的 SEO 友好的解决方案其实不多, 常见的解决手段如下:

将 SPA 项目改为 SSR 渲染

使用预渲染

前者非常稳定但是对于已有的 SPA 项目进行改造需要注意的问题有很多而且耗时长与重写一个没有太大区别，后者只能对于那些"无论是哪种用户访问返回的结果都一样"的页面合适不免十分被动。

总的来说都是十分的繁琐，不过依然有可以避开修改原有代码的解决方案, 例如下面的这个：

这些方案的基本原理就是，使用代理服务器区分搜索引擎的爬虫和普通用户从而实现针对性内容响应，普通用户响应原有的 SPA 项目也就是“纯粹的 index.html 页面”，而对于爬虫响应对应路由下的渲染好的HTML页面。

既然各位智慧无穷的网友开出了药方，看来我们需要手动熬制了。不过先慢着看看 github 有什么现成的药没有:

没错 github 上已经有了现成的解决方案。

Rendora 简介

Rendora 本身是一个代理服务器使用 GO 语言编写专门被设计与解决 SPA 项目的 SEO 处理，支持配置文件以及对外接口。

使用 Rendora 可以相较于其他方案有如下的优势:

无需修改原有项目

无需修改构建配置

支持任意路由页面的渲染

不受限于前端框架与所使用到的技术

搜索引擎爬虫和普通用户获取到的数据一致

它的基本原理就是请求经过 Rendora 的时候它会根据请求头 user-agent 来判断请求是属于爬虫还是普通用户, 普通用户直接代理到原有的Web服务器, 而爬虫的请求会经过无头浏览器(head-less browser) 处理生成一张页面返回给爬虫，而这个页面的内容可以理解为是运行时的 DOM 快照。

明白了基本原理后我们不难想到只要是异步加载数据然后再利用数据渲染内容的页面都适用。而且爬虫和普通用户两者最终获取到的数据可以高度一致。

安装

Rendora 官方文档中已经给出了安装方式，我就在这里直接照搬了，不过 Rendora 本身是由 GO 语言编写，而且依赖了无头浏览器还是有许多小坑要踩的。

在本文中我使用的系统是 Ubuntu18.04桌面版 ，但是其他的系统用户 windows 和 macos 都是可以安装以及使用的，安装 Rendora 方式稍有不同但是基本概念都是一致的。

基本依赖

需要安装 Go