Vue3+Vite使用Puppeteer进行SEO优化（SSR+Meta）

news2025/1/20 1:52:38

1. 背景

【笑小枫】https://www.xiaoxiaofeng.com上线啦
资源持续整合中，程序员必备网站，快点前往围观吧~

image-20240124104235133

我的个人博客【笑小枫】又一次版本大升级，虽然知道没有多少访问量，但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实现，所以又切回了Vue3项目，本文就是对于Vue单页面项目SEO优化的一个简单的完整方案。

此次优化的最大好处，就是SSR时对已有的vue项目0侵入，不需要改任何的代码，赞啊👍👍👍

2. 技术选型

  • vue：3.2.47
  • vite：2.9.9
  • vue-meta：3.0.0-alpha.8
  • puppeteer：19.8.0

2.1 简单描述下如何SEO

唉，说实话，是个毛线的选型，我是先吭哧吭哧把项目上线了，才又想起来SEO这个坑，心累~

对于Vue来说，SEO最大的坑，如何返回渲染后的页面，也就是下面说的SSR了，然后就是动态Meta。

看看Vue.js关于SSR的介绍吧，很详细，也给出了方案

https://cn.vuejs.org/guide/scaling-up/ssr.html#overview

image-20240122165459714

image-20240122165607333

确实，Vue也给出了更通用的方案。

全程百度+cv写出的Vue代码，这些通用的方案并不适合我。

2.2 简单说说这几种方案吧

  • 网上比较多的是使用Nuxt.js，但是用我已经开发好的项目来改，说实话，前端小白的我实在是改不动了。
  • Quasar不太了解，不过多介绍了。
  • Vite SSR，Vite 提供了内置的Vue 服务端渲染支持。也要改已有代码，不想改，不会改。

好吧，官方给的方案被我否定了，就是想找个不用修改已有代码的方法。太难了~

经过不懈的百度努力，发现了一线生机phantomjs，简单说说这个吧

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

废了好大一番功夫，然后爬取到的数据仍然是没有渲染的数据，尴尬的一批。

2.3 我使用的解决方案

说了这么多废话，说说我的最终解决方案吧~

用的方式类似于PhantomJS，使用的Puppeteer

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过开发工具协议控制 Chrome/Chromium。 Puppeteer 默认以无头模式运行，但可以配置为在完整 (“有头”) Chrome/Chromium 中运行。

Puppeteer的作用，我主要用到的是SSR：

  • 生成页面的屏幕截图和 PDF。
  • 抓取 SPA（单页应用）并生成预渲染内容（即 “SSR”（服务器端渲染））。
  • 自动化表单提交、UI 测试、键盘输入等。
  • 使用最新的 JavaScript 和浏览器功能创建自动化测试环境。
  • 捕获站点的时间线痕迹以帮助诊断性能问题。
  • 测试 Chrome 扩展程序。

3. SEO实现-Meta设置

meta标签用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）、搜索引擎（如SEO）及其他web服务，这里使用vue-meta进行设置。

3.1 Vue-meta 简介与安装

  1. Vue-meta 是一个 Vue.js 的插件，允许你在组件中操作应用的 meta 信息，如标题、描述等。它对于单页应用 (SPA) 和服务端渲染 (SSR) 的项目特别有价值，因为它们在处理 meta 信息方面要比传统的多页面应用要复杂得多。

  2. 为了使用 Vue-meta，首先需要安装。推荐使用 npm 进行安装，执行以下命令即可：

npm i -S vue-meta@next

目前 vue-meta3 还是处于 alpha 阶段，不要低于 3.0.0-alpha.7

  1. 接下来，需要在 Vue 项目中引入并使用 Vue-meta。在项目的 main.js 文件中，添加如下代码：
import { createApp } from "vue";
import { createMetaManager} from 'vue-meta'

const app = createApp(App);

app.use(createMetaManager(false, {
        meta: { tag: 'meta', nameless: true }
    }));
