Vue项目SEO优化的另一种姿态

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

同构SSR服务端渲染这里就不多赘述了,说一下预渲染:

一、什么情况下用预渲染比较好

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

二、选用插件

官方文档建议:如果你使用 webpack,你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 – 事实上,作者是 Vue 核心团队的成员。

结合vue-meta-info这一类动态设置meta信息的插件,可以达到更好的效果。

三、插件的使用

安装

vue-cli3 webpack配置

在vue.config.js中:

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

这里的VUE_APP_PROJECT_URL稍后再做解释。

以上的new PrerenderSPAPlugin({})配置中删除了

目的是为了不打开chromium浏览器。

在main.js中配置:

vue-meta-info安装使用:

安装

使用

如果你的title或者meta是异步加载的,那么你可能需要这样使用

 

三、项目间跳转配置

现在说一下VUE_APP_PROJECT_URL这个变量,这个变量便是两个项目间跳转的关键。在本地开发中,可以通过设置.env中的变量:

然后通过window.location.href的方式进行两个本地项目之间的跳转:

至于线上怎么进行跳转,可以这么配置.env.prod中的变量:

然后在nginx中配置:

 

打赏 赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

评论

电子邮件地址不会被公开。