详解处理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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 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
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
一个简易的js图片轮播效果
2017/07/22 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
越南综合购物网站:Lazada越南
2019/06/10 全球购物
婚礼司仪主持词
2014/03/14 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
项目工作说明书
2014/07/29 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
大学生受助感言
2015/08/01 职场文书
Python 制作自动化翻译工具
2021/04/25 Python