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

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

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

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

Yarn:

NPM:

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

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

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

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

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

适用于vue的SEO优化方案,以下几种:

(1)ssr,即单页面后台渲染

(2)vue-meta-info 与prerender-spa-plugin 预渲染

(3)nuxt

(4)phantomjs

vue要实现SEO,必须得让页面全部静态化。

而要静态化,通常是在服务端进行渲染。

可以参考网页链接

但是个人建议,如果你的技术不是特别棒,不要去尝试使用vue这个新出来的技术,老老实实的用php等成熟的技术


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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存