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

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

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

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

Yarn:

NPM:

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

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

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

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

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

1 按了F5不是理所当然的应该刷新页面么,即使我SPA被刷新了又怎么样呢?也没有改变任何用户习惯,用户不会觉得confused。 2 而是应该让用户慢慢培养SPA不用去按F5的习惯。 3 我感觉需要做的也就是保存个用户登录状态,这个可以存在server的session里,和传统的web应用是一样的,并没有特别之处。

vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种:

注意:

然后在webpack.prod.conf.js里面添加:

在webpack.prod.conf.js的plugins里面添加:

最后在main.js里面修改:

安装:

在main.js引入:

在vue页面中配置:


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/754891.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-08-17
下一篇2023-08-17

发表评论

登录后才能评论

评论列表(0条)

    保存