app.mount("#app");
  1. 在App.vue中添加<metainfo></metainfo>标签，一定要添加，不然不生效哟
<template>
  <metainfo></metainfo>
  <router-view />
</template>

3. 在组件中使用 Vue-meta

  1. 安装并引入 Vue-meta 后，可以在 Vue 组件中使用它。要在组件中添加 meta 信息，如标题、描述等，可以在组件内引用，在onMounted中设定相关的信息：
<script setup>
    import {onMounted} from "vue";
	
	import { useMeta } from 'vue-meta';

    onMounted(() => {
      useMeta({
        title: '笑小枫🍁 - 程序员的世外桃源',
        meta: [
          { name: 'keywords', content: '笑小枫,java,SpringBoot,程序员' },
          { name: 'description', content: '欢迎来到笑小枫，我们致力于打造一个开放、友好的技术社区，让知识和智慧在这里自由碰撞、绽放。欢迎加入我们的旅程，一起在技术的海洋中探索无限可能！' }
        ]
      });
    });
</script>
  1. 上述代码中，我们设定了页面的 title（标题）为 “Vue-meta 示例”，并添加了两个 meta 标签：description（描述）和 keywords（关键词）。组件渲染时，Vue-meta 将自动更新这些 meta 信息。

3.3 Vue-meta 的高级用法

  1. Vue-meta 不仅可以设置 meta，还支持设置其他 HTML 标签，如 link、style、script 等。下面是一个为页面添加样式和脚本的例子：
<script setup>
    import {onMounted} from "vue";
	
	import { useMeta } from 'vue-meta';

    onMounted(() => {
      useMeta({
        title: '笑小枫🍁 - 程序员的世外桃源',
        meta: [
          { name: 'keywords', content: '笑小枫,java,SpringBoot,程序员' },
          { name: 'description', content: '欢迎来到笑小枫，我们致力于打造一个开放、友好的技术社区，让知识和智慧在这里自由碰撞、绽放。欢迎加入我们的旅程，一起在技术的海洋中探索无限可能！' }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'
          }
        ],
        script: [
          {
            src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
            async: true,
            body: true,
          }
        ]
      });
    });
</script>

image-20240123102000401

  1. 通过请求后台数据，数据请求成功后，动态设置meta属性。最开始是放在onMounted中，因为数据也是放在onMounted中，感觉数据没有请求完，meta就渲染完了，导致不生效，暂时不知道怎么解决，误打误撞中，动态的页面会触发onUpdated事件，于是就取巧放在了onUpdated中，希望知道原因的前端大佬可以给予指导🙏🙏🙏

省略了非关键性代码，正常不会触发onUpdated，这里误打误撞了…

<script setup>
    import {onMounted, ref, onUpdated} from "vue";
    import { useMeta } from 'vue-meta';

    onMounted(() => {
      getArticleByIdClick();
    });

    onUpdated(() => {
      useMeta({
        title: articleInfo.value.title + '- 笑小枫🍁',
        meta: [
          { name: 'keywords', content: articleInfo.value.keywords },
          { name: 'description', content: articleInfo.value.description }
        ]
      })
    })
</script>

image-20240123104907511

4. SEO实现-使用Puppeteer进行SSR

Puppeteer中文网

上文简单介绍了Puppeteer，这里就不过多的介绍Puppeteer了，如需了解，可以去官网

搭建用到的工具

  • node
  • npm
  • puppeteer
  • express
  • html-minifier
  • google-chrome
  • nginx

4.1 安装Node.js和npm

已经安装过node.js的机器忽略这部分即可，可以通过node -v查看

  1. 进入node安装目录
cd /opt
  1. 下载安装包
wget https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.gz
  1. 解压安装包
tar -xzvf node-v17.9.0-linux-x64.tar.gz
  1. 设置软连接，建立快捷命令
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. 使用node -v查看是否安装成功

image-20240123150251240

