最近做项目的时候,被要求做seo,由于项目已经开发完毕,且只需首页做seo,所以考虑再三,决定用prerender-spa-plugin结合vue-meta-info来实现首页的seo。
如果你的页面是动态的,比如通过v-for或v-if等来动态渲染的dom,则不适合此方法,可以考虑官方的SSR

代码已更新到github,点击查看

言归正传,第一步:安装prerender-spa-plugin,vue-meta-info

npm install prerender-spa-plugin vue-meta-info --save

如果安装失败,使用淘宝镜像试试

cnpm install prerender-spa-plugin vue-meta-info --save

第二部:在你的项目目录下找到该文件 build/webpack.prod.conf.js,添加如下代码
const PrerenderSpaPlugin = require('prerender-spa-plugin')

new PrerenderSpaPlugin(
  //将渲染的文件放到dist目录下
      path.join(__dirname, '../dist'),
      //需要预渲染的路由信息
      [ '/index','/about' ],
      {
      //在一定时间后再捕获页面信息,使得页面数据信息加载完成
        captureAfterTime: 50000,
        //忽略打包错误
        ignoreJSErrors: true,
        phantomOptions: '--web-security=false',
        maxAttempts: 10,
      },
    )

至此,你可以打包试试,如果打包后的文件包含index和about两个文件,表明成功。

 
图片

但是运行打包的文件,右键查看网页源代码,你会发现,index和about这两个seo的文件信息是一样的,如果你也是这样的情况,别急,把你的路由模式换成"history"模式。

 
图片

重新打包,运行打包文件,查看源代码,发现内容不一样了,至此才算成功。

但是会出现一个隐形的问题,当你打包后的文件部署到线上时,刷新页面就会404了。这时需要后端配置一下,后端配置

vue-meta-info的具体使用看这里 vue-meta-info

浅谈vue单页面seo问题的更多相关文章

  1. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  2. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  3. 在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...

  4. 处理 Vue 单页面 SEO 的另一种思路

    vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...

  5. 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  6. 浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...

  7. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  8. vue单页面处理SEO问题

    设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...

  9. Vue 单页面应用 SEO SPA single page application advantages and disadvantages

    处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...

随机推荐

  1. Apache 的 httpd-mpm.conf 文件详解

    #prefork 多路处理模块 <IfModule mpm_prefork_module> StartServers              5   #设置服务器启动时建立的子进程数量, ...

  2. nice - 改变执行程序的优先级

    总览 (SYNOPSIS) nice [OPTION]... [COMMAND [ARG]...] 描述 (DESCRIPTION) 以 调整过的 调度优先级 运行 COMMAND. 如果 没给出 C ...

  3. Linux之目录与路径

    特殊的目录: “.”,代表此层目录 “..”,代表上一层目录 “-”,代表前一个工作目录 “~”,代表“目前用户身份”所在的主文件夹 “~account”,代表account这个用户的主文件夹(acc ...

  4. jenkins插件send files or execute commands over ssh插件parameterized publishing选项使用

    1.设置一个参数 2.设置label 3.勾选parameterized publishing

  5. ASP.NET Core 基础知识(五) 依赖关系注入

    参考https://www.cnblogs.com/jesse2013/p/di-in-aspnetcore.html 和 https://www.cnblogs.com/artech/p/net-c ...

  6. docker安装MySQL5.7示例!!坑

    docker  pull  mysql 一.错误的启动 [root@localhost  ~]#  docker  run  ‐‐name  mysql01  ‐d  mysql 42f0981990 ...

  7. Arduino-位操作

    读取指定位的数据 int x=bitRead(0x81,7);    //0x81从右向左依次为第0位到第15位,第2个参数为第7位的1复制给x,使x=1 把数据写到指定位 int x=13; //x ...

  8. 【GDOI 2016 Day1】疯狂动物城

    题目 分析 注意注意:码农题一道,打之前做好心理准备. 对于操作1.2,修改或查询x到y的路径,显然树链剖分. 对于操作2,我们将x到y的路径分为x到lca(x,y)和lca(x,y)到y两部分. 对 ...

  9. 【NOIP2016提高A组模拟7.17】寻找

    题目 Bob和Alice出去度蜜月,但Alice不慎走失,Bob在伤心过后,决定前去寻找Alice. 他们度蜜月的地方是一棵树,共有N个节点,Bob会使用下列DFS算法对该树进行遍历. startin ...

  10. 【宝藏】题解(五校联考3day1)

    分析 如果打爆搜的话可以拿60分. 首先知道期望是可以累加的,即i通过j去到k的期望,等于i去到j的期望加j去到k的期望. 所以令d[i]表示i的出度,F[i]表示从i到i的父亲的期望,G[i]表示i ...