Vue3+Vite使用Puppeteer进行SEO优化(SSR+Meta)

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 SSRVite 提供了内置的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. 关于笑小枫

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MES管理系统计划排产有哪些重要作用

在当今制造业中&#xff0c;MES管理系统解决方案已经成为提高生产效率、优化资源利用以及提升企业整体运营水平的关键工具。尤其是在生产计划排产这一核心环节&#xff0c;MES管理系统发挥着无可替代的作用。通过精准的计划和调度&#xff0c;MES管理系统帮助企业实现生产过程的…

SAP EXCEL上传如何实现指定读取某一个sheet页(ALSM_EXCEL_TO_INTERNAL_TABLE)

如何读取指定的EXCEL sheet 页签&#xff0c;比如要读取下图中第二个输出sheet页签 具体实现方法如下&#xff1a; 拷贝标准的函数ALSM_EXCEL_TO_INTERNAL_TABLE封装成一个自定义函数ZCALSM_EXCEL_TO_INTERNAL_TABLE 在自定义函数导入参数页签新增一个参数SHEET_NAME 在源代码…

【word密码】Word 文档设置了只读为什么还能编辑?

有些朋友可能会遇到这种疑问&#xff0c;为什么我的Word文档设置了只读模式&#xff0c;还是可以编辑的&#xff0c;这是什么原因呢&#xff1f; 其实是因为大部分的只读模式&#xff0c;设置完成之后都是可以编辑的&#xff0c;但是当我们进行保存的时候就会发现&#xff0c;…

【边缘计算】TA的基本概念,以及TA的挑战和机遇

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读文章&#xff01; 此篇是【话题达人】序列文章&#xff0c;这一次的话题是《边缘计算的挑战和机遇》 文章将以博主的角度进行讲述&#xff0c;理解和水平有限&#xff0c;不足之处&#xff0c;望指正。 目录 背景基本概念挑战…

软件游戏提示msvcp140.dll丢失的解决方法,全面分析msvcp140.dll文件

msvcp140.dll是Microsoft Visual C 2015 Redistributable的一部分&#xff0c;它包含了许多用于运行程序的函数和类库。当这个文件丢失或损坏时&#xff0c;依赖于该组件的应用程序可能无法正常启动&#xff0c;系统会弹出错误提示&#xff0c;告知用户找不到msvcp140.dll文件。…

【Linux】糟糕,是心动的感觉——与Linux的初次相遇

初识Linux 导言一、计算机的发展1.1 历史背景1.2 计算机的发明 二、操作系统2.1 什么是操作系统&#xff1f;2.2 操作系统的诞生2.3 操作系统的发展2.3.1 批处理系统的发展2.3.2 分时系统2.3.3 实时系统2.3.4 通用操作系统 2.4 UNIX操作系统2.4.1 UNIX的诞生2.4.2 UNIX的发展 2…

ESXI 本地和虚拟机之间可以自由复制和粘贴

文章目录 ESXI 本地和虚拟机之间可以自由复制和粘贴 ESXI 本地和虚拟机之间可以自由复制和粘贴 web访问esxi&#xff0c;然后&#xff1a; 1、右击新建的虚拟机&#xff0c;确保是在关机状态下&#xff0c;点击编辑设置 2. 找到 虚拟机选项→高级→常规→配置参数 3、点击添加…

Scrapy爬虫在新闻数据提取中的应用

Scrapy是一个强大的爬虫框架&#xff0c;广泛用于从网站上提取结构化数据。下面这段代码是Scrapy爬虫的一个例子&#xff0c;用于从新闻网站上提取和分组新闻数据。 使用场景 在新闻分析和内容聚合的场景中&#xff0c;收集和组织新闻数据是常见需求。例如&#xff0c;如果我…

❤css实用

❤ css实用 渐变色边框&#xff08;Gradient borders方法的汇总 5种-代码可直接下载&#xff09; 资源链接 https://download.csdn.net/download/weixin_43615570/88779950?spm1001.2014.3001.5503 给 border 设置渐变色是很常见的效果&#xff0c;实现这个效果有很多思路 1…

Python requests网络库源码分析(第三篇:通过学习异常模块,了解http协议)

