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等待事件之db file sequential read/ db file parallel read
1.产生原因 db file sequential read这个是非常常见的I/O 相关的等待事件.表示发生了与索引扫描相关的等待.意味着I/O 出现了问题,通常表示I/O竞争或者I/O 需求太多. ...
- 设计模式之——Chain of Responsibility
Chain of Responsibility模式又叫做责任链模式,是将多个对象组成一条职责链,然后按照职责链上的顺序一个一个的找出是谁来负责处理. 这个模式很简单,下面就是一个实例程序,有六个处理器 ...
- nginx:正向代理和反向代理
一.正向代理 原理:正向代理是一个位于客户端和目标服务器之间的代理服务器(中间服务器).为了从目标服务器取得内容,客户端向代理服务器发送一个请求,并且指定目标服务器,之后代理向目标服务器转交并且将获得 ...
- 【css a标签 鼠标悬浮时变手型】
<a href="#" style="cursor:pointer">
- YOGA Tablet 2 1371f 触屏失效,无声卡,蓝牙键盘都无法使用的解决办法
安装驱动! 下载地址 http://www.lenovocare.com.cn/Handler/Download.ashx?fileid=1234 安装后电源管理,声卡,触摸屏即可使用! 蓝牙键盘连接 ...
- PAT 1082 Read Number in Chinese[难]
1082 Read Number in Chinese (25 分) Given an integer with no more than 9 digits, you are supposed to ...
- 安装完C++builder6.0启动的时候总是出现无法将'C:\Program Files\Borland\CBuilder6\Bin\bcb.$$$'重命名为bcb.dro
:兼容性问题 运行前右键属性“兼容性”-尝试不同的兼容性.比如“windows 8”
- Linux命令: grep命令
基本用法 ...
- c++第二十二天
p120~p124: 表达式 1.表达式由一个或者多个运算对象组成. 2.最简单的表达式是字面值和变量. 3.一元运算符作用于一个运算对象,二元则作用于两个.一个运算符到底是几元由上下文决定. 4.重 ...
- Centos7.5 升级python3.6
Centos7.5自带为/usr/bin/python2.7,需升级到python3.6,安装非常简单,直接通过yum. #centos7 pythonyum install epel-release ...