4.2 安装 Puppeteer 及相关扩展工具

  1. 创建并进入项目目录，会生成node_modules
cd /home/wwwroot
mkdir puppeteer
cd puppeteer
  1. 安装 puppeteer，express 与 html-minifier
npm install puppeteer --save
npm install express
npm install html-minifier
  1. 安装依赖库
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86

4.3 创建服务器端运行脚本

  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. 创建优化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. 创建服务端启动脚本：service.js

需要和spider.js放在一个目录

https://www.xiaoxiaofeng.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.xiaoxiaofeng.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. 执行启动puppeteer命令
nohup node server.js &

启动成功后，可以通过tail -f nohup.out查看日志，出现服务已启动！则代表运行成功，期间可能会出现各式各样的问题，再百度一下吧，这里就不一一列举了。

相当与启动了一个端口为3000的puppeteer服务。

启动的时候可能端口占用 3000被占用的话就换一个其他端口。

同时也会在/root/.cache/puppeteer/chrome/下装一个对应版本的谷歌浏览器

image-20240123175040250

4.4 配置Nginx

我这里用的是docker容器启动的Nginx，proxy_pass换成对应的地址就行了，然后重启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://172.17.0.1:3000;
    }

    alias /usr/share/nginx/html/;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

这样就可以了，让我们一起来测试一下吧

首先我们先正常的请求，不加请求头，请求结果如下，可以看到是没有渲染的vue页面。

image-20240123180851158

然后我们加上请求头（这里直接复制了百度请求头）User-Agent:Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)，再次访问，可以看到请求到了渲染后的网页。

image-20240123180806989

我们最后再去百度收录看一下爬取诊断吧。

处理前，百度爬取到的内容：

image-20240123181333527

处理后，百度爬取到的内容（截图有限，看滚动条就可以清楚看见）：

image-20240123181412003

最后，看一下我们网站访问有没有受影响吧，完美收官~

image-20240123181540015

5.说说遇到的问题吧

  1. 首先通过服务器端渲染后返回，对服务器是有一定压力影响的，这个不可避免。
  2. 上线后时不时会遇到这个错误，然后后续请求都会一直报错，正在排查原因。（可能是服务器配置太低的问题）

image-20240124093055967

  1. 每次都渲染JS，加载速度很慢

PS：莫名奇妙不知道优化了啥，速度一下提上来了，百度爬虫从原来的7s降到了1s，上文中的代码已经是优化后最新的代码。

6. 关于笑小枫

本文到此就结束了，如果帮助到你了，帮忙点个赞👍

🐾我是笑小枫，全网皆可搜的【笑小枫】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1416176.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++ 右值引用 std::move和std::forward的使用

C++ 右值引用 std::move和std::forward的使用

前言 右值引用&#xff0c;std::move(移动语义)和std::forward(完美转发)都是C11里面的特性。 使用右值引用和移动语义&#xff0c;可以避免无谓的复制&#xff0c;提供了程序性能。 右值引用 在说明右值引用之前&#xff0c;先说下什么是左值&#xff0c;什么是右值。 左值…
阅读更多...
Stable Diffusion与Midjourney：如何做出明智之选？

Stable Diffusion与Midjourney：如何做出明智之选？

Stable Diffusion与Midjourney&#xff1a;如何做出明智之选&#xff1f; 在人工智能领域中&#xff0c;Stable Diffusion和Midjourney是两个备受瞩目的技术。它们各自具有独特的特点和优势&#xff0c;但选择哪一个更适合您的需求呢&#xff1f;本文将为您详细分析两者的差异…
阅读更多...
Unity中创建Ultraleap 3Di交互项目

Unity中创建Ultraleap 3Di交互项目

首先&#xff0c;创建新的场景 1、创建一个空物体&#xff0c;重命名为【XP Leap Provider Manager】&#xff0c;并在这个空物体上添加【XR Leap Provider Manager】 在物体XP Leap Provider Manager下&#xff0c;创建两个子物体Service Provider(XR)和Service Provider(…
阅读更多...
蓝桥杯省赛无忧 课件46 第5次学长带练配套课件

