Vue项目进行Seo优化

作者：微信小助手

发布时间：2025-01-01T21:27:08

前言

我的拾壹博客博客网站是由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查看

  1. 1. 进入node安装目录cd /opt

  2. 2. 下载安装包

wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz

  1. 1. 解压安装包

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/

  1. 1. 使用node -v查看是否安装成功

    image.png

    2. 安装 Puppeteer 及相关扩展工具

  2. 2. 创建并进入项目目录，会生成node_modulescd /home
    mkdir puppeteer
    cd puppeteer

  3. 3. 安装 puppeteer，express 与 html-minifier

npm install puppeteer --save
npm install express
npm install html-minifier

  1. 1. 安装依赖库

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86

3. 创建服务器端运行脚本

  1. 1. 创建渲染请求的页面脚本：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;

  1. 1. 创建优化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

  1. 1. 创建服务端启动脚本：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('服务已启动！');
});

  1. 1. 执行启动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 directoryyum 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

  1. 1. 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;
}

  1. 1. 宝塔部署的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前是显示的首页

image.png

配置User-Agent后，可以看到显示了其他的东西，至此seo就配置成功了

image.png

还要注意一点的就是service.js文件运行启动后，可能会出现3000端口被占用，所以需要更改里面的端口换成其他即可