胖蔡说技术
随便扯扯

Vue如何优化页面的SEO

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

9636dd69232af81SEO是什么?

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

79a857486134955

 

为什么要优化SEO,SEO能为我们带来什么?

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

 

简而言之,SEO是一种商业行为,是为了使我们达到某种目的的一种交换商业行为。具体点为了赚钱后者骗钱。

 

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

2c221e6947c409f

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

  • 网站meta要素和title

爬虫会爬取我们网页的title、description、keywords来建立索引。尤其是关键词,关键词是我们表明我们提供服务的基石。

  • 网站结构

网站结构的合理性,这个很难界定,一般的可以理解为合理的内链和交互,要是网站里一个网页其他的网页永远都跳转、链接不到它那儿,那这个网站的结构还有啥合理可言。

  • 内容结构

指的是我们网站的网页内容要与我们的网页title、description、keywords产生较强的联系,让我们的搜索引擎产生足够的兴趣,让它确认这就是它想要的内容。

  • 代码优化

由于搜索蜘蛛每天需要爬取很多内容,不停的工作,它可能也会很累。这时候就需要我们足够的体贴。尽可能的降低文档的大小,页面结构的复杂度,让搜索引擎来的快去的快,可以爬更多的网站。

  • 外链

外链很重要,非常重要,一个有价值的外链会让搜索引擎喜欢上你。这就好比生活中一个老师傅带的徒弟会比一个自学的小伙子更让人值得信任一样。明星效应,该懂得都懂得~这里其实需要我们不断的在各个平台发推文、软文,挂友链等。

 

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

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

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

  • 静态网页

静态页面的意思是,我们的网站很少有请求或者说和后台的交互只涉及业务操作,不需要被爬虫爬到。这时候我们可以通过插件对Vue或React进行预渲染编译操作,直接将vue或React项目转成有血有肉的dom原生文档结构。

  • 前后端不分离

这个就是好理解的,我们鼓吹了很长时间的前后端分离,遇到这个世界难题,不分离前后端,通过后端语言结合插件编译vue、react实现大融合,完美。

  • 前后端伪分离【SSR】

这个是现在说的比较多的,其实和不分离差别不大,也是启动了一个服务通过服务端渲染,不同的是他的后端是也是Js写的,这对前端开发就亲切多了,只需要请求后台将结构和html结构拼接返回就可以。我们亲切的称之为:SSR。本质上可以理解为一种中间件。

 

 

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

 

  • 安装
$ npm i prerender-spa-plugin vue-meta-info -s // 或
$ yarn add prerender-spa-plugin vue-meta-info -D 
  • 配置vue.config.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添加渲染事件
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')
  • 对应页面添加配置

 

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

}

 

  • 编译
$ npm run build // 或者
$ yarn run build

 

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

 

a0f58af424cdfd5

赞(2) 打赏
转载请附上原文出处链接:胖蔡说技术 » Vue如何优化页面的SEO
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