vue单页面通过prerender-spa-plugin插件进行SEO优化

最新推荐文章于 2024-08-08 08:25:35 发布
最新推荐文章于 2024-08-08 08:25:35 发布
阅读量1.3w 收藏 5
点赞数 1
分类专栏： 前端框架相关 应用部署 文章标签： seo vue spa
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36263705/article/details/81479445
版权

prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化，如果是后台请求的数据需要做SSR处理，例如商品详情页，可使用Vue SSR，详细参考我的另一篇博客：VueSSR的一些理解和详细配置

一、前言

     之前虽然一直有看过SEO相关的文章，但是一直没去实践过，然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址：火石创造官网

首页用的根目录的index.html

     

/bluebook页面用的bluebook目录下的index.html。

        对于搜索引擎蜘蛛的工作原理就不再详细的复述了，网上相关博客很多。大致讲讲自己对单页面应用的SEO不友好的地方的理解吧。对于单页面应用，只有一个html文件，是所有页面的载体，vue通过js控制路由然后渲染出对应的页面，而搜索引擎蜘

最低0.47元/天 解锁文章
Chepy2018
关注
专栏目录
vue预渲染之prerender-spa-plugin解析(一)
vv_bug
11-28 1万+
前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染. 什么是预渲染? 为什么需要用预加载呢? 以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的: 然后我们运行下页面后: ...
vue单页面seo(prerender-spa-plugin,vue-meta-info)
01-13
vue单页面seo(prerender-spa-plugin,vue-meta-info)
prerender-spa-plugin 使用教程
最新发布
gitblog_00467的博客
08-08 385
prerender-spa-plugin 使用教程 prerender-spa-pluginPrerenders static HTML in a single-page application.项目地址:https://gitcode.com/gh_mirrors/pr/prerender-spa-plugin 1. 项目的目录结构及介绍 prerender-spa-plugin 是一个用于预...
vue 通过prerender-spa-plugin实现SEO优化(转)
m0_47048022的博客
07-08 545
什么是SEO？ SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。 搜索引擎原理？ 从 meta 标签中读取 keywords 、 description 的内容。 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div
vue 解决seo优化之预渲染prerender-spa-plugin
huangpb的博客
12-26 1711
最全、最详细的解释请看prerender-spa-plugin 插件 Github 解决SEO(Search Engine Optimization),首屏问题 , 页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。 预渲染流程 预渲染原理 在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（谷歌官方的 headless 无头浏览器）访问.
vue使用prerender-spa-plugin预渲染达到SEO优化
观千剑而后识器，操千曲而后晓声。
11-11 3502
传统页面和框架开发的区别 传统html是通过a标签跳转来作为切换的，每一个页面都是一个html，这样百度很容易抓取到的，也能顺着a链接到你的子级页面。 像vue、react、angular开发的都是spa应用，他只有一个页面index，他们都是内加载，动态加载切换路由的，所以你再多页面百度蜘蛛只能爬到首页，这就是spa的一大痛点 解决方案 说完了区别说下怎么解决这个问题，目前我所了解的两种： vue.js官网提供的SSR（服务端渲染）这种方案呢学习成本高，对于刚开始的新手来说可能有点难度（也包括我..
vue做SEO网络优化【prerender-spa-plugin】
全易
07-15 513
一、安装插件： 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(
vue项目seo优化-预渲染prerender-spa-plugin配置
豆。的博客
11-09 2981
Vue是SPA单页面应用对SEO不太友好，如果你只是需要对少数页面需要做SEO处理（例如 / 首页，/关于我们 等页面），可以使用预渲染 prerender-spa-plugin (插件)
【开发小记】vue项目预渲染（prerender-spa-plugin）
GUANYX的博客
09-18 1775
（3）预渲染：构建阶段生成匹配预渲染路径的html文件（注意：每个需要预渲染的路由都有一个对应的html—），构建出来的html文件已经有静态数据，需要ajax数据部分未构建。（2）服务端渲染：用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端，前端接收到html时已有当前url下的完整页面；（3）低版本浏览器：用户的浏览器可能不支持我们的使用的js特性，预渲染或者服务端渲染能够让用户至少能看见首屏的内容，而不是一个空白的网页。有可能出现白屏，且SEO不友好。
vue使用prerender-spa-plugin预渲染进行seo优化
Msgyvcici
03-13 706
前言 单页应用（SPA）是最近流行的一种应用模式，它支持在同一页面下通过哈希（hash）或html5的history api实现不刷新式切换视图，既实现了动态路由的变化，也实现了历史记录的保持，然而，相比于静态页面和动态页面（ASP/PHP/JSP）而言，缺点也是显而易见的，那就是对SEO不友好。 不管是Vue、React还是angular等实现路由的框架...
vue 项目预渲染（prerender-spa-plugin）
吾日三省吾身：高否？富否？帅否？ 否！否！否！ 安心上班吧……
06-03 1万+
服务器端渲染 vs 预渲染 (SSR vs Prerendering) 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如/,/about,/contact等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以...
vue-cli单页面预渲染seo-prerender-spa-plugin操作
11-20
1 vue-cli-plugin-prerender-spa 使用方法： vue add prerender-spa 在安装的过程中会需要安装一个chrome，网速不好可能导致不能下载，导致安装失败，可以取消chrome的安装，然后手动下载放在指定的目录下； 安装过程中选择需要预渲染的route 安装成功： 自动在main.js中加入： 2 使用prerender-spa-plugin插件 cnpm i prerender-spa-plugin –save-dev vue-cli2.0 在build/webpack.prod.conf.js中： const PrerenderS
vue开发网站seo优化方法，最新版
ccc6553584的博客
03-28 3332
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化端面试题：**
在vue项目中使用prerender-spa-plugin预渲染
weixin_45979310的博客
10-27 173
一、安装： npm install prerender-spa-plugin --save 二、路由router模式为 history ： const router = new VueRouter({ mode: 'history', routes }) 三、配置入口文件 main.js ： new Vue({ router, render: h => h(App), mounted () { // document.dispatchEven
vue使用预渲染prerender-spa-plugin
豪先生的博客
04-12 2411
前言：vue单页面对seo不友好，所以我打算通过预渲染来解决下seo问题。 目前我知道有2种方法, （1）SSR渲染（服务器） （2）prerender-spa-plugin插件预渲染（部分路由）（好像不能全部路由） 在这里我使用的是第二个方法 1、安装插件prerender-spa-plugin npm install prerender-spa-plugin --save // or 2个中选1个方法安装 npm install prerender-spa-plugin --save
SEO：使用prerender-spa-plugin预渲染解决seo问题
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
01-14 738
文章目录原理适合哪种网站实践技术栈具体实践本地部署线上部署遇到的问题 原理 项目在本地打包的时候，挑选几个需要seo的页面路由，通过无头浏览器去爬取这些路由对应的渲染好的页面，然后将生成的.html文件打包到dist文件中，然后部署到服务器上去。 当你第一次访问的时候，会直接返回你完整的dom，然后被 vue 接管，接下来你调接口渲染页面得到最新的页面。 适合哪种网站 适合页面少的，如果是那种资讯型的，比如新闻列表详情这种的，你没有办法把一个个的页面路由都拿出来，所以不适合这种方式 实践 技术栈 前端框架：
【Vue】预渲染之prerender-spa-plugin解析，方便搜索引擎的抓取
weixin_44899940的博客
06-08 2043
预渲染之prerender-spa-plugin解析，方便搜索引擎的抓取
vue预渲染之prerender-spa-plugin解析(二)
热门推荐
vv_bug
12-06 1万+
前面我们有介绍了什么是预渲染、使用场景、然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下prerender-spa-plugin的源码. 附上prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plu...
vue预渲染vue-cli-plugin-prerender-spa
08-21
Vue预渲染是指在构建Vue应用程序时，将页面提前渲染成静态HTML文件，以便在服务器端优化SEO和提升加载速度。引用中介绍了一种使用vue-cli-plugin-prerender-spa的方法来实现这个功能。 要使用vue-cli-plugin-prerender-spa，您可以按照以下步骤操作： 1. 首先，确保您的Vue应用程序使用了vue-cli。如果没有，请先安装vue-cli，并创建一个新的Vue项目。 2. 安装vue-cli-plugin-prerender-spa插件，可以通过运行以下命令来完成： ``` vue add prerender-spa ``` 3. 安装完成后，您可以在Vue项目的根目录下找到一个新的文件夹，名为prerender，其中包含了预渲染的配置文件prerender.config.js。您可以在这个文件中配置需要预渲染的路由和其他相关设置。 4. 根据您的需求，编辑prerender.config.js文件，指定需要预渲染的路由，并进行其他必要的配置。 5. 运行以下命令来构建预渲染的静态HTML文件： ``` npm run build ``` 6. 构建完成后，您将在dist文件夹中找到预渲染的静态HTML文件，可以将这些文件部署到服务器上，或者使用它们来进行SEO优化。 引用中的内容可以给您提供更详细的vue-cli-plugin-prerender-spa的使用说明和配置示例。希望这些信息能对您有所帮助。 : https://github.com/chrisvfritz/prerender-spa-plugin : https://www.npmjs.com/package/vue-cli-plugin-prerender-spa : https://github.com/ml4a/ml4a-guides/blob/master/notebooks/simple_image_classification_with_pytorch.md<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-cli单页面预渲染seo-prerender-spa-plugin操作](https://download.csdn.net/download/weixin_38627234/12924216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-cli-plugin-prerender-spa:通过预渲染Vue应用程序来增强SEO。 由prerender-spa-plugin提供支持](https://download.csdn.net/download/weixin_42134094/18687118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [毕设项目：基于SpringBoot+Vue前后端分离 实现的宿舍管理系统](https://download.csdn.net/download/qq_35831906/88227375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值