最近做项目的时候,被要求做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. Windows phone应用开发[19]-RSA数据加密

    在这个系列的第十六章节中Windows phone应用开发[16]-数据加密 中曾详细讲解过windows phone 常用的MD5,HMAC_MD5,DES,TripleDES[3DES] 数据加密 ...

  2. SingleTon单例模式总结篇

    在Java设计模式中,单例模式相对来说算是比较简单的一种构建模式.适用的场景在于:对于定义的一个类,在整个应用程序执行期间只有唯一的一个实例对象. 一,懒汉式: 其特点是延迟加载,即当需要用到此单一实 ...

  3. Eclipse Java class修改后的即时编译

    通常情况下,修改了java文件,需要重启eclipse.但是myeclipse可以不用. 其实即时编译早就有了,通过简单配置javaRebel配置,可以达到修改java文件后不重启eclipse. 注 ...

  4. iOS - 常用的宏定义

    1.处理NSLog事件(开发者模式打印,发布者模式不打印) 1 2 3 4 5   #ifdef DEBUG   #define NSLog(FORMAT, ...) fprintf(stderr,& ...

  5. C# 非模式窗体show()和模式窗体showdialog()的区别(转)

    对话框不是模式就是无模式的.模式对话框,在可以继续操作应用程序的其他部分之前,必须被关闭(隐藏或卸载).例如,如果一个对话框,在可以切换到其它窗 体或对话框之前要求先单击“确定”或“取消”,则它就是模 ...

  6. Angular 使用

    tks: 使用: http://developer.51cto.com/art/201302/380661.htm http://www.infoq.com/cn/news/2013/02/angul ...

  7. 【转】Paxos算法深入分析

    http://blog.csdn.net/anderscloud/article/details/7175209 在分布式系统设计领域,Paxos可谓是最重要一致性的算法.Google的大牛们称   ...

  8. xUtils3源码分析(一):view的绑定

    概述 xUtils3是国人开发的一款功能丰富的Android快速开发框架,值得研究下.zip包下载:[ZIP]xutils主要分以下几个模块 视图绑定模块 网络请求模块 数据库模块 图片加载模块 我们 ...

  9. IIS6.0架构概览(翻译)

    IIS6.0提供一个重新设计的万维网发布服务(World Wide Web Publishing Service)架构,可以帮助你为你的网站构建更好的性能.可靠.可扩展性(scalability),无 ...

  10. linux ifconfig命令使用详解

    Linux下网卡命名规律:eth0,eth1.第一块以太网卡,第二块.lo为环回接口,它的IP地址固定为127.0.0.1,掩码8位.它代表你的机器本身. 1.ifconfig是查看网卡的信息. if ...