详解处理Vue单页面应用SEO的另一种思路

　　

vue-meta-info官方地址:monkeyWangs/vue-meta-info

　　

(设置vue单页面元信息信息,如果需要单页面优化,可以和prerender-spa-plugin形成更优的配合)

　　

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

　　

本文主要针对vue 2.0单页面元搜索引擎优化优化展开介绍:

　　

其实解决SEO问题不一定非得用服务端渲染来处理,服务端渲染对于刚接触vue的新手来说,并不是那么友好,虽然已有官方SSR中文文档。但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说,都是一种挑战。不过这些怎么能难得到伟大的前端程序员!

　　

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

　　

如果您使用webpack,您可以使用prerender-spa-plugin轻松地添加预渲染。它已经被Vue应用程序广泛测试。

　　

预渲染为SEO提供了另一种可能,简单的来说,预渲染就是当vue-cli构建的项目进行npm运行构建的时候,会按照路由的层级进行动态渲染出对应的html文件。

　　 　　//webpack.conf.js 　　var路径=要求(“路径”) 　　var PrerenderSpaPlugin=要求(“prerender-spa-plugin”) 　　 　　模块。出口={//? 　　插件:[ 　　新PrerenderSpaPlugin (//编译后的html需要存放的路径 　　路径。加入(__dirname“. ./dist”),//列出哪些路由需要预渲染 　　['/','/','/接触'] 　　) 　　] 　　} 　　 　　

最终会生成类似于这样的目录结构

　　

详解处理Vue单页面应用SEO的另一种思路

　　

而里面的内容都会被渲染成了静态的html文件

　　

详解处理Vue单页面应用SEO的另一种思路

　　

相对于之前的可能只有

　　 　　 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> tangeche-pc 　　& lt;/head> 　　& lt; body> 　　& lt; div id="应用"祝辞& lt;/div> 　　& lt; !——构建文件将自动注入比; 　　& lt;脚本type=" text/javascript " src=" https://www.yisu.com/app.js "祝辞& lt;/script> & lt;/body> 　　& lt;/html> 　　 　　

可以直观的发现,预渲染的作用。

　　

有了预渲染,我们可以解决很多方面的SEO的问题,但是有时候我们也会需要元信息的变化,比如标题比如元关键字或者是链接…

　　

这里安利一下vue-meta-info一个可以动态设置元信息的vue插件如果需要单页面优化,可以和prerender-spa-plugin形成更优的配合。

　　

vue-meta-info是一个基于vue 2.0的插件,它会让你更好的管理你的应用程序里面的元信息。你可以直接在组件内设置metaInfo便可以自动挂载到你的页面中。如果你需要随着数据的变化,自动更新你的标题、元等信息,那么用此插件也是再合适不过了。当然,有时候我们也可能会遇到让人头疼的SEO问题,那么使用此插件配合prerender-spa-plugin也是再合适不过了

　　

<强> 1。安装
　　

　　

纱: 　　 　　 　　纱添加vue-meta-info 　　 　　

2。npm:

　　 　　 　　npm安装vue-meta-info——保存 　　 　　

<强> 2。全局引入vue-meta-info

　　 　　 　　从“Vue”进口Vue 　　从“vue-meta-info”进口MetaInfo 　　 　　Vue.use (MetaInfo) 　　之前 　　 　　

<强> 3。组件内静态使用metaInfo

　　 　　 　　& lt; template> 　　… 　　& lt;/template> 　　 　　& lt; script> 　　出口默认{ 　　metaInfo: { 　　标题:我的示例应用程序,//设定一个标题 　　元:[{//元 　　名称:“关键字”, 　　内容:“我的示例应用程序” 　　}) 　　链接:[{//设置链接 　　rel:“助理”, 　　href:“https://assets-cdn.github.com/? 　　}) 　　} 　　} 　　& lt;/script> 　　 　　

详解处理Vue单页面应用SEO的另一种思路