VUE(SPA)项目中使用SEO-动态生成META标签

上文中提到过这里主要使用的是 vue-meta-info ,下面来和大家说一下它的用法

安装

大家可以选择不同的安装方式

Yarn:

$ yarn add vue-meta-info

NPM:

$ npm install vue-meta-info --save

引入

引入方式很简单,没有什么难理解的,照做就是了

import Vue from'vue'

import MetaInfo from 'vue-meta-info' 

Vue.use(MetaInfo)


使用

使用方式的话会分为两种(接下来会举一些官网上的例子):

1、静态使用:    

    使用时注意,meta里可以写多个map,下面这个例子中只写了keyWords

2、动态使用

这种方式可以动态生成META标签的内容,一般META标签的内容需要根据变量去变化的时候,可以选用这种方式:

    这些配置好了之后,就可以测试一下啦,打开调试工具,点击到Elements一栏,看下head标签下是否有你刚刚生成的meta,如果有的话,那么恭喜你,你成功的征服了它

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,030评论 1 4
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,698评论 0 6
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,299评论 1 22
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,894评论 4 45
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,154评论 0 2