vue做seo优化 |
您所在的位置:网站首页 › seo网站优化服务 › vue做seo优化 |
前言
先了解什么是seo?再了解搜索引擎蜘蛛的工作原理?seo为啥对vue单页面不友好?vue项目怎么做seo优化?prerender-spa-plugin怎么使用,以及它的工作原理
什么是seo?
SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。 引擎蜘蛛的工作原理?详情查看蜘蛛的工作原理;不够详细的话自己百度一下 搜索引擎蜘蛛的爬行是被输入了一定的规则的,它需要遵从一些命令或文件的内容。 网络爬虫在爬取网页内容的时候,需要分析页面内容,主要有以下几点: 从 meta 标签中读取 keywords 、 description 的内容。根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。读取 a 标签里的链接,通过 a 标签的链接可以跳转到别的网站。(爬虫是先跳转,还是继续爬内容再跳转,就看算法是广度优先还是深度优先了)像 h1 - h6 标签是具有不同程度的强调意义的。一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。 seo为啥对vue单页面不友好? 爬虫在爬取的过程中,不会去执行js,所以隐藏在js中的跳转也不会获取到vue通过js控制路由然后渲染出对应的页面,而搜索引擎蜘蛛是不会去执行页面的js的,导致搜索引擎蜘蛛只能收录index.html一个页面,在百度中就搜索不到相关的子页面的内容。我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好 引起的问题收录的页面少了->被抓取的页面就少了->点击量之类的也就少了; 不能对对应的页面做TDK(title, keywords, description)不同的配置,每个页面的title和meta标签都是一样的,不利于网络爬虫的爬取 怎么解决那?html就不能通过js生成,我们需要在加载js之前做一下页面的预渲染,目前了解到的有两种方法,vue的ssr渲染(配置参考)和prerender-spa-plugin插件实现(配置参考)。SSR比较复杂,所以选了prerender-spa-plugin来尝试。 prerender-spa-plugin的使用See 配置参考. 本次只介绍vue-cli3的解决方案 使用 webpack + prerender-spa-plugin + vue-meta-info轻松地添加预渲染 npm install prerender-spa-plugin --savevue.config.js const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer // eslint-disable-next-line no-unused-vars const webpack = require('webpack') const path = require('path') module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'dist'), // outputDir: path.join(__dirname, './'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/testData', '/contact'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { //默认挂在window.__PRERENDER_INJECTED对象上,可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值 foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染,此处我理解为是Puppeteer获取页面的时机 }) }) ] } }, } staticDir 指的是预渲染输出的页面地址,routes 指的是需要预渲染的路由地址,renderer 则是所采用的渲染引擎是什么,目前用的是 V3.4.0 版本支持 PuppeteerRenderer。inject 则是预渲染过程中都能拿到的值,该值提供给你了机会,让你觉得是否渲染这部分代码。例如下面的代码,是不会被预渲染进 HTML 中的。 showMessage(){ if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return; this.message = '我是测试预加载拦截'; } renderAfterDocumentEvent 这个则很关键,这个是监听 document.dispatchEvent 事件,决定什么时候开始预渲染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') 然后就是npm run build打包 1. router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面,所以一定要history 2.打包之后上传到服务器才可以看到效果,或者本地自己创建一个服务这样dist的文件夹目录结构就会变成如下的样子 就是打包之后,每个路由都会打包成一个文件夹,都有一个对应的静态 HTML; 每一个 HTML 内除了 这个 Vue 的挂载元素外,还有静态的标签内容。 首页/活动管理/活动列表/活动详情/ 遇到的问题1.本地起服务测试,会发现能正常运行,但是做了优化的页面刷新之后会没有样式 造成问题的原因就是打包的时候vue.config.js的资源路径配置不对 没有优化之前的路径是 // 资源路径 publicPath: './',打包之后路由下面的资源路径是这样的 优化之后的路径是 // 资源路径 publicPath: '/',打包之后的路由下面的资源路径是这样的 就是路径前面多了一个/,采用了绝对路径 这个时候需要一个服务来测试1.全局安装node.js 2.安装成功后,执行npm install anywhere -g 安装anywhere 3.在对应路径下打开cmd,执行anywhere指令。如图: 浏览器访问http://你的ip:8000/contact后看到一下内容以及对应的html 鼠标右键审查元素可以看到 main.js里面引入vue-meta-info import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)这样在组件页面中就可以使用了 假设你要给contact.vue添加title,meta标签 contact.vue ... export default { metaInfo: { title: '我是contact头', // set a title meta: [{ // set meta name: 'keyWords', content: '我是contact关键字' }, { name: 'description', content: '我是contact描述' }], link: [{ // set link rel: 'asstes', href: 'https://assets-cdn.github.com/' }] } }这样再结合prerender-spa-plugin,打包之后,在dist文件夹找到contact文件夹下的index.html 打开你会发现就有title和meta的关键字和描述标签了 本地起服务或者发布到线上运行项目,在页面右键—查看源代码—就可以看到页面的title和meta标签了。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |