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

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

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

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

Yarn:

NPM:

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

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

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

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

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

js是不影响seo的,但是影响搜索引擎抓取。因为搜索引擎是不能抓取js,图片,视频等等。因此优化就只能不用js,但是为了站点美观,又要是用js,所以就必须不让蜘蛛抓取,用robots进行屏蔽

开发一个基于Vue的网站时需要注意的SEO问题有:

静态标题和描述:标题和描述必须是静态的,不能在运行时动态生成,因为搜索引擎需要读取它们。

避免使用JavaScript动态生成内容:搜索引擎不会读取JavaScript动态生成的内容,因此,如果你想在搜索结果中显示这些内容,你需要使用静态的HTML。

关键字优化:确保你的关键字被包含在标题、描述、关键字和内容中。

链接结构:使用有意义的链接结构,这将帮助搜索引擎更好地理解你的网站结构。

Sitemap和Robots.txt:使用Sitemap告诉搜索引擎你的网站的页面,并使用Robots.txt文件告诉搜索引擎哪些页面不需要被爬取。

响应式设计:使用响应式设计,以确保你的网站在移动设备和桌面设备上都很好地显示。

在开发Vue网站时,记得遵循这些SEO建议,以确保你的网站在搜索结果中得到最好的曝光。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存