前言 作者在requests包下&#xff0c;定义了exceptions模块&#xff0c;该模块中定义执行http请求过程中常见的错误&#xff0c;熟悉这些错误有助于我们写出健壮的业务程序&#xff0c;同时还能温习http的知识点&#xff0c;本文基于的requests版本为2.27.1 exceptions模块&…

Sectigo多域名通配符证书区别买一年送一个月

Sectigo是国际知名CA认证机构之一&#xff0c;旗下有多种SSL数字证书&#xff0c;如单域名SSL证书、多域名SSL证书、通配符SSL证书、IP证书、多域名通配符SSL证书等。Sectigo旗下的多域名通配符证书有两种&#xff0c;它们在保护的域名类型和数量上存在一定差异&#xff0c;今天…

学校门禁监控,怎么管理更高级?

随着社会的不断发展和科技的飞速进步&#xff0c;安全管理成为各个领域不可或缺的重要环节。在这一安全管理体系中&#xff0c;门禁监控系统扮演着至关重要的角色&#xff0c;为组织、企业和机构提供了先进的、智能化的安全解决方案。 因此&#xff0c;门禁监控系统不仅仅是简单…

Linux简介

Unix的特点&#xff1a; Unix很简洁&#xff0c;Unix只提供几百个系统调用&#xff0c;并且每个调用都有明确的目的。一切皆文件&#xff0c;对数据和对文件都是通过相同的系统调用接口&#xff1a;open&#xff08;&#xff09;&#xff0c;read&#xff08;&#xff09;&…

应用监控 eBPF 版:实现高效协议解析的技术探索

作者&#xff1a;彦鸿 引言 随着 Kuberentes 等云原生技术的飞速发展&#xff0c;带来了研发与运维模式的变革。企业软件架构由单体服务向分布式、微服务演进。随着业务发展&#xff0c;多语言、多框架、多协议的微服务在企业中越来越多&#xff0c;软件架构复杂度越来越高&a…

谈谈 RocketMQ 5.0 分级存储背后一些有挑战的技术优化

作者&#xff1a;斜阳 RocketMQ 5.0 提出了分级存储的新方案&#xff0c;经过数个版本的深度打磨&#xff0c;RocketMQ 的分级存储日渐成熟&#xff0c;并成为降低存储成本的重要特性之一。事实上&#xff0c;几乎所有涉及到存储的产品都会尝试转冷降本&#xff0c;如何针对消…

火灾监测识别摄像机

火灾监测识别摄像机是一种基于视觉识别技术的智能设备&#xff0c;旨在实时监测并识别火灾&#xff0c;及时报警并提供相关数据支持&#xff0c;以提高火灾应急响应和减少火灾灾害损失。 火灾监测识别摄像机利用高清摄像头和先进的图像处理技术&#xff0c;能够对室内和室外环境…

解决Android Studio gradle下载超时和缓慢问题(win10)

解决超时问题 一般配置阿里云代理就可以解决。 具体配置方法&#xff0c;参考&#xff1a;https://blog.csdn.net/zhangjin1120/article/details/121739782 解决下载缓慢问题 直接去腾讯云镜像下载&#xff1a; https://mirrors.cloud.tencent.com/gradle/ 下载好了之后&…

Oracle2-Rollup和Cube用法

在Oracle的聚合函数中&#xff0c;会有按照维度统计的情况,比如上图按照job 和 deptno统计 sal的sum 但是也会遇到同时要求统计只按照job维度统计的情况&#xff0c;并且做到一张表里 1 union 来实现维度不一致 首先反应过来的是分两步查询&#xff0c;再讲结果union起来 s…

快速上手的AI工具-文心一言绘本创作

前言 大家好晚上好&#xff0c;现在AI技术的发展&#xff0c;它已经渗透到我们生活的各个层面。对于普通人来说&#xff0c;理解并有效利用AI技术不仅能增强个人竞争力&#xff0c;还能在日常生活中带来便利。无论是提高工作效率&#xff0c;还是优化日常任务&#xff0c;AI工具…

使用Python和PyTorch库构建一个简单的文本分类大模型:

在当今的大数据时代&#xff0c;文本分类任务在许多领域都有着广泛的应用&#xff0c;如情感分析、垃圾邮件过滤、主题分类等。为了有效地处理这些任务&#xff0c;我们通常需要构建一个强大的文本分类模型。在本篇博客中&#xff0c;我们将使用Python和PyTorch库来构建一个简单…