SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是:为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,获得品牌收益;SEO包含站外SEO和站内SEO两方面;为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划,还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
近期由于公司官网需要进行SEO优化,但是官网的前端架松是以VUE为主的,对SEO的支持并不友好。遂寻找对VUE进行SEO优化的方案。收寻的解决方案如下
1.SSR 官方提供的服务器端渲染
2.Nuxt.js 第三方提供的服务器端渲染
3.vue-meta-info & prerender-spa-plugin
SSR 官方提供的VUE服务器端渲染解决方案,由于网站SEO的需求并不需要实时的获取信息,而且对项目的改动成本也比较高,所以pass了。Nuxt.js是第三方的服务端渲染解决方案。比SSR略简单,但比第三种方案(vue-meta-info & prerender-spa-plugin)还是要对更重一些。所以最后选择了对项目改动最小,并能满足SEO的基本需求的第三种方案。
好了,方案选定。接下来就先做好项目改动的准备工作:
1.安装vue-meta-info
npm install -save-dev vue-meta-info
2.安装 prerender-spa-plugin
npm install -save-dev prerender-spa-plugin
安装过程中遇到了一些问题, prerender-spa-plugin插件是依赖于puppeteer库。在安装的过程中,puppeteer会自动下载chromium(模拟浏览器环境),但在国内的网络环境会下载失败,从而导致安装失败。
ERROR: Failed to download Chromium r637110! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.
在查阅了相关资料后,找到解决办法:
跳过自动下载chromium,我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1跳过下载步骤。
npm i --save puppeteer --ignore-scripts
或者
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
然后手动下载chromium,可以架梯子下google的chromium,也可以从taobao镜像地址:https://npm.taobao.org/mirrors/chromium-browser-snapshots/ 下载, 但一定要选择好安装失败时提示的 r637110 同版本下载。解压后把文件夹复制到
node_modules/puppeteer/.local-chromium/win64-r637110/
目录下,如果没有.local-chromium目录,在puppeteer目录里,执行一下
node install.js
就会生成.local-chromium目录。把下载好的chromium复制进去就可以了。
到现在,需要的插件就安装好了。
下面来进行必要的配置,首先是webpack的配置,webpack.prod.conf.js文件的修改,在plugins里加下如下代码
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
const PrerenderSPAPlugin = require('prerender-spa-plugin') // 引入prerender-spa-plugin
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../dist'),
// 需要进行预渲染的路由,build后会生成对应的目录及index.html静态页面。
routes: ['/', '/index', '/about'],
// 这个很重要,如果没有配置这段,也不会进行预渲染
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
然后是main.js
new Vue({
el: '#app',
router,
store,
render: h => h(App),
// 这句非常重要,否则预渲染将不会启动
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
及router/index.js的修改,路由必为 history 模式。因为prerender-spa-plugin目前只支持history模式。
const router = new Router({
mode: 'history', // 改为 history 模式
routes: [
{
path: '/',
redirect:'/index',
name: 'index',
component: Index
},
{
path: '/index',
name: 'index',
component: Index
},
{
path: '/case',
name: 'case',
component: Case
},
{
path: '/service',
name: 'service',
component: Service
},
{
path: '/about',
name: 'about',
component: About
}
]
})
更详细的配置,请参考 https://www.npmjs.com/package/prerender-spa-plugin
到目前为止准备工作就算是做完了。
vue-meta-info插件的调用。我们可以在需要meta信息的组件内加入如下代码
<template>
...
</template>
<script>
export default {
metaInfo: {
title: '测试的SEO',
meta: [
{
name: 'keywords',
content: '关键字1,关键字2,关键字3'
},
{
name: 'description',
content: '这是一段网页的描述'
}
]
}
}
</script>
如果你的title或者meta是异步加载的,那么你可能需要这样使用
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>
更多vue-meta-info详情,请移步 https://www.npmjs.com/package/vue-meta-info 官方文档
现在我们把项目打包,看看优化后的效果如何:
npm run build
这是项目打包后的目录结构
可以看到,在浏览器里查看源码后,可以看到meta里的keywords和description都是可以直接看到的,非常有利于搜索引擎的检索。
最后结论:通过vue-meta-info和prerender-spa-plugin插件的组合,基本上可以实现网页meta标签的seo优化。