Prerender —— 解决 JavaScript SEO 利器
本文只提供简单介绍和使用说明
使用
- 准备环境
npm install prerender
- 运行
1 |
const prerender = require('prerender'); |
- 测试
curl http://localhost:3000/render?url=https://www.example.com/
如果返回的页面包含动态加载的数据,说明成功!
中间件
上面安装了prerender
只能每次手动渲染我们的页面,如果想一次性代理整站,可以使用中间件代理应用服务,比如在nginx中配置:
1 |
server { |
同样,prerender
支持其他各种中间件,可以在官方文档中找到:https://docs.prerender.io/article/12-middlewares
问题
指定渲染的页面
- 使用返回状态码来让
prerender
决定页面是否需要被渲染,比如设置<meta name="prerender-status-code" content="404">
prerender
本身不支持过滤请求,但是我们可以从中间件出发,比如我们使用nginx + prerender
,可以在 nginx 上
配置location
来决定那些 path 需要渲染
为什么同一个url,每次请求都要渲染
alias:如何缓存请求
开源prerender
不支持缓存功能(设置缓存、设置缓存时长等功能),目前只有平台服务提供这些功能,
如果想用,需要使用线上SaaS版本,或自己单独处理或使用缓存插件prerender-memory-cache
SEO风险
- 请求是先判断
user-agent(UA)
是否是爬虫,然后决定毕是否使用SSR预先渲染,
但是有些爬虫会使用普通UA
判断你是不是针对搜索引擎给出的优化页面,这么一对比,还是有被K的风险;或者爬虫模拟浏览器加载网页,然后再对比的话,应该是没问题的,SSR后的页面基本上是和我们在浏览器端看到的源代码是一致的;
部分搜索引擎公司为了检查站长是不是只针对搜索引擎给出一份特意优化的页面,而不同于用户访问的页面,会采取普通 IP 和 UA 进行爬取页面,进而对比站长是否作弊
至少,与其他方案而言,使用SSR中间件的方式是最方便、最安全的
Q&A
- nginx 中间件 – 一直在请求同一个接口
如果你随意在配置文件中设置:set $prerender 1;
来测试的话,可能会引起这个错误,最好用官方给的方式来测试;
相关异常:
- nginx报错
too many open files
- prerender server 出现大量 504
- 使用nginx中间件,总是返回 nginx 首页 注意需要修改官方demo最后面:
1
2
3
4if ($prerender = 0) {
# rewrite .* /index.html break;
proxy_pass $scheme://$host;
}
其他
- [修改Chrome User-Agent]: https://dysaniazzz.github.io/2019/06/06/useragent;