单页面应用的SEO对策

前言

单页面最大的问题就是SEO不友好，Google还好，毕竟Google的搜索引擎已经支持js运行了，但是其他应用尤其像Facebook，Twitter这样的，是没有办法执行js的。

解决方案

如果对现有项目不做改动，那么最佳的解决方案就是当遇到搜索引擎的时候，中间放一个渲染代理，这就是今天所说的rendertron。rendertron原理很简单，就是用headless chrome对spa进行渲染得到一个纯粹的html。

安装

制作Image

Dockerfile

FROM node:16-slim

RUN apt update && apt dist-upgrade -y && \
        apt install -y wget gnupg2 && \
    wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list && \
    apt-get update && apt-get -y install google-chrome-stable

build

1	docker build -t ebusiness/rendertron-base .

克隆rendertron源代码，并进行适当的配置修改。

1	git clone https://github.com/GoogleChrome/rendertron.git

src/config.ts

diff --git a/src/config.ts b/src/config.ts
index 0939141..eba2836 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -21,7 +21,7 @@
 
 import * as fse from 'fs-extra';
 import * as path from 'path';
-import * as os from 'os';
+// import * as os from 'os';
 
 const CONFIG_PATH = path.resolve(__dirname, '../config.json');
 
@@ -43,11 +43,11 @@ export type Config = {
 
 export class ConfigManager {
   public static config: Config = {
-    cache: null,
+    cache: 'filesystem',
     cacheConfig: {
-      snapshotDir: path.join(os.tmpdir(), 'rendertron'),
-      cacheDurationMinutes: (60 * 24).toString(),
-      cacheMaxEntries: '100',
+      snapshotDir: '/work/cache',
+      cacheDurationMinutes: '-1',
+      cacheMaxEntries: '-1',
     },
     timeout: 10000,
     port: '3000',

在rendertron路径下执行以下命令启动容器，注意–network根据实际情况指定

docker run -d --restart=always --network wejoin-nw --name rendertron -v "$PWD":/work -w /work ebusiness/rendertron-base sh -c '
    ls -la
    npm ci
    npm run build
    npm run start
'

配置caddy（这里是caddy v1的配置）

rewrite {
    if_op or
    if {>User-agent} has facebook
    if {>User-agent} has bot
    if {>User-agent} has Bot
    if {>User-agent} has spider
    if {>User-agent} has Spider
    to /render/https://{host}{uri}
}
proxy /render rendertron:3000 {
    transparent
}