《seo优化网站官网》vue如何实现seo

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

?背景:当前项目首页和登陆后的平台在一个项目里,一直都这样想路由采用hash模式?,现在要做SEO优化,这时候同构SSR(ServerSideRendering)服务端渲染代价显然太大,影响范围比较广,同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页

?

背景:当前项目首页和登陆后的平台在一个项目里,一直都这样想路由采用hash模式?,现在要做SEO优化,这时候同构SSR(ServerSideRendering)服务端渲染代价显然太大,影响范围比较广,同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用预渲染,然后用nginx代理来实现两个项目之间的跳转。

如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如/,/about,/contact等)的SEO,那么你可能需要预渲染。无需使用web服务器实时动态编译HTMLvue如何实现seo,而是使用预渲染方式,其实也可以这样来解释在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

可能这种方式也可以在vue.config.js中:constPrerenderSPAPlugin=require('prerender-spa-plugin')
constRenderer=PrerenderSPAPlugin.PuppeteerRenderer

module.exports={
configureWebpack:{
module:{},
plugins:process.env.NODE_ENV==='production'?[
newPrerenderSPAPlugin({
staticDir:path.join(__dirname,process.env.VUE_APP_OUTPUT_DIR),
//需要进行预渲染的路由路径
routes:,
//html文件压缩
minify:{
minifyCSS:true,//css压缩
removeComments:true//移除注释
},
renderer:newRenderer({
//Optional-Thenameofthepropertytoaddtothewindowobjectwiththecontentsof`inject`.
injectProperty:'__PRERENDER_INJECTED',
//Optional-Anyvaluesyou'dlikeyourapptohaveaccesstovia`window.injectProperty`.
inject:{},
//在main.js中newVue({mounted(){document.dispatchEvent(newEvent('render-event'))}})∏vue如何实现seo,两者的事件名称要对应上。
renderAfterDocumentEvent:'render-event'
})
})
]:[]
}
}

这里只在process.env.NODE_ENV==='production'的时候进行预渲染,输入目录为process.env.VUE_APP_OUTPUT_DIR,是在.env.env.prod.env.test等全局环境变量中配置的,可以根据不同环境打包,如.env.prod的配置为:NODE_ENV=production

VUE_APP_OUTPUT_DIR='dist-prod'
VUE_APP_PROJECT_URL='/platform'

以上的newPrerenderSPAPlugin({})配置中删除了headless:false//Displaythebrowserwindowwhenrendering.Usefulfordebugging.

在main.js中配置:newVue({
router,
store,
render:h=gth(App),
mounted(){
document.dispatchEvent(newEvent('render-event'))//预渲染
}
}).$mount("#app")

对于搜索引擎蜘蛛的工作原理就不再详细的复述了,网上相关博客很多。大致讲讲自己对单页面应用的SEO不友好的地方的理解吧。对于单页面应用,只有一个html文件,是所有页面的载体,vue通过js控制路由然后渲染出对应的页面vue如何实现seo,一般而论而搜索引擎蜘蛛是不会去执行页面的js的,导致搜索引擎蜘蛛只能收录index.html一个页面╰,在百度中就搜索不到相关的子页面的内容。这会引起两个问题

那么,要想解决这个问题,大致来讲html文档就不能通过js生成,目前了解到的有两种方法,vue的ssr渲染(官方文档)和prerender-spa-plugin插件实现(详细配置)。SSR目前没有条件去尝试,所以选了个较为简便的第二种方法。二、过程

9.mode由hash改成history布到服务器上刷新页面会404。nginx需要更改配置
location/{
try_files$uri$uri//index.html
proxy_set_headerHost$host
proxy_set_headerX-Real-IP$remote_addr
proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for
proxy_set_headerX-Forwarded-Proto$scheme
}2.不能对对应的页面做TDK(title,keywords,description)不同的配置,这个可以配合vue-meta-info插件生成。

这种格式,是有首页的全部代码的。我遇到这个坑是因为我的路由设计是,根路由(即/)是一个router-view的内容,然后redirect到index下,渲染首页,于是改造如下:

那么,要想解决这个问题,html文档就不能通过js生成,目前了解到的有两种方法,vue的ssr渲染(官方文档)和prerender-spa-plugin插件实现(详细配置)。SSR目前没有条件去尝试,所以选了个较为简便的第二种方法。二、过程

?以上就是关于《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: