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, //连接超时时间,单位mswaitUntil: '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项目终端有输出即成功。
关于linux环境下的按照部署可以看这篇文章 linux下express+puppeteer安装部署并用PM2守护进程
可能会遇到的报错
- 新建文件夹无法安装express\puppeteer?
在此文件夹内执行npm init,生成package.json文件即可安装包 - puppeteer安装一直失败?
执行npm install puppeteer --ignore-scripts - 其他问题请在评论区留言
puppeteer-不需重构,无痛加强vue单页面应用的SEO,提升百度收录排名相关推荐
- 给大家推荐一个Vue 单页面程序无法SEO的解决办法
给大家推荐一个vue 单页面搜索引擎无法SEO的解决办法 这两天用Vue3做了一个免费下载书籍的小网站,https://book.usejs.cn:大家可以先看下效果 前端项目做完.部署了之后想让搜索 ...
- vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
- vue单页面通过prerender-spa-plugin插件进行SEO优化
prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详细参考我的另一篇博客:VueSSR的一 ...
- app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏 项目第一次上线正常 项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
Nginx 解决WebApi跨域二次请求以及Vue单页面问题 参考文章: (1)Nginx 解决WebApi跨域二次请求以及Vue单页面问题 (2)https://www.cnblogs.com/ji ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题 参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
- nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决 参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
fullpage在vue单页面当中使用会出现的问题以及解决办法 参考文章: (1)fullpage在vue单页面当中使用会出现的问题以及解决办法 (2)https://www.cnblogs.com/ ...
- php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
最新文章
- 编译安装MySQL5.6失败的相关问题解决方案
- idea在mac版怎么配置svn_使用Mac自带svn搭建服务器,并使用idea进行连接
- 论文中常用的几个Word2010技巧
- WPF 实现展示反应盘、者试剂仓控件
- [转载] Java 重写paint绘图
- MYSQL的replace into
- 02-HTML标签语法+字体标记
- python画折线图虚线_python绘制简单折线图代码示例
- MyBatis数据库连接的基本使用-补充Mapper映射器
- Nginx 场景应用
- 在 dotnet core (C#)下的颜色渐变
- MAVEN常用知识点总结
- 全国高校计算机能力挑战赛Java试题(一)
- python实现复联4影评数据词云可视化分析
- 计算机网络 理解拥塞控制
- RTK ST5113-53 3kN 220VAC
- matlab数据转换为tecplot格式[ASCII码格式下的plt文件]
- 计算机翻译图片,扫描图片翻译在线翻译方法(纯干货~)
- 你给员工吃肉,你将迎来一群狼!
- 成都工控开发:太简单了!串口触摸屏开发HMI的全流程介绍
热门文章
- 考计算机科学考研老师问,计算机考研经验征集、常见问题解答及考研励志帖
- 使用python解决验证码登录并爬取登录后的个人界面:本篇以古诗文网站为例
- Neo4j algo
- 王者微信去什么服务器好,王者荣耀:为什么微信区比QQ区容易上王者,老玩家道出实情...
- 一张图片怎么加音乐做成视频?音乐相册软件分享!​
- vue项目xlsx导入
- linux获取符号表调试
- C++ for循环执行顺序
- torch中contiguous()函数
- 关于补码移码各自和原码的联系、来历、功能及I EEE754标准中移码范围问题