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


Posted in Javascript onNovember 09, 2018

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

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

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

本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍:

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

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

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

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

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

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

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

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

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

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

相对于之前的可能只有

<html>
 <head>
  <meta charset="utf-8">
  <title>tangeche-pc</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 <script type="text/javascript" src="/app.js"></script></body>
</html>

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

有了预渲染,我们可以解决很多方面的SEO的问题,但是有时候我们也会需要Meta信息的变化,比如 title 比如 Meta keyWords 或者是 link...

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

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

1.安装

yarn:

yarn add vue-meta-info

2. npm:

npm install vue-meta-info --save

2.全局引入 vue-meta-info

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

3.组件内静态使用 metaInfo

<template>
 ...
</template>

<script>
 export default {
  metaInfo: {
   title: 'My Example App', // set a title
   meta: [{         // set meta
    name: 'keyWords',
    content: 'My Example App'
   }]
   link: [{         // set link
    rel: 'asstes',
    href: 'https://assets-cdn.github.com/'
   }]
  }
 }
</script>

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

<template>
 ...
</template>

<script>
 export default {
  name: 'async',
  metaInfo () {
   return {
    title: this.pageName
   }
  },
  data () {
   return {
    pageName: 'loading'
   }
  },
  mounted () {
   setTimeout(() => {
    this.pageName = 'async'
   }, 2000)
  }
 }
</script>

写到这里,大家应该都明白了我所说的 SEO 的另一种思路是什么了,preRender + metaInfo

可以才一定层次上去解决 SEO 问题,这种方式优点就是代码侵入性最低,开发成本最少。但是也是有弊端的:

  • 不能很好地处理用户独特性路由: 比如有个路由是 /my-profile, 预渲染可能不会很好用, 因为这个内容页是根据用户信息变化的,所以页面内容也不是唯一确定的. 你可能会使用类似于这样的路由路径 /users/:username/profile,但是这样也是不合适的.
  • 经常变动的文件
  • 需要预渲染成千上万的路由文件: 这个可能会导致你编译时间.....额,可能你会编译很长时间

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 #Javascript
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
You might like
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
React diff算法的实现示例
2018/04/20 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
毕业生个人求职的自我评价
2013/10/28 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
考试作弊检讨书
2014/10/21 职场文书
教师见习报告范文
2014/11/03 职场文书
如何写辞职书
2015/02/26 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server