---
title: Vue如何优化页面的SEO           
date: 2022/4/15 10:44:20
tags:                    
- SEO
- 服务端渲染
- 预渲染编译          
author: 蔡海飞          
---

因项目要求，对于之前用Vue写的官网项目需要进行SEO优化。就此，对于该项目进行分析并选取合适的解决方案。首先，我们需要简单了解下SEO到底是什么？为什么要优化SEO，SEO能为我们带来什么？作为一个技术人员如何去优化SEO？

![seo](http://www.enjoytoday.cn/wp-content/uploads/2022/04/9636dd69232af81.png)


## SEO是什么？

SEO 中文名称为搜索引擎优化（Search Enine Optimization）。直白点是迎合搜索服务商的爬虫，让他多爬爬我们的网站，都索引我们的网站内容。我在网上找到了一个很形象的图述过程，它可以比较准确的去表达整个爬虫搜索、索引的过程。

<!-- more -->

![搜索引擎搜索过程](http://www.enjoytoday.cn/wp-content/uploads/2022/04/79a857486134955.png)


## 为什么要优化SEO，SEO能为我们带来什么？

为什么要做SEO昵，由于大多数用户都是通过搜索引擎去搜索想要访问的内容和服务。为了让我们的网站内容被更多的人群找到，或者是说需要的人找到，以便我们为他提供我们的服务来达到某种商业目的。这时，我们就得遵循搜索引擎制定的索引规则，以爬虫能读懂的方式来表述自己网站的内容、服务，以及想要对外提供的服务等信息。


简而言之，SEO是一种商业行为，是为了使我们达到某种目的的一种交换商业行为。



## 作为一个技术人员如何去优化SEO？


![](http://www.enjoytoday.cn/wp-content/uploads/2022/04/2c221e6947c409f.png)


SEO的优化其实需要很多方面的支撑。常见的SEO优化内容涉及：

- 网站meta要素和title
- 内容结构
- 代码优化
- 代码优化



如上，可以看得出来，SEO优化我们技术能做的有很多。那么，问题来了：Vue单页面为什么更不易被爬虫爬到昵？在这个问题前我们需要了解几个小的知识点：


- 搜索引擎更喜欢爬html内容，极少会执行js文件（国内的爬虫没有运行js的），可以等同理解为只爬html内容
- Vue、React之类的单页面框架html代码极少，都是通过Js动态操作dom的，其dom结构只存在于内存




从上面两个问题就不难理解了，Vue没法让搜索引擎满意。那么常规的Vue之类的应用如何优化搜索引擎昵？

- 静态网页

- 前后端不分离

- 前后端伪分离【SSR】


那回到今天我说的问题上，我司的是一个营销类网站需要进行优化，所以，我只需要通过一个插件对vue项目进行预渲染编译就可以了。这里用到两个插件：prerender-spa-plugin和vue-meta-info 操作流程如下：



#### 安装

```shell
$ npm i prerender-spa-plugin vue-meta-info -s // 或
$ yarn add prerender-spa-plugin vue-meta-info -D 
```

#### 配置vue.config.js

```js
configureWebpack: () => {
  if (process.env.NODE_ENV !== "production") return;
  return {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
     },
    performance: {
    hints: false,
  },
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/'], // 这里制定需要预渲染编译的页面
      renderer: new Renderer({
      inject: {
        foo: 'bar'
      },
      headless: false,
      renderAfterDocumentEvent: 'render-event'
      })
    })
  ]
};
```

#### mainjs添加渲染事件



```js
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)   // 配置页面的title、description、keywords

Vue.config.productionTip = false

Vue.use(animated)

new Vue({
router,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'))  // 这里是添加渲染后的事件
}
}).$mount('#app')

```


#### 对应页面添加配置


```js
export default {
  name: "home",
  metaInfo: {
    title: "人事考试服务平台-人事考试报名管理系统",
    meta: [
      {
        name: "keywords",
        content: "人事考试服务平台、人事考试报名管理系统、标准化招聘、人事考试、考试报名管理系统、考试报名系统、报名考试系统、考务管理系统、考务管理",
      },
      {
        name: "description",
        content: "人事考试服务平台，人事考试报名管理系统，提供岗位发布、网上报名、资格审核、线上缴费、准考证打印等功能，减轻管理人员的工作负担，实现人事招聘流程的规范化管理。",
      },
    ],
  },
}

```


#### 编译


```shell
$ npm run build // 或者
$ yarn run build

```


如此部署就可，给大家瞅瞅结构，该有的都有。

![结果](http://www.enjoytoday.cn/wp-content/uploads/2022/04/a0f58af424cdfd5-1536x529.png)