prerender-解决JavaScript SEO

Prerender —— 解决 JavaScript SEO 利器

本文只提供简单介绍和使用说明

使用

  • 准备环境

npm install prerender

  • 运行
1
2
3
const prerender = require('prerender');
const server = prerender();
server.start();
  • 测试

curl http://localhost:3000/render?url=https://www.example.com/

如果返回的页面包含动态加载的数据,说明成功!

中间件

上面安装了prerender只能每次手动渲染我们的页面,如果想一次性代理整站,可以使用中间件代理应用服务,比如在nginx中配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
server {
listen 80;
server_name example.com;

charset utf8;
location / {
try_files $uri @prerender;
}

location @prerender {
# 自己部署的 prerender 服务不需要这个参数
proxy_set_header X-Prerender-Token YOUR_TOKEN;

set $prerender 0;
if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
set $prerender 1;
}
if ($args ~ "_escaped_fragment_") {
set $prerender 1;
}

if ($http_user_agent ~ "Prerender") {
set $prerender 0;
}
if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
set $prerender 0;
}

# 自定义哪些路径需要渲染,哪些不需要
if ($uri !~ ^/main/(.*)$) {
set $prerender 0;
}

# DNS解析,使后面的请求能直接访问源站,不然会一直请求到nginx,导致循环
resolver 114.114.114.114 8.8.8.8;

if ($prerender = 1) {

#setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
set $prerender "127.0.0.1:3300";
rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://$prerender;
}
if ($prerender = 0) {
proxy_pass $scheme://$host;
}
}

}

同样,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; 来测试的话,可能会引起这个错误,最好用官方给的方式来测试;

或者 自定义浏览器的 user-agent

相关异常:

  • nginx报错 too many open files
  • prerender server 出现大量 504
  • 使用nginx中间件,总是返回 nginx 首页 注意需要修改官方demo最后面:
    1
    2
    3
    4
    if ($prerender = 0) {
    # rewrite .* /index.html break;
    proxy_pass $scheme://$host;
    }

其他

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注