一、SSR服务端渲染
由于vue项目是SPA单页面应用,只会浏览器解析时只会提供一个html文件里面引入的css与js文件并不能被爬虫解析,不利于网站SEO搜索,利用Nuxt.js,在浏览器请求html文件时,先将页面结构在后端服务器中渲染完成再通过请求发送到浏览器。
并且在项目中,书写代码要符合语义化规范,要减少回流(重排)的发生涉及到的a标签要添加title属性,img标签添加alt属性,标题使用h1包裹(一个页面只能出现一次),重要内容使用strong与em包裹(提高爬虫识别权重),对于不想显示的文字,尽量少用display:none;(爬虫会过滤掉none的内容)可以使用z-index或者移出可视区域
二、预渲染
本质就是利用库 prerender-spa-plugin + vue-meta-info 配置webpack和页面实现预渲染方案,最终build出来多个html文件。
缺点:不支持动态路由的使用,还有就是install和build时间会比较长
注意:必须是history模式
此方法可以通过webpack打包时,给html头部文件添加多个meta标签,手动给其name属性设置keywords与description,并给content添加关键词,提高爬虫识别权重