一、什么是seo？
SEO是由英文Search Engine
Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。
二、引擎蜘蛛的工作原理？
从 meta 标签中读取 keywords 、 description 的内容。
根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。
读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）
像 h1 - h6 标签是具有不同程度的强调意义的。
一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。
三、seo为啥对vue单页面不友好?
1）、爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到
2）、vue通过js控制路由然后渲染出对应的页面，而搜索引擎蜘蛛是不会去执行页面的js的，导致搜索引擎蜘蛛只能收录index.html一个页面，在百度中就搜索不到相关的子页面的内容。
3）、我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好
话不多说：使用prerender-spa-plugin解决
1、安装prerender-spa-plugin：
npm install prerender-spa-plugin --save
2、配置vue.config.js代码
// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
publicPath: "/",
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
// 打包的路由路径
routes: ['/', '/solution', '/product', '/productDetails', '/news', '/newsDetails', '/download', '/AboutUs', '/contactUs'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false,
// 最大页面数
maxConcurrentRoutes: 20,
renderAfterTime: 500000,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
}
}
};
3、配置main.js
new Vue({
router,
store,
render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
4、路由router模式为 history ：
const router = new VueRouter({
mode: 'history',
routes
})
然后就是npm run build打包
打包后的文件目录
遇到的问题
1.本地起服务测试,会发现能正常运行，但是做了优化的页面刷新之后会没有样式造成问题的原因就是打包的时候vue.config.js的资源路径配置不对没有优化之前的路径是
vue.config.js修改之前的配置
打包之后路由下面的资源路径是这样的
修改前打包的路径
重点：解决办法
优化之后的路径是
vue.config.js修改之后的配置
打包之后的路由下面的资源路径是这样的
修改后打包的路径
就是路径前面多了一个/,采用了绝对路径
2、需要一个服务来测试
1）、执行npm install anywhere -g 安装anywhere
2）、在对应路径下打开cmd，执行anywhere指令。如图：
执行命令得到对应的链接
然后就可以在浏览器输入地址访了，可以看到每个路由对应的 HTML
浏览器访问http://你的ip:8000/contact后看到一下内容以及对应的html
鼠标右键审查元素可以看到
打包后的html文件
然后就是为这些打包的静态页面分配title和meta标签，需要用到 vue-meta-info
安装及引入
这样在组件页面中就可以使用了
假设你要给demo.vue添加title，meta标签
页面使用
到此SEO优化基本已经完成
如果对你有用，请赞一个再走
网友评论