puppeteer-不需重构,无痛加强vue单页面应用的SEO,提升百度收录排名

背景

最近产品觉得我们网站在百度收录上排名太靠后了,又不肯花钱,就让我们想办法提升网站的SEO。由于项目是用vue3写的,并且已经迭代多个版本了,用nuxt实在不适宜,当然俺的开发水平也不够,周期也会拉得很长,此时!想偷懒的我看到了puppeteer,可以一试!

原理

实际上就是当普通用户访问我们的网站时,访问的就是单页面应用,但是当爬虫访问我们的网站时就会被转发到puppeteer服务上,传送给爬虫的页面是比较完整的的HTML页面,有利于提升单页面应用的SEO

上流程!

首先将我们开发完的vue项目打包到本地;
将打包后的dist文件夹放在本地nginx的html文件夹下;
正常配置nginx.conf文件;
新建文件夹,执行npm init生成package.json文件;
安装express\puppeteer;
写入流程;
启动服务;
在nginx.config的 location /下配置判定是否为爬虫,是则转发至puppeteer服务。

代码

假设puppeteer服务项目名为server,则文件目录为下:
在这里插入图片描述

service.js

const express = require('./node_modules/express');
var app = express();
var spider = require("./spider.js")
app.get('*', async (req, res) => {
	 let url = "你所部署到nginx的完整访问路径,例如http://127.0.0.1:80" + req.originalUrl;
	console.log('请求的完整URL:' + url);
	let content = await spider(url).catch((error) => {
		console.log(error);
		res.send('获取html内容失败');
		return;
	});
	res.send(content);
});
app.listen(3000, () => {
	console.log('服务已启动!');
});

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: 'new',
            //参数
			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

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();
	//打开网页
	await page.goto(url, {
		timeout: 0, //连接超时时间,单位ms
		waitUntil: 'networkidle0' //网络空闲说明已加载完毕
	})
	//获取渲染好的页面源码。不建议使用await page.content();获取页面,因为在我测试中发现,页面还没有完全加载。就获取到了。页面源码不完整。也就是动态路由没有加载。vue路由也配置了history模式
	let html = await page.evaluate(() => {
		return document.getElementsByTagName('html')[0].outerHTML;
	});
	await page.close();
	return html;
}

执行node service,即可在终端看到服务已启动字样

nginx部分配置

server {
listen 80;
server_name 127.0.0.1;

location /api {
	你的后端转发配置。。。。。
}
location / {
	set $prerender 0;
	set $prerender_url 'http://120.0.0.1:3000'
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    if ($http_user_agent ~* "Sogou Pic Spider|Baiduspider|Baiduspider-render|YisouSpider|Sogou web spider|Bytespider|360Spider|Googlebot|YodaoBot") {
       set $prerender 1;
    }
    if($prerender = 1){
    proxy_pass $prerender_url;
    }
    root html/dist;
    index  index.html /index.htm;
    try_files $uri $uri/ /index.html;
}

}

测试

1.打开postman,将默认的User-Agent取消勾选,新建User-Agent,值为Bingbot,向你所部署到nginx的完整访问路径发送请求,server项目终端有输出即成功。
2.在谷歌浏览器打开开发者工具,点击右上方三个点,选择更多工具,选择网络情况,取消user-agent默认勾选,设置值为Bingbot,刷新所在页面,server项目终端有输出即成功。
在这里插入图片描述

可能会遇到的报错

  1. 新建文件夹无法安装express\puppeteer?
    在此文件夹内执行npm init,生成package.json文件即可安装包
  2. puppeteer安装一直失败?
    执行npm install puppeteer --ignore-scripts
  3. 其他问题请在评论区留言

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

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

相关文章

【华为机试】——每日刷题经验分享

【华为机试】——每日刷题经验分享&#x1f60e; 前言&#x1f64c;题目&#xff1a;HJ9 提取不重复的整数 总结撒花&#x1f49e; &#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01;&#xff01;&#xff01; &a…

LabVIEWCompactRIO 开发指南22 CVT客户端通信(CCC)

LabVIEWCompactRIO 开发指南22 CVT客户端通信&#xff08;CCC&#xff09; 如果使用第3章中讨论的CVT进行进程间通信&#xff0c;请考虑使用CCC。如果已经创建了CVT标签&#xff0c;并且想在网络上发布此数据&#xff0c;CCC不失为一个简单而优雅的解决方案。它基于TCP/IP&am…

Linux 指令3

文章目录 标题日期date时间戳 cal 日历find -name 查找which ls 搜指令whereisgrep 行文本过滤工具&#xff08;例如找到main函数入口&#xff09;用途例子 ps ajx 进程 打包压缩&#xff0c;解包解压&#xff08;过程是这么个过程&#xff0c;简化成压缩->解压&#xff09;…

Java进阶-面向对象进阶(多态包权限修饰符代码块)

1 多态 1.1 多态的形式 多态是继封装、继承之后&#xff0c;面向对象的第三大特性。 多态是出现在继承或者实现关系中的。 多态体现的格式&#xff1a; 父类类型 变量名 new 子类/实现类构造器(); 变量名.方法名();多态的前提&#xff1a;有继承关系&#xff0c;子类对象…

MySQL高级语句(三)

一、正则表达式&#xff08;REGEXP&#xff09; 1、正则表达式匹配符 字符解释举列^匹配文本的开始字符’ ^aa ’ 匹配以 aa 开头的字符串$匹配文本的结束字符’ aa$ ’ 匹配以aa结尾的字符串.匹配任何单个字符’ a.b 匹配任何a和b之间有一个字符的字符串*匹配零个或多个在它…

MHA高可用与故障切换

一、MHA的概述 1、 MHA的概念 MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故…

