详解处理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 相关文章推荐
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
JavaScript console的使用方法实例分析
Apr 28 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
CI框架常用方法小结
2016/05/17 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
swiper自定义分页器的样式
2020/09/14 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Django 用户认证组件使用详解
2019/07/23 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python如何解除一个装饰器
2020/08/07 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
英国森林假期:Forest Holidays
2021/01/01 全球购物
幼儿教师考核制度
2014/01/25 职场文书
中国梦团日活动总结
2014/07/07 职场文书
2014年度党员自我评议
2014/09/13 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers