如何基于 Prerender 为 SPA 做 SEO 优化

轩帅

倾城之链是基于 Vue2 所构建的单页面应用（SPA），这很不利于 SEO，尤其是之于国内搜索引擎。如要优化，采取 SSR 方案对代码侵入性高，也不大方便以 SSG 方案处理；于是乎，便在服务端针对搜索引擎爬虫返回预渲染结果，从而做 SEO 优化；本文就此方案做简单分享。

Prerender 预渲染原理

prerender 项目由 Prerender.io 出品（其内部基于 Headless Chrome，与 Google Puppeteer 类似），也可以使用 Prerender.io 提供的服务；它旨在加快向搜索爬虫提供内容的速度，从而提高您的 SEO 分数。只需注册、登录、按照说明进行 Nginx 配置即可；相比自己部署的 prerender 服务，有更快的速度、更多可选项设置、强大的仪表盘、缓存管理器以及其他缓存相关活动操作。

prerender 的原理是，配置 nginx，判断出是爬虫来访时，先将请求页面地址发送给 prerender 服务，由 prerender 服务渲染出页面内容，再将页面内容返回给爬虫。

Prerender is a node server that uses Headless Chrome to render HTML, screenshots, PDFs, and HAR files out of any web page. The Prerender server listens for an http request, takes the URL and loads it in Headless Chrome, waits for the page to finish loading by waiting for the network to be idle, and then returns your content.

架设自己的 prerender 服务

虽然说 Prerender.io 提供了抓取及缓存服务，但当内容超过 1000 条就要收费，对于中小项目，或许得不偿失；当然，完全可以架设自己的 prerender 服务，只要拥有可控制的服务器即可「操作非常简单」。Github prerender 项目中对于如何使用，已经做了详细说明。为使得内容可以快速给到搜索爬虫，最好可以对内容做缓存（基于 Redis 或 memory-cache 都可以）。有在 Github 开源项目： prerender-spa-server ，如果您有类似需求，克隆之，基于 pm2 做下持久化部署即可。

Prerender 是使用 Headless Chrome 来呈现 HTML 的节点服务器，即在你的服务器，要安装 google chrome，否则该服务无法正常工作。

修改 nginx 配置文件

搭建 prerender 服务之外，还是要针对项目搜索爬虫，做下额外处理，使之取到预渲染结果。如今，多半 Web 应用都采用 nginx 来配置；倾城之链亦是如此；只需在原有配置文件加些判断即可，示例代码如下：

location / {
    set $prerender 0;
    if ($http_user_agent ~* "Googlebot|googlebot|bingbot|baiduspider|twitterbot|facebookexternalhit|rogerbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
        set $prerender 1;
    }

    if ($args ~ "_escaped_fragment_") {
        set $prerender 1;
    }

    if ($prerender = 1) {
        set $prerender "127.0.0.1:3000";
        proxy_pass http://$prerender;
        rewrite .* /$scheme://$host$request_uri? break;
    }

    proxy_set_header    Host             $host;
    proxy_set_header    X-Real-IP        $remote_addr;
    proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header    X-Client-Verify  SUCCESS;
    proxy_set_header    X-Client-DN      $ssl_client_s_dn;
    proxy_set_header    X-SSL-Subject    $ssl_client_s_dn;
    proxy_set_header    X-SSL-Issuer     $ssl_client_i_dn;
    proxy_read_timeout 1800;
    proxy_connect_timeout 1800;
    if ($prerender = 0) {
        proxy_pass          http://localhost:8668;
    }
}

修改完配置文件后，记得要使用命令 nginx -s reload 重新加载。一切配置妥当，即可发起测试，以验证结果是否符合预期；在终端使用 curl 工具，对目标网址发起访问即可；需要说明的是，网址后面需要添加 ?_escaped_fragment_ 标记，主动触发 prerender 渲染服务，以模拟搜索爬虫来源。示例如下：

curl https://your-website-url/?_escaped_fragment_

可能存在的问题

Google Chrome 版本过低

前文提及需要安装 google chrome，对于它的版本，截止 2022 年 11 月，已经升级至 107.*；您的项目中，对于它的版本，应该尽可能的高些（如果在 70 以下，很有可能出现问题，渲染出的 html 跟实际不相符，莫问吾如何知道💧）。关于在 linux 环境，如何安装新版本的 google chrome，可参见文章： How to Install Google Chrome Using Terminal on Linux 。主要步骤如下：

# Update the package index
sudo apt update
sudo apt upgrade

# Use wget to download the Chrome package
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install the downloaded Chrome package.
sudo dpkg -i google-chrome-stable_current_amd64.deb

以上，即是「如何 Prerender 为 SPA 做 SEO 优化」的主要内容；这种方案，对于主代码侵入性小，效果跟 SSR 方案也别无二致。虽然说 Google 能够对 SPA 页面通过 JavaScript 抓取，各种因素，效果肯定不如渲染后 HTML；感兴趣的朋友可以尝试；如有疑问，欢请留言评论。

其他报错问题

比如可能在腾讯云服务器报如下错误：

2022-11-12T05:02:49.270Z Starting Prerender
2022-11-12T05:02:49.272Z Starting Chrome
2022-11-12T05:02:49.279Z Prerender server accepting requests on port 3000
2022-11-12T05:02:49.292Z Chrome connection closed... restarting Chrome
2022-11-12T05:02:49.293Z Chrome died immediately after restart... stopping Prerender

需要首先检查 Prerender 配置是否正确，配置示例如下：

const server = prerender({
	chromeFlags: [
		'--no-sandbox',
		'--headless',
		'--disable-gpu',
		'--remote-debugging-port=9222',
		'--hide-scrollbars',
	],
})

假如确定配置的话，尝试使用 sudo 权限再次运行，重新修改 chromeLocation 路径（在腾讯云上遇到过此问题，用此办法得以解决）代码示例如下：

const server = prerender({
        chromeLocation: '/usr/bin/google-chrome-stable',
        chromeFlags: [
                '--no-sandbox',
                '--headless',
                '--disable-gpu',
                '--remote-debugging-port=9222',
                '--hide-scrollbars',
        ],
})

需要补充说明的是，基于 Prerender 为 SPA 做 SEO 优化，即需要在服务器端运行 google chrome ，以获得真实渲染呈现的 HTML；如果将这个 Prerender 服务与其他服务混搭与统一服务器，受抓取频率、服务器配置等影响，或可能引发 CPU 、内存占用过多问题；如有条件，可分开部署。服务一旦搭建，或可能被别有用心之人利用，需要提前防范；在 prerender-spa-server 最新代码中，增加了域名白名单限制。倾城之链基于这种方案改善 SEO，通过近一个月观测，效果还可以。以上，大致是全部内容；如果您感兴趣，欢请留言评论。

2022 年 11 月 10 日写于〔深圳福田〕；2022 年 12 月 08 日更新。