vue的网站用puppeteer做seo

最新推荐文章于 2024-05-11 16:27:31 发布
最新推荐文章于 2024-05-11 16:27:31 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： zapp 文章标签： vue seo spring boot 爬虫 搜索引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011327159/article/details/117566209
版权

我之前是一个个人站长，我用vue写的网站www.zfoo.com被百度索引了10w+条。

网站是原生的vue单页面应用，SEO使用puppeteer在服务端渲染页面，非常简单，几乎就用一行代码就搞定了。

简单来说如果服务器发现是爬虫，则用puppeteer在服务端把页面渲染好返回给前端。

然后效果也不错，10w+的页面都被索引到了。

但是，最后我的网站被封了，封锁的原因是SEO做的太好了，然后一些敏感信息被zf发现了，然后。。。

我已经把我的SEO的puppeteer解决方案开源了，有兴趣的可以看看。

源代码开源地址

  • zfoo&java&netty&mongodb&vue高性能学习交流群：876280300
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
愤怒哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
sparender:基于puppeteer的高性能SPA SEO解决方案
05-29
这是什么? 这是一个高性能的基于puppeteer的SSR方案, 他使用Headless Chrome从网页中生成html,然后以http的方法返回html内容 解决了什么问题 很多公司和开发者使用JavaScript框架(包括AngularJS，BackboneJS，ReactJS, VueJS)开发应用程序和网站。但很多搜索引擎，社交媒体，爬虫不支持抓取JavaScript的网页，也就无法做网站SEO。 通过UserAgent判断,如果是来自于爬虫, 则通过nginx(tomcat, Apache)等反向代理到本服务,则可以把渲染好的html网页内容传递给搜索引擎, 从而间接实现SEO,, 从而间接实现 SEO, 这样,既可以保持纯粹的前端开始思路, 还能节省 SSR 造成的服务器负担 也可以使用在爬虫采集, 生成网页截图,生成网页PDF场景 使用 git clone cd spa
mocha-vite-puppeteer:使用Vite捆绑器和Puppeteer运行Mocha测试
03-30
摩卡维特木偶 使用捆绑程序和浏览器启动器运行前端测试。 “ mocha-vite-puppeteer”可以与任何现有的Vite项目一起使用，并且不特定于Vue，React或任何其他前端库。 Vite支持JavaScript和TypeScript。 安装 npm install mocha-vite-puppeteer 跑步 使用Mocha一样，您必须首先在index.html旁边创建一个test.html。 确保配置以匹配您的测试文件名： <!DOCTYPE html > < html lang =" en " > < body > < script type =" module " > import "mocha" ; mocha . setup ( { ui : "bdd" } ) ; </ script > < script
vue项目通过puppeteer做SEO，可以使用Puppeteer在Vue项目中进行SEO，通过服务端渲染获取渲染后的HTML内容，以便搜索引擎爬虫能够正确地索引您的网页内容。
凯歌技术控团队
07-16 668
然后很快就发现了一个问题，无论是用 nohup node app.js 还是 node app.js & 只要关闭了SSH窗口就会抓取失败了。通过百度谷歌一番找到了问题，需要用PM2来守护node进程。下载vue-seo-puppeteer项目:https://github.com/lovelin0523/vue-seo-puppeteer。来验证安装是否成功，如果运行不成功需要做一下链接。修改 app.js 中域名为自己项目的域名。在项目文件夹下运行项目。用pm2来启动项目，有以下多种方式。
vue项目在多款浏览器下的兼容测试
最新发布
qq_44813770的博客
05-11 475
使用不同版本的浏览器进行测试：不同版本的浏览器可能会对 Vue3 项目的兼容性产生影响，因此需要使用不同版本的浏览器进行测试。例如，在 Chrome 浏览器中，你可以使用 DevTools 中的 Device Mode 来模拟不同设备和浏览器版本。使用在线兼容性测试工具：还有一些在线兼容性测试工具可以帮助你测试你的 Vue3 项目在多个浏览器中的兼容效果，例如 BrowserStack、CrossBrowserTesting、Sauce Labs 等等。未实施，仅是记录下答案。
vue项目通过puppeteer做SEO 已实施 正在使用中
qmt216的专栏
07-15 995
正在使用的项目https://manefuwu.com/ 下载vue-seo-puppeteer项目 npm install 查看puppeteer缺失的库 ldd node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome 安装缺失的库 NOT FUND eg： yum install libXtst.x86_64 或者 安装不了，未找到库可以使用这样的命令 yum installlibgbm*..
Vue3+Vite使用Puppeteer进行SEO优化（SSR+Meta）
笑小枫
01-25 4560
本文主要介绍了Vue项目如何做seo优化，主要从Meta设置和SSR两个方面入手，此次优化的最大好处，就是SSR时使用puppeteer渲染，对已有的vue项目0侵入，不需要改任何的代码。需要的朋友赶快来看看吧~
puppeteer-不需重构，无痛加强vue单页面应用的SEO，提升百度收录排名
qq_45840993的博客
05-15 2041
puppeteer-不需重构，无痛加强vue单页面应用的SEO，提升百度收录排名
vue无需改动代码的SEO优化【百度收录问题】优化--puppeteer（详细流程）
wuyuanshun的博客
11-07 4249
SEO优化，主要是为了解决百度收录问题，实现原理就是我们首先去访问nginx，nginx转发到puppeteer服务，由puppeteer服务模拟浏览器请求获取数据，然后返回到页面。这样可以达成直接返回html的效果了。如下图：
使用nodejs+puppeteer+mysql+electron+vue等解决自动化弹幕之熊猫直播
求知若渴、虚心若愚
01-12 1658
使用nodejs+puppeteer+mysql+electron+vue等解决自动化弹幕之熊猫直播 coding...
Vue3源码调试环境搭建的两种方式
q1003675852的博客
12-04 902
本文主要介绍两种Vue3源码调试环境的搭建。
java源码dz-zapp:网站zfoo.com的开源后端代码，图片分享，好友聊天，群聊
06-05
百度谷歌SEO，使用vue无需任何配置即可实现单页面的SEO，原理是使用puppeteer在服务端渲染页面 百度SEO主动推送 发图片，发视频，把大文件上传到oss上 聊天发图片，发视频，频道聊天，好友聊天，通过websocket实现 ...
guldrush
03-08
这个项目是用JavaScript编写的，这表明其前端部分主要基于JavaScript运行，可能利用了React或Vue等库来构建用户界面。以下是关于这些技术的详细解释： **Next.js**： Next.js 是一个基于React的开源框架，用于构建...
prerenderloaderWebpack无痛通用预渲染
08-07
在Web开发中，JavaScript框架如React、Vue或Angular等通常使用客户端渲染（Client-Side Rendering, CSR），这种模式下，浏览器下载JavaScript后才开始构建DOM并呈现页面。然而，这会导致首次加载时间较长，因为...
Pemrograman-Framework-2021
02-25
- **测试工具**：Jest和Mocha是常用的JavaScript测试框架，配合Enzyme或Puppeteer可以进行组件和端到端测试。 在"2021"这个时间点，框架可能还涉及了ES6+的新特性，如箭头函数、Promise、async/await等，以及...
前端案例研究：about有关实际企业前端开发的技术讲座和文章的精选清单
02-05
4. **SEO**：对于希望被搜索引擎良好索引的企业网站，SEO（搜索引擎优化）是关键。这包括使用语义化的HTML、设置正确的元标签、提供可爬取的URL结构等。 5. **无障碍性（Accessibility）**：企业网站需要考虑不同...
入门指南：使用Puppeteer进行前端自动化测试
寒烟说的博客
04-14 3868
Puppeteer是一个基于Node.js的自动化测试工具，由Google开发。它可以模拟人类用户在Chrome或Chromium浏览器中的操作，并捕捉浏览器的屏幕截图、生成PDF和执行表单提交等操作。它还可以在Headless模式下运行，即在没有UI界面的情况下运行浏览器。Mocha是一个JavaScript测试框架，可以用于编写前端和后端测试。它支持多种测试样式，例如BDD（行为驱动开发）和TDD（测试驱动开发），并提供了丰富的API和插件，方便用户进行灵活的测试组织和执行。
Vue puppeteer插件安装问题解决方案
FL06052146的博客
03-09 846
说明：以下三种解决思路，亲测均不可用。
puppeteer的常用操作方法
jiangshanghe的博客
04-26 671
1、实现递归滑动页面直到底部 await page.evaluate(async () => { await new Promise((resolve, reject) => { var totalHeight = 0; var distance = 100; var timer = setInterval(() => { var scrollHeight = document.body.scrollHeight; window.scrollBy(0, dis
Electron + Vue中调用puppeteer报错：Cannot run puppeteer-core outside of Node.js
wol555c的博客
06-01 790
错误消息“Cannot run puppeteer core outside of Node.js”表示你正试图在Vue.js应用程序中使用puppeteer core，这是不受支持的，因为Vue.js在浏览器环境中的客户端上运行，而Puppeter core需要Node.js运行时。Electron + Vue开发过程中，在App.vue中调用puppeteer报错：Cannot run puppeteer-core outside of Node.js。
vue3项目怎么做seo
06-08
Vue 3 是一个非常流行的前端框架，但由于其使用了单页面应用程序（SPA）模式，因此可能会对搜索引擎优化（SEO）产生一些挑战。以下是一些在 Vue 3 项目中实现 SEO 的方法： 1. 使用服务器端渲染（SSR）：SSR 可以将...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值