利用 Puppeteer 优化单页面 Vue 博客的 SEO 策略
2024-10-12
Vue.js凭借其高性能的SPA功能在现代Web编程领域颇受欢迎。尽管其SEO表现欠佳，不利于搜索引擎抓取整个网站，但SEO对于提升用户流量至关重要。本文将探讨如何利用Node.js库在不改动现有代码的前提下，对Vue单页面应用的SEO进行有效优化。
Vue单页面应用的SEO挑战
Vue.js的SPAs模式导致客户端动态装载内容，极大提升了用户交互体验，却给搜索引擎爬虫带来挑战。爬虫通常只能检索静态HTML，Vue应用中至关重要的动态内容在首次加载时往往处于不可见状态。因此，确保爬虫能够抓取页面动态信息，成为Vue开发者亟需解决的难题。
Node.js库的引入
wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz为应对该问题，建议采用一款Node.js库，其具备高级API用以管理浏览器，并通过开发者协议实现。该库预设为无头模式执行小程序开发，同时亦支持配置为有头模式。利用此方法，能够模拟浏览器活动并生成静态HTML，便于搜索引擎抓取。
tar -xzvf node-v17.9.0-linux-x64.tar.gz安装与配置Node.js库
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.js，须访问其安装路径，下载并解压安装包。随后，建立符号链接以简化命令访问，并通过执行`node-v`命令检验安装是否完成。接着，安装必要的外部工具，搭建并切入项目文件夹seo优化，安裝所需依赖库。尽管过程细致，这些却是实施SEO优化的根本步骤。
创建服务器端运行脚本
项目目录中，须构建数个核心脚本。初为页面渲染脚本，专用于生成静态HTML页面内容。次为性能优化脚本，默认禁用冗余功能，以提升访问速度。终为服务器启动脚本seo优化，负责启动服务器并供应生成静态内容以供搜索引擎抓取。
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在服务器启动后，运用`tail-f.out`指令即能监控日志以验证启动状态。若启动不果，常见故障如端口冲突可用调整端口方法解决。启动成功的标志是日志中仅显示“服务已启动”，并无其他错误信息。
配置与测试
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;
成功启动服务器后，执行下列配置步骤。若采用宝塔面板，于伪静态设置中插入必需代码。配置完毕，应用测试工具验证静态HTML内容的生成情况。对照配置前后的数据，可验证SEO优化的成效。
常见问题与解决方法
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操作过程可能遭遇诸如端口占用或配置失误等多种难题。我们将依据具体错误指引，施行针对性措施。若3000端口遭占用，可通过修改配置以选用未被占用的端口号。细微调整将有助于保证服务器平稳运行。
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('服务已启动！');
});总结与展望
以上流程令Vue单页面应用SEO优化在原代码未改动的前提下成为可能。虽然实施过程可能较为繁琐，遵循步骤逐一操作即可达成预期效果。展望未来，技术进步有望带来更便捷高效的做法。
nohup node service.js &请问在执行Vue单页面应用的搜索引擎优化时网站开发，哪一环节最为棘手？敬请于评论区分享您的见解与经验，同时不妨点赞与转发本篇文章。
