vue spn如何做seo优化
vue spa如何做seo优化
突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spa对seo不够优化,因而官方考虑到直接使用ssr
一个不算解决办法的办法prerender-spa-plugin
// build/webpack.prod.conf.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
routes: ['/opty', '/customer', '/channelVendor', '/contract_type', '/contract', '/bill'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js mounted 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
// main.js
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
// router 需要使用history
new Router({
mode: 'history',
routes
})
总结
- 打包时间真心长,很不适合做seo
- 只适合简单处理,若是项目复杂,路由较多,便不是很适合了
vue spn如何做seo优化的更多相关文章
- 82.使用vue后怎么针对搜索引擎做SEO优化?
什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...
- HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- vue骨架屏以及seo优化
参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: ...
- 新网站如何做SEO优化【转】
“百度快照变慢了.百度收录问题.关键词掉了”,这是在卢松松留言本被经常问及的问题,新手站长往往会因此吃不下饭.睡不着觉,网站的推广是一个漫长的过程,“心急吃不了热豆腐”,不要整天想着一建站就有巨大的流 ...
- 一个网站完整的SEO优化方案,方法,怎么做seo优化?
SEO优化主要分为站内优化,站外优化.如果非得说一套完整的SEO优化方案,那就是需要4名专业人员:前端人员,内容编辑,网络推广人员,和数据分析人员.那以下就详细介绍这四个岗位各自负责的工作有哪些: 一 ...
- 如何做seo优化才能获取搜索引擎排名?
现在网络上有很多网站,但是排名和流量都不理想,所以很多企业会很苦恼.所以我们经常思考如何使网站被搜索引擎喜欢,被用户喜欢,有一个良好的排名和流量? 在这个鱼龙混杂的网络中,seo优化实际上是seo网站 ...
- vue项目做seo优化(prerender-spa-plugin vue-meta-info)
今天公司考虑seo设计方案,服务端渲染(ssr)和 预渲染的方式,不过只是打算对几个简单的页面seo,所以选择了使用预渲染的方式,以下是实现过程中遇到的问题,供大家查看,有不对的地方请指正: 使用pr ...
- Vue项目SEO优化的另一种姿态
背景:当前项目首页和登陆后的平台在一个项目里,路由采用hash模式,现在要做SEO优化,这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大,影响范围比较广,同样更改当 ...
- VUE的Seo优化 如何实现
今天看到这样一个问题,在vue中,如何进行seo优化呢? 大家应该都知道,seo优化主要是做搜索引擎的排名,但是ajax异步又不支持seo,同时对于url #/的写法,搜索引擎也没办法爬取网站内其他路 ...
随机推荐
- fastBoot使用
fastBoot使用 作者:李老师,华清远见嵌入式学院讲师. 1.1. 使用Fastboot方式烧写 在安卓手机中Fastboot是一种比Recovery更底层的刷机模式.Fastboot是一种线刷, ...
- s3对象存储
bkstorages 模块帮助你在蓝鲸应用中使用多种文件存储服务作为后端,用于加速静态资源,管理用户上传文件. 自定静态文件 storage 如果通过修改配置文件满足不了你的需求,你随时可以通过继承 ...
- qt——exec()的基本用法
qt中 if(my1.exec()==QDialog::Accepted) 是什么意思 这个先说这个my1.exec()这个就是个等待消息的循环,就是说它在等待你给的命令. 再说这个QDialog:: ...
- mysql 数据操作 单表查询 having 过滤
SELECT 字段1,字段2... FROM 库名.表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 1.首先找到表 库.表 ...
- mysql 约束条件 auto_increment 自动增长起始值 布长 起始偏移量
我们指定一个字段为自动增长,他默认从1开始自动增长,默认值为1,每次增长为1,步长为1 模糊查询 like % 代表任意个数字符 任意字符长度 查看mysql正在使用变量 show variables ...
- centos 邮件服务 腾讯企业邮箱(免费) 使用iRedmail 需要有公网的centos主机 发邮件协议:smtp 端口25 收邮件协议:pop3 端口110 iredmail安装配置 使用邮箱系统 第三十一节课
centos 邮件服务 腾讯企业邮箱(免费) 使用iRedmail 需要有公网的centos主机 发邮件协议:smtp 端口25 收邮件协议:pop3 端口110 iredmail安装配置 ...
- mysql中的多行查询结果合并成一个(转)
SELECT GROUP_CONCAT(md.data1) FROM DATA md,contacts cc WHERE md.conskey=cc.id AND md.mimetype_id= 5 ...
- loadrunner11的移动端性能测试之结果分析
测试步骤之结果分析器(Analysis) 进入Analysis 当场景停止运行后,可从Controller中进入.点击[Results]—[Analysis Results]见下图: 若想打开一个已保 ...
- Frame 框架的创建
Qt 创建Frame框架的例子: QFrame * frm = new QFrame(this); //创建一个框架 frm->setFrameStyle(QFrame::StyledPanel ...
- linux C 程序内存布局
参考: 1. http://www.cnblogs.com/clover-toeic/p/3754433.html 2. http://www.cnblogs.com/jacksu-tencent/p ...