使用vue后怎么针对搜索引擎做SEO优化?

使用vue后怎么针对搜索引擎做SEO优化?,第1张

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

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

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

(3)nuxt

(4)phantomjs

还不了解vue为什么不被百度收录或预渲染怎么使用的童鞋们建议点下面链接了解下

vue项目不被百度收录怎么办、seo优化问题/预渲染的具体使用

Nuxt.js介绍、Nuxt.js 是什么?:

Nuxt.js安装

确保安装了npx(npx在NPM版本5.2.0默认安装了):

或者用yarn :

然后会让你进行一些安装的选择,这里就简单说下(UI框架没有就选none就行了,Eslint检测本人是非常不习惯用的所以我一般都不选,其他的没什么说的)

当运行完时,它将安装所有依赖项,因此下一步是启动项目:

应用现在运行在 http://localhost:3000 上运行。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_ 和 ~/static/your_方式。

说下路由配置问题:

总结

每个框架都有他自己对应的ssr方案,今天这里提到了vue的,有心的童鞋可以自行查阅其他框架方面的

再说几点关于seo方面的小技巧

end~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!

文章对您有所帮助请给作者点个赞支持下,谢谢~

不知道你有没有发现,vue做的网站除了首页以外,其他页面根本就不能被百度收录。以至于有很多做seo的同事痛斥其种种不是,最后被强迫改为不分离开发。

至于vue的详情页为什么不能被百度收录,这就涉及到了spa的核心概念,因为数据都是异步获取来的,前端根本就没有所谓的纯静态一说。通俗点讲就是,页面都是js通过ajax获取到数据以后,动态生成的。既然它本来就没有一个文件放在服务器上,当然,爬虫也就不能获取到这个静态的url地址了。

但是url静态地址又是做seo必须的东西..

所以今天龙哥教你一套新的前端框架,基于vue的ssr前端框架—nuxt。本地开发的时候,使用vue语法,模块化你的项目,然后发布的时候生成静态,把ajax获取来的内容转化成静态html以利于seo。真正实现模块化和静态化两不误!

首先说明一下,龙哥本地的nuxt环境是2.8.1。如果你的版本号和我的不符,可能有部分语法你需要参考官方API开发手册。

使用命令:

小知识:啥是npx?

我们以前不是用的npm吗,但是这货每次安装东西的时候,你还得给全局装一个-g,相当于你电脑里老得有这个服务。

但其实你项目中已经包含了运行时候所需要得所有东西了。

如果你用了npx,他不会给你装这个东西,而是装得时候用一下,用完了就卸载,效率更高。

npx是nodejs在5.0版本以后新加入的,非常牛逼。

所以我们现在来cnpm -g 那一步都不需要了,我们直接npx创建项目即可!!!

直接输入

注意这里有可能报错,不用管他,过个几秒就安装好了。

还有一个需要注意的地方,你的git版本不能低于2.17否则后面有几个需要arrow选择得地方你可能选不了,请升级你的git版本。

然后就可以开始安装了。

等你看到这个界面,就是安装好了。

他会自动安装所需要得所有包,安装完了以后你进入localhost:3000

出现这个界面,就OK了


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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存