详解处理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 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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 常见郁闷问题答解
2006/11/25 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
parser.add_argument中的action使用
2020/04/20 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
档案管理员岗位职责
2013/12/01 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
采购部主管岗位职责
2014/01/01 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
政府法律服务方案
2014/06/14 职场文书
房租涨价通知
2015/04/23 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js