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

发布时间:2024-06-17 19:01

Vue实现seo优化

      • vue实现seo的方法:预渲染+服务端渲染
        • 1.预渲染prerender-spa-plugin:在页面dom加载前,先调用接口
        • 2.服务端渲染

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'], //写几个就会打包几个页面
            })
        ]
    }
}

解决:

  1. 可以打包多页面(不支持动态路由)
  2. title描述关键词(下面有介绍)
  3. 可以解决:接口数据是存在dom中(vue默认接口数据,是不存在dom中,所以对seo不友好)

动态设置title
vue-meta-info官方介绍

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

  1. vue-meta-info使用
    npm install vue-meta-info
  2. 在main.js中全局引入
    import MetaInfo from 'vue-meta-info';
    Vue.use(MetaInfo);
    
  3. 在组件内使用,可以直接写死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. 场景1:使用vue开发,需要seo,是一个商城,有很多商品详情页
    选择服务端渲染,因为预渲染不支持动态路由
  2. 场景2:使用vue开发,需要seo,一个官网,没有文章、商品动态页面
    选择预渲染
  3. 场景3:后台管理页面,需要seo吗?
    不需要,直接使用vue-cli做就行了

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号