vue单页面如何通过prerender-spa-plugin插件进行SEO优化

目录
  • 一、前言
  • 二、过程

prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详细参考我的另一篇博客:VueSSR的一些理解和详细配置

一、前言

之前虽然一直有看过SEO相关的文章,但是一直没去实践过,然后突然技术总监要求要对咱们的官网做个SEO的优化。

于是才正式动手搞这玩意。地址:火石创造官网

首页用的根目录的index.html

/bluebook页面用的bluebook目录下的index.html。

对于搜索引擎蜘蛛的工作原理就不再详细的复述了,网上相关博客很多。

大致讲讲自己对单页面应用的SEO不友好的地方的理解吧。

对于单页面应用,只有一个html文件,是所有页面的载体,vue通过js控制路由然后渲染出对应的页面,而搜索引擎蜘蛛是不会去执行页面的js的,导致搜索引擎蜘蛛只能收录index.html一个页面,在百度中就搜索不到相关的子页面的内容。这会引起两个问题

1. 收录的页面少了,点击量之类的也就少了;

2. 不能对对应的页面做TDK(title, keywords, description)不同的配置,这个可以配合vue-meta-info插件生成。

那么,要想解决这个问题,html文档就不能通过js生成,目前了解到的有两种方法,vue的ssr渲染(官方文档)和prerender-spa-plugin插件实现(详细配置)。SSR目前没有条件去尝试,所以选了个较为简便的第二种方法。

二、过程

prerender-spa-plugin的配置其实很简单。就下面一个配置就行了。

主要讲讲集成的gu过程中遇到的坑:

1. 路由mode必须是history;

2. 新的html已经生成了,但是点击菜单跳不进去那个html,还是用的js渲染的。

解决:

1.将根目录的index.html也设计成预渲染页面;  2. 在最外层的<router-view></router-view>外加一个<div id="app"></div>(渲染节点)

3.  mode由hash改成history布到服务器上刷新页面会404。nginx需要更改配置

location / {
        try_files $uri $uri/ /index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }

4. 打开页面之后,切换其他非预渲染页面不渲染内容了。

解决:

在预渲染出来的页面组件里面加一个<div id="app"></div>。因为vue是挂在在div idwe为app的节点上的,把主页通过插件预渲染之后,自然没了这个div,自然就渲染不出来了。

目前只有以上收获,有新的进展再更新。

补充:

1. 只有a标签,才能跳进预渲染页面,router-link或者$router.push跳转会被js代理渲染;

2. 如detail/:id或者user/:id这种动态路由也是可以使用预渲染的,prerender-spa-plugin插件中配置['/detail']即可,当然,这个预渲染页面肯定是没内容的,会在访问的时候生成真是的数据。   这个有误,貌似处理不了动态页面...

3. prerender-spa-plugin的新版本是依赖的谷歌的浏览器的,利用谷歌的无头浏览器,在不打开浏览器的情况下,渲染编译出html。但是谷歌浏览器又一两百兆,在window环境还好,但是到服务器上,通过jekins去编译,或者直接在服务器上执行npm run build会失败。这时候跳过安装谷歌浏览器,翻墙去谷歌下个linux版本的浏览器,然后在服务器上安装,一般安装好之后会默认在/usr/lib中,代码里面也不需要在prerender-spa-plugin配置中配置puppeteer.launch的executablePath(可执行路径),会默认去/usr/lib中寻找。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Vue开发网站seo优化方法

    因为用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是模型页面而不是最终数据的渲染页面,搜索引擎是不回去执行请求到的js.vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR. 目前基于vue的方案是Nuxt.js,同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前,页面上是有数据可让爬虫进行爬取 方法一.利用prerender-spa-p

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • vue-cli单页面预渲染seo-prerender-spa-plugin操作

    1 vue-cli-plugin-prerender-spa 使用方法: vue add prerender-spa 在安装的过程中会需要安装一个chrome,网速不好可能导致不能下载,导致安装失败,可以取消chrome的安装,然后手动下载放在指定的目录下: 安装过程中选择需要预渲染的route 安装成功: 自动在main.js中加入: 2 使用prerender-spa-plugin插件 cnpm i prerender-spa-plugin --save-dev vue-cli2.0 在bu

  • 关于Vue单页面骨架屏实践记录

    关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给用户一种很自然的过渡,不会造成页面长时间白屏或者闪烁等情况. 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案. 这里主要通过代码为大家展示如何一步步做出这样一个骨架屏: prerender 渲染骨架屏 本组件库骨架屏的实现也是基于预渲染去实现的,有关于预渲染更详细的介绍请参考这篇文章:处理 Vue 单页面 Meta SEO的另一种思路 下面我们主要介绍其实现步骤,首先我们

  • 详解处理Vue单页面应用SEO的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

  • Vue单页面应用做预渲染的方法实例

    目录 前言 vue-cli2.0版本 vue-cli3.0版本 总结 前言 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr(服务端渲染)和预渲染两种解决方案,这里我们只讨论预渲染 vue-cli2.0版本 安装 npm install prerender-spa-plugin --save webpack.prod.conf.js增加部分代码 const path = require('path') const PrerenderSPAPlugin = re

  • vue单页面SEO优化的实现

    SEO(Search Engine Optimization)搜索引擎优化.利用搜索引擎的规则提高网站搜索引擎内的自然排名. 目的:为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,获得品牌收益,免费流量,从网 站结构.内容建设方案.用户互动传播等. 随着前端框架的强势兴起,vue框架迅猛发展,使用vue构建开发的人员越来越多,但是使用vue-cli打包项目一般为spa(单页面)项目,众所周知单页面应用不利于SEO,于是有ssr(服务端渲染)和预渲染两种解决方案,这里我们只讨论预渲染

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

  • Vue单页面应用保证F5强刷不清空数据的解决方案

    问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.setItem('mobileState', JSON.stringify(state)); }) if (sessionStorage.getItem('mobileState')) { state = JSON.parse(sessionStorage.getItem('mobileState')); }

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • vue单页面应用打开新窗口显示跳转页面的实例

    一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要. 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({name: 'abc'}) 以上是常规的通过路由的页面跳转方法. 我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变. const { href } = this.$router.resolve({ name: 'abc' }) window.

随机推荐