蓝桥杯省赛无忧 课件46 第5次学长带练配套课件

01 聪明的小羊肖恩 02 阿坤老师的独特瓷器 03 妮妮的月饼工厂 04 可凑成的最大花束数 05 四个瓶子的问题 06 如今扔是遥远的理想之城
阅读更多...
12.5内存操作流(血干JAVA系列)

12.5内存操作流(血干JAVA系列)

12.5内存操作流 12.5内存操作流ByteArraylnputStream类的主要方法ByteArrayOutputStream 类的主要方法【例12.33】使用内存操作流完成一个大写字母转换为小写字母的程序 12.5内存操作流 在 流 的 操 作 中 除 了 进 行 文 件 的 输 入 与 输 出 操 作 之 外 &#xff0c; 也 可…
阅读更多...
Modern C++ std::unique_ptr的实现原理

Modern C++ std::unique_ptr的实现原理

​ unique_ptr是一个非常简单的类，没有计数没有原子操作，非常类似纯指针。 它的类定义也非常简单： 它针对数组做了模板偏特化，因为它得支持数组操作比如Arr[i]。 unique_ptr的本质就是std::tuple, 里面第一项为指针指向管理对象，第二项为deleter：是一个函数指针或仿函数…
阅读更多...
什么是网络？

什么是网络？

你是一台电脑&#xff0c;你的名字叫 A 很久很久之前&#xff0c;你不与任何其他电脑相连接&#xff0c;孤苦伶仃。 直到有一天&#xff0c;你希望与另一台电脑 B 建立通信&#xff0c;于是你们各开了一个网口&#xff0c;用一根网线连接了起来。 用一根网线连接起来怎么就能&…
阅读更多...
探索如何使用Python实现关注微信公众号实现登录的功能（用户认证）

探索如何使用Python实现关注微信公众号实现登录的功能（用户认证）

文章目录 📖 介绍 📖🏡 环境 🏡📒 实现方法 📒📝 准备工作📝 源码分享⚓️ 相关链接 ⚓️📖 介绍 📖 本文将与大家分享一下如何使用python实现扫描二维码关注微信公众号，并通过用户认证从而实现登录。本文将主要分享功能实现的完整思路，并包含部分功能实…
阅读更多...
使用人工智能助手 Github Copilot 进行编程 02

使用人工智能助手 Github Copilot 进行编程 02

本章涵盖了 在您的系统上设置 Python、VS Code 和 Copilot引⼊ Copilot 设计流程Copilot 的价值在于基本的数据处理任务本章将帮助您在自己的计算机上开始使用 Copilot，并熟悉与其的交互方式。在设置好Copilot 后，我们将要求您尽可能跟随我们的示例进行操作。实践是最好的学习…
阅读更多...
数据结构C++队列（数组模拟）

数据结构C++队列（数组模拟）

队列也是比较简单的数据结构了&#xff0c;队列的特点是先进先出 下面代码中hh是队头&#xff0c;tt是队尾。 默认是从队尾插入数据&#xff0c;队头弹出数据。 代码中的数据结构可以使用这图片来解释&#xff0c;整个区间是数组q。hh和tt分别控制队头和队尾。 例题&#x…
阅读更多...
cocos添加节点事件的3种方式

cocos添加节点事件的3种方式

我们以button为例来说明一下cocos怎样为节点添加事件&#xff1a; 直接通过cocos熟悉检查器绑定 添加事件脚本 import { _decorator, Component, Node, input, Input, Button, EventKeyboard } from cc; const { ccclass, property } _decorator;ccclass(Attack) export cla…
阅读更多...
【笔试常见编程题01】删除公共字符串、组队竞赛、倒置字符串、排序子序列

【笔试常见编程题01】删除公共字符串、组队竞赛、倒置字符串、排序子序列

