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 #/的写法,搜索引擎也没办法爬取网站内其他路 ...
随机推荐
- Oracle等待事件之log file parallel write
log file parallel write表示等待 LGWR 向操作系统请求 I/O 开始直到完成 I/O.这种事件发生通常表示日志文件发生了I/O 竞争或者文件所在的驱动器较慢.这说明这种等待与 ...
- java-基础-【三】try/catch/finally
原文地址: https://my.oschina.net/bieber/blog/703251 一.单层的try/catch public int test(int a,int b){ try{ re ...
- mysql 出现的错误
1:创建函数时提示:This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA ,因为当开启log-bin时,函数必须有参数, ...
- What do you think the coming adidas NMD Singapore
adidas NMD Singapore is surprising everybody with a lot of completely new NMD choices combined with ...
- Python 非递归遍历图
class Queue: def __init__(self,max_size): self.max_size = int(max_size) self.queue = [] def put(self ...
- 理解Linux系统中的load average(图文版)
本文转自:http://heipark.iteye.com/blog/1340384 一.什么是load average? linux系统中的Load对当前CPU工作量的度量 (WikiPedia: ...
- HTTP--TCP连接
几乎所有的 HTTP 通信都是由 TCP/IP 承载的,TCP/IP 是全球计算机及网络 设备都在使用的一种常用的分组交换网络分层协议集.客户端应用程序可以打开一 条 TCP/IP 连接,连接到可能运 ...
- 常用php操作redis命令整理(二)哈希类型
HSET将哈希表key中的域field的值设为value;如果field是哈希表中的一个新建域,并且值设置成功,返回1;如果哈希表中域field已经存在且旧值已被新值覆盖,返回0. <?php ...
- [UI基础][不会说话的汤姆猫]
会说话的汤姆猫这个APP层级风靡一时,其UI部分就是利用了序列动画的技术, 接下来 我们用汤姆猫来演示怎么制作序列动画. [要求]: 1.学会使用序列动画的方法 2.学会分析动画播放中内存占用高的问题 ...
- Git提交撤销
场景:本地修改代码后,执行commit提交,但此时想撤销该提交. 执行命令: git reflog 查看所有commit历史 git reset --hard commitid 将当前远程 ...