前端需要注意和了解的SEO

SEO的基本了解 1.什么是SEO? SEO&#xff08;Search Engine Optimization又叫做搜索引擎优化。是一种方式&#xff1a;利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 2. 前端怎么理解SEO? 对于SEO引擎&#xff0c;在前端需要的是做出来的网站&#xff0c;页面…

揭秘物联网平台设备管理核心!Java代码示例对比,一篇文章全知道!

《高并发系统实战派》-- 值得拥有 一、 设备管理模块的意义 设备管理模块是物联网平台的核心模块之一&#xff0c;主要负责设备的接入、注册、管理、监控等工作&#xff0c;是构建物联网平台的基础。通过设备管理模块&#xff0c;可以实现对设备的资源动态管理、设备状态实时…

服务(第二十一篇)mysql高级查询语句(二)

①视图表&#xff1a; 视图表是虚拟表&#xff0c;用来存储SQL语句的定义 如果视图表和原表的字段相同&#xff0c;是可以进行数据修改的&#xff1b; 如果两者的字段不通&#xff0c;不可以修改数据。 语法&#xff1a; 创建&#xff1a;create view 试图表名 as ... 查…

vue3项目搭建超详解

vue3安装与目录讲解 文章目录 vue3安装与目录讲解安装node.jsnpm绑定淘宝镜像安装vue脚手架创建vue项目目录解释推荐使用vscode 安装node.js http://nodejs.cn/download/ 根据自己电脑的位数自行下载。可安装到任意盘哈&#xff0c;因为我C盘比较大&#xff0c;我就直接在C盘了…

springboot项目如何优雅停机

文章目录 前言kill -9 pid的危害如何优雅的停机理论步骤优雅方式1、kill -15 pid 命令停机2、ApplicationContext close停机3、actuator shutdown 停机4、ApplicationListener 监听延时停机 前言 相信很多同学都会用Kill -9 PID来杀死进程&#xff0c;如果用在我们微服务项目里…

快速入门matlab——变量练习

学习目标&#xff1a;1.掌握matlab编程中最常用的几种变量类型 2.对变量类型的属性有所熟悉&#xff0c;不要求记忆&#xff0c;知道了解即可 3.要求熟练运用这几种变量类型创建自己的变量 clear all; % 清除Workspace中的所有…

FreeRTOS_移植和配置

目录 1. 什么是FreeRTOS&#xff1f; 2. FreeRTOS 特点 3. FreeRTOS 移植 3.1 验证程序 1. 什么是FreeRTOS&#xff1f; 我们先看 FreeRTOS 的名字&#xff0c;可以分成两部分&#xff1a;Free 和 RTOS&#xff0c;Free 就是免费的、自由的、不受约束的意思&#xff0c;RTO…

ERP、SCM与CRM系统的关系和区别是什么?

在当今数字化时代&#xff0c;企业管理系统扮演着至关重要的角色&#xff0c;而ERP、SCM和CRM系统是其中三个核心组成部分。 虽然它们都在企业管理中发挥着关键作用&#xff0c;但它们各自的功能和应用领域存在一些区别。 我们先来看看&#xff0c;ERP、SCM与CRM系统分别是啥…

DevExpress:报表控件绑定数据库数据源的三种方式(Winform)

1.写在前面 如果你是和我一样&#xff0c;第一次接触DevExpress&#xff0c;并且因为网上资源眼花缭乱无从下手&#xff0c;然后脑子一转直接到DevExpress官网寻找官方使用文档的&#xff0c;那我们的了解顺序应该差不多是一致的。 DevExpress官网&#xff1a;https://www.de…

(十六)数据编辑——图形编辑②

数据编辑——图形编辑② 目录 数据编辑——图形编辑②1.5线要素的延长和裁剪1.5.1线要素延长1.5.2线要素裁剪 1.6要素的变形与缩放1.6.1要素变形操作1.6.2要素缩放操作 1.7要素结点的编辑1.7.1添加结点1.7.2删除结点1.7.3移动结点 1.5线要素的延长和裁剪 单击编辑器下拉菜单&a…

ChatGPT 联网和插件功能,下周起可直接使用,无需排队!

夕小瑶科技说 分享 来源 | 新智元 OpenAI和谷歌&#xff0c;已经打得急红了眼&#xff0c;ChatGPT Plus用户&#xff0c;下周就可以体验联网和插件功能&#xff0c;无需再排队。鲨疯了&#xff0c;真的鲨疯了&#xff01; ChatGPT&#xff0c;下周开始联网&#xff0c;并开放插…

字典翻译EasyTrans简单使用分享

前言 最近太忙了&#xff0c;一直按在项目上摩擦&#xff0c;都没有时间写分享了。今天终于市把所有负责的模块都写完了&#xff0c;本次迭代引入了字典翻译&#xff0c;借这个机会顺便分享下。 一、什么是字典翻译 所谓的字典翻译其实简单理解就是一些不常更新的有键值对属性的…

如何利用python调用API接口获取数据进行测试

一、Python 可以使用 requests 库来调用 API 接口获取数据。以下是基本的步骤&#xff1a; 1.安装 requests 库 pip install requests 2.导入 requests 库 import requests 3.构建 API 请求的 URL 根据 API 文档&#xff0c;构建请求的URL。 例如&#xff0c; https://a…

从BinDiff到0day 在IE中利用CVE-2019-1208

前言 如上所述&#xff0c;CVE-2019-1208是UAF漏洞&#xff0c;这类安全漏洞可以破坏有效数据、引发进程crash、并且可以精心利用最终导致任意代码执行。而对于本文介绍的CVE-2019-1208而言&#xff0c;成功利用此漏洞的攻击者可以获得系统当前用户权限。如果当前用户具有admi…