Prerender.io 配置过程 给你的VUE单页面网站增加一点seo吧~

prerenderio 的使用和配置

作为一个网站，要想给别人搜索到，那么就要依靠搜索引擎的爬虫。那么我们如何让搜索引擎爬虫收录网站的信息呢？那就需要网站确实有信息:

• meta标签的关键词
• meta的描述
• meta的作者等
• 网站body里面也需要有内容

但由于spa的动态性和router的存在，我们每次访问页面都会经过以下过程

• 用户访问

• Vue加载实例

• router载入解析

• 根据routes加载对应组件

• 渲染以及ajax获取数据

那么问题来了，作为爬虫他是否会等待我们的vue实例加载呢？
不会
这也就是vuespa页面seo如此差劲的原因:我们根本就无法让爬虫获取到我们的数据，即使获取到了meta数据，由于body里面只有一个空荡荡的div，爬虫也不会收录我们的网站---判断为劣质资源。

所以，SPA的seo就成了一个难题：如何让内容呈现给爬虫呢？

几种方案的优劣对比

根据网络的搜索和参考，我总结出了vue3做seo优化的几种方案

• Nuxt3 SSR服务端渲染（最佳方案）
• Vite SSG 静态页面生成 （适合博客并且将MD文件直接作为路由）
• Prerender.io 动态预渲染 （nginx中间件进行实现）
• Vue-Prerender-plugins 打包静态页面生成 (经查询好像并不支持vue3）
• 后端路由映射 (需要镜像整个前端的路由 不太适合)

目前nuxt的版本正在rfc阶段，但是其文档和相应的开发者以及各种工具的支持都显得极为糟糕，而且将一个spa转换成SSR项目的话，项目规模较小尚可，若是项目的页面较多，以及做了一些dom操作和依赖浏览器进行的判断的话，这些js代码也要进行相应的调整，并不利于开发者进行迁移(说白了---我懒)

而ViteSSG经过了解后，发现这种方案更适合纯展示的博客类项目进行使用，这种方案的原理呢就是：将所有路由直接生成静态页面，然后通过打包构建好相应的静态页面，用于给搜索引擎进行收录。 很明显，我的项目包含了很多依赖于后端的动态页面，这种东西自然也就pass啦~~（当然，是因为频繁报错还不会弄所以不得不回滚）

那么经过考虑后，我最终选择了使用prerenderio这个方案，通过服务器判断请求来源是否属于搜索引擎爬虫，来进行相对应的转发

判断是否是爬虫 ->是 ->转发至linux运行的google浏览器进行访问
否->直接请求资源

那么接下来就要说说我们该怎么部署这个服务了

部署prerender.io

首先我们需要一个prerender的账号，可以在以下连接中访问
dashboard.prerender.io/

配置nginx中间件

当然，首先要说说这个运行的原理：
利用nginx转发，如果是正常用户，就直接访问，如果是爬虫，就转发到prerender服务上
因此我们需要配置nginx以让我们的nginx知道，当前的用户是爬虫呢，还是正常的用户。
具体的配置可见如下:

location @prerender{
            proxy_set_header X-Prerender-Token yourtoken;
            set $prerender 0;
            # Add all the user agents you need
            if ($http_user_agent ~* "googlebot|bingbot|facebookexternalhit|baiduspider|twitterbot|rogerbot") {
                set $prerender 1;
            }
            
            #​if ($args ~ "_escaped_fragment_") {
            #    set $prerender 1;
            #}
            # Add your ignored paths and files
            if ($http_user_agent ~ "Prerender"){
                set $prerender 0;
            }
            if ($uri ~* ".(js|css|xml|less|png|jpg|jpeg|less|pdf|doc|zip|rss|mp4|mp3|mpg|mpeg|tif|wav|mov|xls|m4a|swf|fl4|m4v|ttf)") {
                set $prerender 0;
            }
            if ($prerender = 1) {
                set $prerender "127.0.0.1:3000";
                rewrite .* /$scheme://$host$request_uri? break;
                proxy_pass http://$prerender;
            }
            if ($prerender = 0) {
                rewrite ^.*$ /index.html last;
            }
            # ... add more conditions here if needed
        }

这是一个@prerender的中间处理过程，可以看到逻辑很清晰，就是判断请求中是否含有爬虫的关键字，另外需要一个token，这个直接在prerender的官网中可以获取到。
那么，在中间处理的过程中，我们需要对80的监听配置做一些调整：

location / {
      root   /www/wwwblog/web/dist;
      index  index.html index.htm;
      #try_files $uri $uri/ /index.html;
      try_files $uri @prerender;
}

可以看到这里把try_files 改成了这个中间服务，如果中间判断是用户，他会重写为

^.*$ /index.html last;

不是的话 就会转发到本机3000端口（prerender的服务运行默认端口）
让他接管我们的后续处理

安装node以及npm 服务跑起来

使用这个node跑的服务端，那么自然就要用到node和npm了，
首先我们可以在官网下载linux的nodejs

下载这个版本

然后移动到服务器中的/usr/local/node中进行解压
修改名字为nodejs
并且将其软连接到bin下面的命令

ln -s /usr/local/node/nodejs/bin/node  /usr/bin/node
ln -s /usr/local/node/nodejs/bin/npm  /usr/bin/npm

连接完成测试一下node -V 和npm -V 出现版本号则安装成功

获取prerender

服务器中没有安装git 我们可以直接去gituhub克隆好代码，并移动到服务器中：
github.com/prerender/p…
复制到服务器中直接运行

npm install
node ./server.js

安装完成后，并不能够直接运行 需要安装谷歌浏览器，prerender依赖于谷歌浏览器运行

安装谷歌浏览器

根据网络资料查阅，阿里云等国内服务器并不能直接下载google
那么就需要一点点的配置了~
首先找到yum源的目录，自己配置一个google源

cd /ect/yum.repo.d 
touch google-chrome.repo #新建文件

在新建的文件内写入如下内容

[google-chrome]
name=google-chrome
baseurl=https://dl.google.com/linux/chrome/rpm/stable/x86_64
enabled=1
gpgcheck=1
gpgkey=https://dl.google.com/linux/linux_signing_key.pub

ok 直接运行安装

yum -y install google-chrome-stable --nogpgcheck

在显示了complete之后，我们的google就安装完成了，那么就先转移到google的目录下，尝试运行

cd /opt/google/chrome
./chrome

一般会提示

[32506:32506:0621/215731.721837:ERROR:zygote_host_impl_linux.cc(90)] 
Running as root without --no-sandbox is not supported. 
See https://crbug.com/638180.

可以看到这里呢我们是使用了root用户来进行运行chrome，chrome规定是不允许用户在linux环境下用root用户运行的，因此就需要加上一些配置才能够运行成功 所以下面需要去配置。
我们vim一下google-chrome

vim /usr/bin/google-chrome

可以看到最后一行是 我们在后面加上配置

exec -a "$0" "$HERE/chrome" "$@"
# 变成下面写的
exec -a "$0" "$HERE/chrome" "$@" --user-data-dir --no-sandbox

这时候打开还是会报错 但是好像并没有那么多错了 ，回去测试一下prerenderio 服务

cd /usr/prerender
node ./server.js

如果运行正常了，应该就会出现如下界面:

运行成功

再查看一下当前的运行状态

可以看到正常运行

测试爬虫是否能够访问

使用百度的爬虫测试

可以看到 我们的网页是正常渲染出内容了，并且能够被百度抓取到。
prerender.io的部署就大功告成啦~~~剩下的那就是，利用useHead等优化关键字的搜索，以及给图片增加alt等。

缓存的使用

由于每一次爬虫请求都需要经过浏览器，如果每次都重新请求，爬虫的速度会变慢，那就不利于seo的收录，为此我们可以安装官网给我们提供的缓存服务。

首先进入prerender的目录，安装缓存依赖

npm install prerender-memory-cache --save
vim server.js

在server.start()前加上一行

server.use(require('prerender-memory-cache'));

重新启动，我们就可以加载缓存了！

抓取页面的显示

参考

[1]使用Prerender进行网站预加载.百度文库
wenku.baidu.com/view/5e8302…
[2]Yes, here are 4 ways to handle SEO with Vue (even without Node SSR)itnext.io
itnext.io/yes-here-ar…
[3]在Linux下安装node及npm.CSDN
blog.csdn.net/weixin_4154…

本文首发于我的个人网站

adkdream.top/article/153…

初来乍到 以后我会在掘金创作更多文章 谢谢~