华山资源网

详解处理Vue单页面应用SEO的另一种思路
网络编程 2024/11/17 佚名
3 1

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="/UploadFiles/2021-04-02/app.js">


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


有了预渲染，我们可以解决很多方面的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,但是这样也是不合适的.
    • 
  
  • 经常变动的文件
    • 
  
  • 需要预渲染成千上万的路由文件: 这个可能会导致你编译时间.....额，可能你会编译很长时间
    • 



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com