Vueseo（vueseo问题）

本篇文章给大家谈谈Vueseo，以及vueseo问题对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、VUE(SPA)项目中使用SEO-动态生成META标签
• 2、使用vue后怎么针对搜索引擎做SEO优化?
• 3、vue技巧：解决网页静态化的问题
• 4、请问一个已经开发完毕的 vue 项目用预渲染方式做seo页面优化的话vue的hash路由必须改成history模式吗？

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

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

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

Yarn:

NPM:

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

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

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

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

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

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

适用于vue的SEO优化方案，以下几种：

（1）ssr,即单页面后台渲染

（2）vue-meta-info 与prerender-spa-plugin 预渲染

（3）nuxt

（4）phantomjs

vue技巧：解决网页静态化的问题

我们使用vuecli打包出来的vue页面，只有一个html。不错这确实是spa牛逼的地方。

但是对于seo来说，这也是一个致命缺陷。

那就是，完全没法seo。这货连个实体页面都没有。那就很难受了。

此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入

这里你需要注意一点，你现在需要设置你的route为history模式。当然我们一直是这个模式，之前有人使用hash模式，那个是不可取的。

接着打开webpack.prod.conf.js这个文件在build文件夹中，添加

然后还是这个文件，找到plugins，在里面加入

注意着里面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。按照你的route来写。

然后重新输入

完成后是这样的

这只是一个治标不治本的解决办法！因为只有route中的页面被生成了静态页面，我们的内容页面是无法生成静态的。那么这该怎么办呢？如果你既想使用vue那简介的语法进行开发，又希望项目能实现cms那样自动生成静态的功能，你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发！

请持续关注龙哥的后续教程！

请问一个已经开发完毕的 vue 项目用预渲染方式做seo页面优化的话vue的hash路由必须改成history模式吗？

最好是的，因为搜索引擎对于#后面的内容（锚）点一般是不收录的，改成history模式，在对页面重写就可以了~

对优化部分进行后端动态赋值

Vueseo的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vueseo问题、Vueseo的信息别忘了在本站进行查找喔。