Vue实现seo优化+动态设置title

Vue实现seo优化

vue默认是单页面（spa），npm run build打包后，只会生成一个index.html文件。默认是先有dom结构（dom里面是没有数据内容的），再加载数据；所以搜索引擎抓取dom结构，而里面没有数据内容，就无法抓取内容、关键词等就会直接返回，所以seo不友好。 vue实现seo的方法：预渲染+服务端渲染 1.预渲染prerender-spa-plugin：在页面dom加载前，先调用接口

缺点：没有动态路由，比如商品详情、文章详情页，一般是动态设置后面的id。但是预渲染不能使用动态路由（所以，做项目前，需要考虑 动态路由页面是否需要做seo）

预渲染适合做什么项目：动态路由页面不需要seo的

1.安装依赖

cnpm install prerender-spa-plugin -S

2.vue-config.js

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
    publicPath:'/',
    lintOnSave:false,
    configureWebpack:{
        plugins: [
            new PrerenderSPAPlugin({
                // 生成文件的路径，也可以与webpakc打包的一致。
                // 下面这句话非常重要！！！
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname, 'dist'),
                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                routes: ['/', '/about', '/some/deep/nested/route'], //写几个就会打包几个页面
            })
        ]
    }
}

解决：

可以打包多页面（不支持动态路由）title描述关键词（下面有介绍）可以解决：接口数据是存在dom中（vue默认接口数据，是不存在dom中，所以对seo不友好）

动态设置title

vue-meta-info官方介绍

vue-meta-info 是一个基于vue 2.0的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的title、meta等信息，那么用此 插件也是再合适不过了。 当然，有时候我们也可能会遇到让人头疼的SEO问题，那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

vue-meta-info使用

npm install vue-meta-info在main.js中全局引入

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

在组件内使用，可以直接写死title

<template>
  ...
</template>
 
<script>
  export default {
     metaInfo: {
      title: '操作手册',
    },
  }
</script> 

也可以axios获取到数据，动态赋值title

<template>
  ...
</template>
 
<script>
  export default {
  	data:{
		return{
			dataTitle:'',
		}
	},
     metaInfo: {
      title: this.dataTitle,
    },
    created(){
		axios({
			url:'xxxx'
		}).then(res=>{
			this.dataTitle = res.data.xxx //动态获取title
		})
	}
  }
</script> 

存在问题：打开网页，title会先走data里面的数据，等接口数据获取到后赋值给data，需要一定时间，可能是零点几秒（title会闪烁）

2.服务端渲染

服务端渲染：nuxt.js

优势：可以完美解决seo各种问题（解决了预渲染不支持动态路由，title闪烁）

缺点：服务器压力大

服务端渲染：压力给到服务器了（数据接口渲染完，组织成html片段，才渲染到客户端页面端口，这样客户端压力就小了。所以需要比较好的服务器支持，比如淘宝、京东这样的网站，如果使用vue做，就会使用服务端渲染）

预渲染：压力给到客户端了（获取到服务端的接口数据后，在客户端进行数据的处理，组织成html片段，渲染到页面上）

如何选择？

场景1：使用vue开发，需要seo，是一个商城，有很多商品详情页

选择服务端渲染，因为预渲染不支持动态路由场景2：使用vue开发，需要seo，一个官网，没有文章、商品动态页面

选择预渲染场景3：后台管理页面，需要seo吗？

不需要，直接使用vue-cli做就行了

开发中，可能vue项目做完了，项目老大说需要做seo，可以使用上面2种方式去重构（注意项目是否使用了动态路由）