Vue SPA项目SEO优化之预渲染Prerender-spa-plugin

最新推荐文章于 2024-07-08 14:42:07 发布
最新推荐文章于 2024-07-08 14:42:07 发布
阅读量585 收藏
点赞数
文章标签： seo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_56659504/article/details/115551177
版权
Vue的SPA项目因爬虫无法抓取静态文本，使用预渲染插件prerender-spa-plugin能解决SEO问题。该插件适用于SEO需求、缓慢客户端加载和OpenGraph/Social Metadata，但不适合用户特定内容和频繁变动的页面。通过Webpack配置，编译后每个路由对应静态页面，结合Apache或Nginx配置，实现静态文件的SEO友好访问。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目的

由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容，通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题。

可以看到项目编译后的index.html中只有一些HTML和js，css文件的引用，而无关于内容的静态文本。当然你也可以添加meta的keyword和descrption,去简答的描述一些关于网站的内容。

curl xxxx.com 
// 返回的结果发现只有简单的HTML和js引用，无相关的静态文本

使用过程

Vue预渲染插件Prerender-spa-plugin GitHub地址

能够解决的问题

  • SEO
  • Slow Client
  • OpenGraph/Social Metadata

不能解决

  • User-specific content、
    • 不同的用户看都会不同的页面，这种类型的页面不适用预渲染
  • Frequently changing Content
    • 对于一些经常发生变化的页面，如体育比赛等，会导致编译后的数据不是实时更新的
最低0.47元/天 解锁文章
安也 i
关注
前端性能优化(四) 预渲染 prerender-spa-plugin
weixin_39357177的博客
07-23 2096
前言 单页面应用中，整个web项目只有一个页面，使用路由机制进行组件之间的切换，动态的渲染页面内容。这就是客户端渲染，具有数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离等优点。单页应用在优化用户体验的同时，也给我们带来了一些问题，例如对SEO不友好，首屏时间过长等。因此，服务端渲染（SSR）和预渲染（Prerender）技术应运而生。 服务端渲染与预渲染的优点 SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件初始只有<div id="app></div
八、SPA单页面实现SEO优化之预渲染prerender-spa-plugin
最新发布
qq_44849312的博客
08-23 1321
六、什么是SEO优化（搜索引擎优化）？SPA单页面应用如何实现SEO优化？通过上一篇文章我们介绍了服务端渲染的方式来实现单页面应用的SEO优化。但是，服务端渲染的方式对开发并不友好，它需要约定各种规范，比较适合开发大型网站。对于一些微型网站，比如个人博客，或者公司的小型应用网站，路由数量，页面数量并不多，我们可以使用prerender-spa-plugin预渲染来实现SPA单页面的SEO优化。它的优点是简单方便，不需要改动太多原来的项目内容。
vue 项目预渲染（prerender-spa-plugin）
热门推荐
吾日三省吾身：高否？富否？帅否？ 否！否！否！ 安心上班吧……
06-03 1万+
服务器端渲染 vs 预渲染 (SSR vs Prerendering) 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如/,/about,/contact等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以...
vue通过prerender-spa-plugin实现预渲染
mmcadmin的博客
02-14 660
vue通过prerender-spa-plugin实现预渲染
prerender-spa-plugin 复杂vue项目踩坑
2301_81336632的博客
07-08 584
Unable to prerender all routes! 报错解决 prerender-spa-plugin 本地打包报错解决
vue项目seo prerender-spa-plugin
weixin_49409651的博客
02-22 259
【代码】vue项目seo prerender-spa-plugin。
vue-cli单页面预渲染seo-prerender-spa-plugin操作
10-14
预渲染插件 `prerender-spa-plugin` 正是为此目的设计的。它可以在构建过程中生成预渲染的HTML文件，以便搜索引擎可以看到页面的初始内容。以下是使用 `prerender-spa-plugin` 的详细步骤： 1. 安装插件： 如果你...
vue-cli-plugin-prerender-spa:通过预渲染Vue应用程序来增强SEO。 由prerender-spa-plugin提供支持
05-14
vue-cli-plugin-prerenderspa 使用零配置将prerender-spa-plugin添加到您的Vue应用程序。 寻找共同维护者：我将继续维护该项目，但是我仍然希望在某些问题上获得帮助，并且随着它越来越受欢迎，通常可以帮助我保持...
vue单页面seo(prerender-spa-plugin,vue-meta-info)
01-13
为了解决这个问题，开发者可以使用 `prerender-spa-plugin` 和 `vue-meta-info` 这两个工具来优化Vue.js应用的SEO。 `prerender-spa-plugin` 是一个Vue CLI插件，用于在构建时预先渲染Vue.js应用程序的特定路由。预...
prerender-spa-plugin
weixin_44230807的博客
06-08 168
prerender-spa-plugin 前端预渲染
使用prerender-spa-plugin进行单页面项目SPA优化
weixin_38954787的博客
04-15 754
这里写自定义目录标题服务器端渲染 vs 预渲染 (SSR vs Prerendering)三种不同渲染方式的区别：预渲染解决的问题： 服务器端渲染 vs 预渲染 (SSR vs Prerendering) 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，...
【开发小记】vue项目预渲染（prerender-spa-plugin）
GUANYX的博客
09-18 1893
（3）预渲染：构建阶段生成匹配预渲染路径的html文件（注意：每个需要预渲染的路由都有一个对应的html—），构建出来的html文件已经有静态数据，需要ajax数据部分未构建。（2）服务端渲染：用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端，前端接收到html时已有当前url下的完整页面；（3）低版本浏览器：用户的浏览器可能不支持我们的使用的js特性，预渲染或者服务端渲染能够让用户至少能看见首屏的内容，而不是一个空白的网页。有可能出现白屏，且SEO不友好。
使用prerender-spa-plugin实现vue预渲染
九段刀客的博客
04-10 394
初始化 创建一个项目 vue create test 添加预渲染依赖 npm prerender-spa-plugin -D 代码 vue.config.js const PrerenderSPAPlugin = require("prerender-spa-plugin"); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require("path"); module.exports = { configur
vue 预渲染 prerender-spa-plugin
weixin_30780649的博客
08-26 343
最近项目上线要做运营，vue单页面做运营很不友好 一开始用的这个配置 const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackC...
vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）
qq_15603061的博客
04-22 263
vue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种： SSR服务器渲染,如Nuxt.js。 预渲染模式，这比服务端渲染要简单很多，而且可以配合 vue-meta-info 来生成title和meta标签，基本可以满足SEO的需求 注意： 使用预渲染vue-router必须使用history模式 build生成的代码必须放在服务器根目录，否则会报错 可参考官...
Vue-cli使用prerender-spa-plugin插件预渲染Vue服务端渲染
細水、長流√的专栏
03-15 1036
前言：使用vue-cli打包项目一般为spa项目，众所周知单页面应用不利于SEO，有ssr和预渲染两种解决方案，这里我们只讨论预渲染。此教程使用的prerender-spa-plugin版本和vue版本 "prerender-spa-plugin": "^3.4.0", "vue": "^2.5.17", vue-cli有2.0和3.0版本，解决方法是不一样的，这里我们要分开讨论。 vue...
vue做SEO网络优化【prerender-spa-plugin】
全易
07-15 553
一、安装插件： npm install --save prerender-spa-plugin npm install --save vue-meta-info 二、webpack.prod.conf.js文件中配置两个： const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer new PrerenderSPAPlugin(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值