详解处理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所必须要知道的一些
Mar 07 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 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下获取客户端ip地址的函数
2010/03/15 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python中方法链的使用方法
2016/02/23 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
佳能德国网上商店:Canon德国
2017/03/18 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
理财计划书
2014/08/14 职场文书
庆国庆活动总结
2014/08/28 职场文书
离婚答辩状范文
2015/05/22 职场文书
毕业实习单位意见
2015/06/04 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js