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 #/的写法,搜索引擎也没办法爬取网站内其他路 ...
随机推荐
- HDU_5517_Triple
Triple Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- Oracle安装部署之RAC安装环境配置脚本
#!/bin/bash#Usage:Log on as the superuser('root'),and then execute the command:#./1preusers.sh group ...
- Mongodb3.X版本的 的用户认证
一直使用公司的mongodb环境,本地的mongodb没有开启认证,为了环境更一致,决定加上本地mongodb的认证,不过在这个过程中发生了点波折. 我使用的是window版本的3.2,公司使用的是2 ...
- Excel 26机制转换
[问题描述] 在Excel中,列的名称是这样一个递增序列:A.B.C.….Z.AA.AB.AC.….AZ.BA.BB.BC.….BZ.CA.….ZZ.AAA.AAB….我们需要将上述列名序列和以下自然 ...
- centos shell编程5 LANMP一键安装脚本 lamp sed lnmp 变量和字符串比较不能用-eq cat > /usr/local/apache2/htdocs/index.php <<EOF重定向 shell的变量和函数命名不能有横杠 平台可以用arch命令,获取是i686还是x86_64 curl 下载 第三十九节课
centos shell编程5 LANMP一键安装脚本 lamp sed lnmp 变量和字符串比较不能用-eq cat > /usr/local/apache2/htdocs/ind ...
- Flask系列(七)Flask中的wtforms使用
一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...
- Openstack(十二)部署neuron(计算节点)
在计算节点安装 12.1安装neuron(计算节点) # yum install openstack-neutron-linuxbridge ebtables ipset –y 12.2配置neutr ...
- git-flow工作流程
什么是 git-flow? 一旦安装安装 git-flow,你将会拥有一些扩展命令.这些命令会在一个预定义的顺序下自动执行多个操作.是的,这就是我们的工作流程! git-flow 并不是要替代 Git ...
- uva The Tower of Babylon[LIS][dp]
转自:https://mp.weixin.qq.com/s/oZVj8lxJH6ZqL4sGCXuxMw The Tower of Babylon(巴比伦塔) Perhaps you have hea ...
- 网络协议TCP、Http、webservice、socket区别
网络协议TCP.Http.webservice.socket区别 http 和 webservice 都是基于TCP/IP协议的应用层协议 webservice是基于http的soap协议传输数据 w ...