1. 删除公共字符串 输入两个字符串&#xff0c;从第一字符串中删除第二个字符串中所有的字符。 例如&#xff0c;输入”They are students.”和”aeiou”&#xff0c;则删除之后的第一个字符串变成”Thy r stdnts.” 输入描述 每个测试输入包含2个字符串 输出描述 输出删除后的…
阅读更多...
事务：分布式事务与本地事务的区别

事务：分布式事务与本地事务的区别

分布式事务章节 分布式事务&#xff1a;2PC与3PC的区别-CSDN博客 分布式事务&#xff1a;X/Open DTP分布式事务处理模型与分布式事务处理XA规范-CSDN博客 事务简介 事务(Transaction)是操作数据库中某个数据项的一个程序执行单元(unit)。事务是由一组操作构成的可靠的独立的…
阅读更多...
【Linux】Linux中的日志查询方法

【Linux】Linux中的日志查询方法

文章目录 linux日志与日志的查询方法更多journalctl用法journalctl用法案例部分日志路径说明推荐阅读 linux日志与日志的查询方法 在Linux系统中&#xff0c;日志文件用于记录系统的各种运行信息和错误消息。常见的日志文件包括但不限于/var/log/下的各种日志&#xff0c;如me…
阅读更多...
foxmail开启不能自动启动解决办法

foxmail开启不能自动启动解决办法

1、不要以管理员权限启动&#xff0c;不勾选管理员权限。 2、在foxmail设置里勾选“开机自动启动”
阅读更多...
微信小程序（二十）Vant组件库的配置

微信小程序（二十）Vant组件库的配置

教程很详细&#xff0c;直接上过程 上一篇 官方文档也有&#xff0c;但是因为版本的更新&#xff0c;官方文档并没有跟着改变&#xff0c;这里我写一份最新版能用的教程 &#xff08;口头禅还是不能少的&#x1f923;&#x1f923;&#x1f923;&#xff09; 灵魂拷问&#xf…
阅读更多...
增加/调整硬盘空间有效的 8 款管理磁盘分区软件分享

增加/调整硬盘空间有效的 8 款管理磁盘分区软件分享

适用于电脑的最佳分区管理器是一个出色的工具&#xff0c;可以增加硬盘空间并确保最有效地管理磁盘分区。因此&#xff0c;请继续阅读以详细了解它们。 电脑上的存储问题并不是什么新鲜事。然而&#xff0c;随着最新 电脑的出现&#xff0c;情况有所改善。但似乎没有足够的空间…
阅读更多...
数据监控-Prometheus/Grafana

数据监控-Prometheus/Grafana

一、数据监控Prometheus 1、什么是Prometheus Prometheus是由SoundCloud开源监控告警解决方案，从2012年开始编写代码，到2015年github上开源以来，吸引不少用户以及公司的使用。Prometheus作为新一代的开源解决方案，很多理念与Google SRE的运维之道不谋而合。 2、Promet…
阅读更多...
如何使用数据恢复软件恢复已删除的文件

如何使用数据恢复软件恢复已删除的文件

在计算机时代之前&#xff0c;数据一直以物理方式存储在纸张上。然后通过收集论文&#xff0c;创建了一个大数据库。收集到的论文存放在大房间或数据收集中心。笔和纸系统的一个很大的缺点是&#xff0c;如果你想找到特定的数据&#xff0c;就像在沙子里找到一根针一样。 计算…
阅读更多...
2023 IoTDB Summit：Dr. Feinauer《Apache IoTDB在德国工业和关键基础设施中的应用》

2023 IoTDB Summit：Dr. Feinauer《Apache IoTDB在德国工业和关键基础设施中的应用》

12 月 3 日&#xff0c;2023 IoTDB 用户大会在北京成功举行&#xff0c;收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题&#xff0c;多位学术泰斗、企业代表、开发者&#xff0c;深度分享了工业物联网时序数据库 IoTDB 的技术创新…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023