vue中seo优化方案

179 阅读1分钟

一、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添加关键词,提高爬虫识别权重