前言
大家都知道本项目是由vue写的，由于vue是单页面的，所以对于seo优化来讲并不是很友好，蜘蛛只能抓取首页，但是呢，虽然流量没有多少，但我们的seo还是要做一做的，毕竟有seo才能吸引到更多的用户访问。
说说几种方案吧
- 网上比较多的是使用Nuxt.js，但是用我已经开发好的项目来改，说实话，前端小白的我实在是改不动了。
- Quasar不太了解，不过多介绍了。
- Vite SSR，Vite 提供了内置的Vue 服务端渲染支持。也要改已有代码，不想改，不会改。
官方给的方案被我否定了，就是想找个不用修改已有代码的方法。经过不懈的百度努力，发现了一线生机Puppeteer，简单说说这个吧
Puppeteer
Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过开发工具协议控制 Chrome/Chromium。 Puppeteer 默认以无头模式运行，但可以配置为在完整 (“有头”) Chrome/Chromium 中运行。
Puppeteer的作用，我主要用到的是SSR：
- 生成页面的屏幕截图和 PDF。
- 抓取 SPA（单页应用）并生成预渲染内容（即 “SSR”（服务器端渲染））。
- 自动化表单提交、UI 测试、键盘输入等。
- 使用最新的 JavaScript 和浏览器功能创建自动化测试环境。
- 捕获站点的时间线痕迹以帮助诊断性能问题。
- 测试 Chrome 扩展程序。
SEO实现-使用Puppeteer进行SSR
搭建用到的工具
- node
- npm
- puppeteer
- express
- html-minifier
- google-chrome
- nginx
1. 安装Node.js和npm
已经安装过node.js的机器忽略这部分即可，可以通过node -v查看
- 进入node安装目录
cd /opt
- 下载安装包
wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz
- 解压安装包
tar -xzvf node-v17.9.0-linux-x64.tar.gz
4.设置软连接，建立快捷命令
ln -s /opt/node-v17.9.0-linux-x64/bin/node /usr/local/bin/
ln -s /opt/node-v17.9.0-linux-x64/bin/npm /usr/local/bin/
- 使用node -v查看是否安装成功
2. 安装 Puppeteer 及相关扩展工具
- 创建并进入项目目录，会生成node_modules
cd /home
mkdir puppeteer
cd puppeteer
- 安装 puppeteer，express 与 html-minifier
npm install puppeteer --save
npm install express
npm install html-minifier
- 安装依赖库
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86
3. 创建服务器端运行脚本
- 创建渲染请求的页面脚本：spider.js
const puppeteer = require('./node_modules/puppeteer');//由于目录不一致，所以使用的是绝对路径
const WSE_LIST = require('./puppeteer-pool.js'); //这里注意文件的路径和文件名
const spider = async (url) => {
let tmp = Math.floor(Math.random() * WSE_LIST.length);
//随机获取浏览器
let browserWSEndpoint = WSE_LIST[tmp];
//连接
const browser = await puppeteer.connect({
browserWSEndpoint
});
//打开一个标签页
var page = await browser.newPage();
// Intercept network requests.
await page.setRequestInterception(true);
page.on('request', req => {
// Ignore requests for resources that don't produce DOM
// (images, stylesheets, media).
const whitelist = ['document', 'script', 'xhr', 'fetch'];
if (!whitelist.includes(req.resourceType())) {
return req.abort();
}
// Pass through all other requests.
req.continue();
});
//打开网页
await page.goto(url, {
timeout: 20000, //连接超时时间，单位ms
waitUntil: 'networkidle0' //网络空闲说明已加载完毕
});
//获取渲染好的页面源码。不建议使用await page.content();获取页面，因为在我测试中发现，页面还没有完全加载。就获取到了。页面源码不完整。也就是动态路由没有加载。vue路由也配置了history模式
let html = await page.evaluate(() => {
return document.getElementsByTagName('html')[0].outerHTML;
});
await page.close();
return html;
}
module.exports = spider;
- 创建优化puppeteer性能角本，默认不加载一些多余的功能，提高访问效率：puppeteer-pool.js
const puppeteer = require('./node_modules/puppeteer');
const MAX_WSE = 2; //启动几个浏览器
let WSE_LIST = []; //存储browserWSEndpoint列表
//负载均衡
(async () => {
for (var i = 0; i < MAX_WSE; i++) {
const browser = await puppeteer.launch({
//无头模式
headless: true,
//参数
args: [
'--disable-gpu',
'--disable-dev-shm-usage',
'--disable-setuid-sandbox',
'--no-first-run',
'--no-sandbox',
'--no-zygote',
'--single-process'
],
//一般不需要配置这条，除非启动一直报错找不到谷歌浏览器
//executablePath:'chrome.exe在你本机上的路径，例如C:/Program Files/Google/chrome.exe'
});
let browserWSEndpoint = await browser.wsEndpoint();
WSE_LIST.push(browserWSEndpoint);
}
})();
module.exports = WSE_LIST
- 创建服务端启动脚本：service.js
需要和spider.js放在一个目录
https://www.shiyit.com需要替换成你自己的域名
const express = require('./node_modules/express');
var app = express();
var spider = require("./spider.js");
var minify = require('html-minifier').minify;
app.get('*', async (req, res) => {
let url = "https://www.shiyit.com" + req.originalUrl;
console.log('请求的完整URL：' + url);
let content = await spider(url).catch((error) => {
console.log(error);
res.send('获取html内容失败');
return;
});
// 通过minify库压缩代码
content=minify(content,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true});
res.send(content);
});
app.listen(3000, () => {
console.log('服务已启动！');
});
- 执行启动puppeteer命令
nohup node service.js &
启动成功后，可以通过tail -f nohup.out查看日志，出现服务已启动！则代表运行成功，不过极大几率会不成功，因为我就没有成功，出现了错误，贴上常见的几种错误以及解决方法。要注意，一定要出现服务已启动这几个字外，没有其他任何东西才算启动成功
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
yum install atk -y
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory
yum install at-spi2-atk
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory
yum install libxkbcommon-x11-devel
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory
yum install libXcomposite
- /home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory
yum install gtk3
4. 配置Nginx
- docker 或直接安装nginx
如果使用的是docker或直接安装的nginx，则在配置文件添加如下代码：
location / {
proxy_set_header Host $host:$proxy_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
proxy_pass http://127.0.0.1:3000;
}
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
- 宝塔部署的nginx
选择你的主页网站，点设置进入在选择伪静态，在里面添上如下代码：
location / {
proxy_set_header Host $host:$proxy_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
proxy_pass http://127.0.0.1:3000;
}
index index.html index.htm;
try_files $uri $uri/ /index.html;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=/$1 last;
break;
}
}
测试
通过以上步骤后，我们就可以来测试一下了，使用apipost来测试
这里通过输入我们的文章详情页，可以看到没配置User-Agent前是显示的首页
配置User-Agent后，可以看到显示了其他的东西，至此seo就配置成功了
还要注意一点的就是service.js文件运行启动后，可能会出现3000端口被占用，所以需要更改里面的端口换成其他即可
1414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
