基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest…

前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染prerender-spa-plugin:4.使用Phantomjs针对爬虫做处理. 1.SSR服务器渲染 关于服务器渲染:Vue官网介绍 ,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境. 使用SSR权衡之处: 开发条件所限,浏览器特定的代码,只能在某些生命周期钩子函数 (li…

最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下: 1.收集几个流量大的网站(必须是vue做的)页面交互和逻辑尽可能复杂多样2.对比一下各个页面的seo是如何做的3.网站中出现率做多的公共组件或者公共方法是什么于是我就开始收集了,在这期间也了解到了很多东西.1 .首先怎么判断网站是用vue做的,我的方法当然是先搜一搜,当让搜出来的并不一定是,接下来可以用vue-develop这个插件,只要你安装了这个插件,是vue的网站该插件的图标就会点亮 2 .如何判断该网站…

预渲染prerender-spa-plugin 如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件.优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点. 优势: 改动小,引入个插件就完事: 不足: 无法使用动态路由: 只适用少量页面的项目,页面多达几百个的情况下,打包会很很…

vue-meta-info:         安装: npm install vue-meta-info --save         全局引入vue-meta-info,在main.js                import Vue from 'vue'                import MetaInfo from 'vue-meta-info'                Vue.use(metaInfo)         组件内静态使用metaInfo         …

方式一 思否 https://segmentfault.com/q/1010000011824706 SSR 和 Nuxt.js : https://zh.nuxtjs.org/ https://segmentfault.com/q/1010000017492984 Prerender prerender-spa-plugin : https://github.com/chrisvfritz/prerender-spa-plugin < prerender-spa-plugin Vue SPA项…

参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: 3.预渲染prerender-spa-plugin: 4.使用Phantomjs针对爬虫做处理. 参考文档:https://segmentfault.com/a/1190000019623624…

前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情形就会在这骨感的现实面前,悄然的被显现.所以,越发体验到,当必要有计划的去做,去写,去玩,去嗨,利用好这荷尔蒙分泌还算旺盛的时光,去厚积去博取,去发现去折腾:让自己的生命不在仅是工作与惆怅,还有时间分与"诗和远方".不用分析,就知道这该如何去做,高效去完成工作,然后去学着优雅地生而活.目前…

VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服务端渲染. 1.概述 官方文档 服务端渲染的配置相比预渲染就复杂多了,要做到同构,还要保证服务端和客服端的组件状态一致,我们需要对整个项目进行改造.大部分的内容官方文档中都说明的比较清楚,这里就不重复讲述了,需要各位花费一些时间照着文档一步步改造项目. 本人一开始也是这样照着文档做的,但是改造到最后…

VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE,预渲染和SSR还是要搞起来. 1.原理 为什么做服务端渲染之前先去了解了预渲染呢?因为预渲染方案相比服务端渲染简单太多了,而且并不是所有项目都需要服务端渲染的. 预渲染是怎么实现的呢?原理很简单,在项目开发完成之后,将有限的需要SEO的页面挑选出来,借助prerender-spa-plugin插件…