《seo培训 是什么》vue 如何解决seo

  • A+
所属分类:seo优化
摘要

?可能这种方式也可以单页面应用在前端正大放光彩。三大框架Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受其带来的完美的用户体验?,极强的开发效率的同时,也似乎不可避免的要去处理SEO的需求。预渲染为SEO提供了另一种可能vue如何解决seo,简单的来说vue如何解决seo,经常这样认为预渲染就是当vue-cli构建的项目进行npmrunbuild的时候,

?

可能这种方式也可以单页面应用在前端正大放光彩。三大框架Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受其带来的完美的用户体验?,极强的开发效率的同时,也似乎不可避免的要去处理SEO的需求。

预渲染为SEO提供了另一种可能vue 如何解决seo,简单的来说vue 如何解决seo,经常这样认为预渲染就是当vue-cli构建的项目进行npmrunbuild的时候,会按照路由的层级进行动态渲染出对应的html文件。//webpack.conf.js
varpath=require('path')
varPrerenderSpaPlugin=require('prerender-spa-plugin')

module.exports={
//...
plugins:[
newPrerenderSpaPlugin(
//编译后的html需要存放的路径
path.join(__dirname,'../dist'),
//列出哪些路由需要预渲染

)
]
}

相对于之前的可能只有lthtmlgt
ltheadgt
ltmetacharset="utf-8"gt
lttitlegttangeche-pclt/titlegt
lt/headgt
ltbodygt
ltdivid="app"gtlt/divgt
lt--builtfileswillbeautoinjected--gt
ltscripttype="text/javascript"src="/app.js"gtlt/scriptgtlt/bodygt
lt/htmlgt

vue-meta-info是一个基于的插件÷,它会让你更好的管理你的app里面的meta信息。你可以直接在组件内设置metaInfo便可以自动挂载到你的页面中。如果你需要随着数据的变化,其实也可以这样来解释自动更新你的title、meta等信息??,那么用此插件也是再合适不过了。当然,有时候我们也可能会遇到让人头疼的SEO问题vue 如何解决seo,那么使用此插件配合也是再合适不过了1.安装

大致来讲2.全局引入vue-meta-infoimportVuefrom'vue'
importMetaInfofrom'vue-meta-info'

Vue.use(MetaInfo)9.组件内静态使用metaInfolttemplategt
...
lt/templategt

ltscriptgt
exportdefault{
metaInfo:{
title:'MyExleApp',//setatitle
meta:[{//setmeta
name:'keyWords',
content:'MyExleApp'
}]
link:[{//setlink
rel:'asstes',
href:'https://assets-cdn.github.com/'
}]
}
}
lt/scriptgt4.如果你的title或者meta是异步加载的,那么你可能需要这样使用本文主要针对vue2.0单页面MetaSEO优化展开介绍:

lttemplategt
...
lt/templategt

ltscriptgt
exportdefault{
name:'async',
metaInfo(){
return{
title:this.pageName
}
},
data(){
return{
pageName:'loading'
}
},
mounted(){
setTimeout(()=gt{
this.pageName='async'
},2000)
}
}
lt/scriptgt

?以上就是关于《vue 如何解决seo》的详细讲解,本文由轩辕SEO培训收集于网络不代表本站观点,如果您还想了解seo详细内容以及项目合作,请直接联系轩辕qq或微信。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: