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 #/的写法,搜索引擎也没办法爬取网站内其他路 ...
随机推荐
- flask中secret_key的作用
https://segmentfault.com/q/1010000007295395
- php curl采集数据问题汇总
1. 使用curl获取网页数据提示: "curl: (6) Could not resolve host: xxx.xxx.com ; Name or service not known&q ...
- web框架们~Django~Flask~Tornado
1.web框架本质 2.Django 3.Flask 4.Tornado
- 个人理解---KMP与Next数组详解
Kmp就是求子串在母串中的位置等相关问题:当然KMP最重要的是Next数组,也称失败数组,Next[i]代表的意思是子串 sub 从sub[0] 到 sub[i-1]的前缀和后缀的最大匹配.模拟KMP ...
- 转载:Linux内核调试方法
转载文章请注明作者和二维码及全文信息. 转自:http://blog.csdn.net/swingwang/article/details/72331196 不会编程的程序员,不是好的架构师,编程和内 ...
- 商铺项目(Logback配置与使用)
<?xml version="1.0" encoding="utf-8"?> <configuration debug="false ...
- python用pyinstaller打包成exe文件
版本为Python2.7 一.安装Pyinstaller 1.安装pywin32 下载安装文件:查找到跟自己适用的python版本及window系统版本匹配的pywin32,下载后安装 使用pip命 ...
- [华为]输入n个整数,输出其中最小的k个
链接:https://www.nowcoder.com/questionTerminal/69ef2267aafd4d52b250a272fd27052c来源:牛客网 输入n个整数,输出其中最小的k个 ...
- c#将十进制转64进制
//由于用于文件命名,所以将64位中的+转换为=,/转换为_ static char[] digits = { '0' , '1' , '2' , '3' , '4' , ' ...
- 22. Generate Parentheses(回溯)
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...