SEO优化
**SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。
搜索引擎优化的技术手段主要有黑帽(black hat)、白帽(white hat)两大类。通过作弊手法欺骗搜索引擎和访问者,最终将遭到搜索引擎惩罚的手段被称为黑帽,比如隐藏关键字、制造大量的meta字、alt标签等。而通过正规技术和方式,且被搜索引擎所接受的SEO技术,称为白帽。
**
prerender-spa-plugin 插件
网址:https://www.npmjs.com/package/prerender-spa-plugin
该插件的目的是提供一个简单的预渲染解决方案,该解决方案可轻松扩展并适用于任何使用webpack构建的网站或单页面应用程序。
1、安装
cnpm install --save prerender-spa-plugin
2、在根目录新建webpack.prod.conf.js文件
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
// vue-cli生成的配置中就已有这个了,不要动
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'),
routes: ['/','/product','/about','/contact','/join','/jzjh'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
})
3、在main.js文件中配置
new Vue({
router,
store,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'))
},
}).$mount('#app')
vue-meta-info
网址:https://www.npmjs.com/package/vue-meta-info
vue-meta-info
是一个基于vue 2.0的插件,它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化,自动更新你的title、meta等信息,那么用此 插件也是再合适不过了。 当然,有时候我们也可能会遇到让人头疼的SEO问题,那么使用此插件配合 prerender-spa-plugin 也是再合适不过了
1、安装
cnpm install --save vue-meta-info
2、在main.js中配置
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
3、在需要SEO优化的组件进行配置
<script>
export default {
metaInfo: {
title: "网页标题",
meta: [
{
name: "keywords",
content:"关键字",
},
{
name: "description",
content:"网页描述",
},
],
},
data() {
return {};
},
};
</script>