vue的SEO优化

墨蓝 2022-10-12 04:12 217阅读 0赞

vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。

## 什么是`SEO`优化？ ##

![在这里插入图片描述][20210703093816878.png]  
体现到代码上就是：(最重要的一个就是`meta`标签的展示)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
`meta`标签中的`name`:可以使用`keywords`和`description`来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。

以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助：

## `prerender-spa-plugin`——轻量级的`seo`解决方案 ##

`prerender-spa-plugin`:轻量级的`seo`解决方案，对于大型项目不适用

使用方法如下：

#### 1.安装插件 ####

`npm install -D vue-meta-info`  
`npm install -D prerender-spa-plugin`

#### 2.全局引入插件——`vue-meta-info` ####

在`main.js`文件中引入

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

#### 3.在需要的页面使用——`vue-meta-info` ####

#### 4.`prerender-spa-plugin`——`vue.config.js文件配置` ####

`prerender-spa-plugin`这个插件依赖于爬虫来抽取页面，检索`SPA`并生成预渲染内容(即’SSR’);

`vue.config.js`文件配置如下：

#### 5.`prerender-spa-plugin`——`main.js文件配置` ####

new Vue({ 
    	router,
    	store,
    	render:h=>h(App),
    	mounted(){ 
    		document.dispathEvent(new Event('render-event'))
    	}
    }).$mount('#app');

[20210703093816878.png]: /images/20221005/183930fad01f426f9ac5662a84860296.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/e1f7221760c244d69bde8c80216e5dd3.png