SEO(Search Engine Optimization)搜索引擎优化,是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。
搜索引擎,又称爬虫或者蜘蛛,它在爬取和分析页面内容时,主要进行如下操作:
由于爬虫不会去执行js,因此如果需要对单页面应用做SEO,就需要预渲染。vue提供了两种方案解决该问题
prerender-spa-plugin 较简单,但打包需要的时间长,适用于少量页面;而SSR虽然复杂,但更适用于大型应用的SEO
这里用的是 vue-cli 4.5 + Vue2
使用 vue ui
进入图形界面,搜索并安装插件 vue-cli-plugin-prerender-spa
插件的作用
src/main.js
添加 mounted: () => document.dispatchEvent(new Event("x-app-rendered"))
vue.config.js
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
}).$mount('#app')
vue.config.js
module.exports = {
lintOnSave: false,
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: [ // 需要预渲染的路由地址
'/','/about'
],
useRenderEvent: true, // 在 mounted 时,传递渲染事件通知 prerender
headless: true, // 无界面浏览器
onlyProduction: true // 仅在生产模式才进行spa处理
}
}
}
至于 src/router/index.js
不用做任何改动,也不用把 mode 设置为 history
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
export default router
仅仅做了上述配置后,执行 npm run build
还是会报错 Chromium revision is not downloaded
,这是因为 prerender-spa-plugin 这个插件依赖于爬虫来抽取页面,而 puppeteer 正是这个用来实现爬虫的无界浏览器
Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js 库,通过 DevTools 协议提供了一个高级的 API 来控制 headless Chrome。它还可以配置为使用完整的(非 headless)Chrome。
在浏览器中手动完成的大多数事情都可以通过使用 Puppeteer 完成,下面是一些入门的例子:
要安装该插件,一定要使用 cnpm 命令,从国内镜像地址下载 chrome 内核(npm从外国的地址是无法正常下载的,这会导致后面也无法正常 build )
解决办法有三种:
1.使用Chromium 国内源
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i -g puppeteer
2.使用淘宝的cnpm 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g puppeteer
node_modules\puppeteer\.local-chromium\win64-848005(系统类型-版本号)\chrome-win32(下载的文件名)\
node_modules\puppeteer\.local-chromium\linux-848005(系统类型-版本号)\chrome-linux(下载的文件名)\
如果安装后依旧报上述错误,试试 cnpm uninstall puppeteer
命令。虽然字面意思上是卸载,但实际测试发现还是重装
最后执行 npm run build
,就会发现每个路由都在 dist 文件夹被编译成一个单独的 html 文件,这样就可以正常SEO了
使用该组件可以解决之前说的 —— SEO 的 TDK问题(不同页面设置不同的 title, keywords, description)或为某些页面设置允许缩放,而其他页面不允许等操作。
首先引入 vue-meta-info 依赖,npm install -D vue-meta-info
,该插件的官方地址为 https://www.npmjs.com/package/vue-meta-info
之后在 src/main.js
中全局绑定
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
最后在组件内使用即可
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{
// set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{
// set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
npm run build
打包结果可看出
优点
不足: