vue解决SEO

vue解决SEO

页面做SEO的最基本条件

1、多页面 （便于蜘蛛抓取）
2、页面含有蜘蛛抓取的内容
3、页面有对应的三要素（title, keywords, description)
但是vue是单页面应用，且打包后的内容是由js输出，无法让蜘蛛抓取内容，且只有一个三要素。因此vue本省是不能SEO的

解决方案

方案一，预渲染

1、解决生成多页面
使用插件：prerender–spa–plugin
然后在vue.config.js中做配置，需要生成多少页面就配置多少条路由（具体配置见参考文档）
2、解决三要素（title,keywords, description)
使用插件： vue–meta–info
在main.js中引入使用

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

然后在需要打包的页面的.vue文件里写对应的三要素

metaInfo: {
	title: '页面title'
	meta: [{name: '关键字，seo', content: '页面描述'}]
}

3、缺陷
（1）需要被打包的路由很多时，配置繁琐不方便
（2）对于详情页这种，不适合使用此方法做SEO
（3）动态去改变页面三要素（比如从后端返回三要素对应数据）是无效的
4、适用：
适合项目的某几个页面做SEO

方案二：服务端渲染

如 NuxtJs
Nuxt.js项目上线流程
（1）npm run build
（2）将打包完成的文件单独拷贝出来，放进服务器，一共四个文件
nuxt.config .nuxt package.json static
（3）将上面的四个文件拷贝到服务器上，服务器安装node环境，然后执行
npm i 或者npm install
（4）执行npm run start
（5）nginx设置代理

代码007普通

打赏 收藏 海报 链接