Commit ee16a9dd authored by caihaifei's avatar caihaifei

新增seo优化分享文章.

parent deb58ccc
No related merge requests found
Pipeline #15591 canceled with stage
---
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)。直白点是迎合搜索服务商的爬虫,让他多爬爬我们的网站,都索引我们的网站内容。我在网上找到了一个很形象的图述过程,它可以比较准确的去表达整个爬虫搜索、索引的过程。
![搜索引擎搜索过程](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)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment