Vue框架的SEO优化之旅前言事情起因解决方案方案选择安装插件配置文件开始优化最终结果前言SEO（SearchEngineOptimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网

vue-meta-info官方地址：monkeyWangs/vue-meta-info添加所需插件vue-meta-infonpminstallvue-meta-info--save-devprerender-spa-pluginnpminstallprerender-spa-plugin

使用npm下载npmiprerender-spa-pluginvue-meta-info--save路由改为history模式配置prerender-spa-plugin在vue.config.js中添加这么一段newPrerenderSPAPlugin(//这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir:path.join

vue-meta-info使用方法安装vue-meta-infonpmivue-meta-info--save使用在main.js文件中引入vue-meta-infoimportMetaInfofrom'vue-meta-info

prerender-spa-plugin怎么使用，prerender-spa-plugin原理探究prerender-spa-plugin不能解决的问题静态页面分配title和meta标签----vue-meta-info

SPA)对于SEO不友好的问题可以通过预渲染(Prerender)和服务端渲染(SSR)技术解决本文主要记录预渲染技术在vuecli构建的项目中的使用用到插件prerender-spa-plugin、vue-meta-info

下面介绍如何使用Vue官方推荐的PrerenderSPAPlugin插件做预渲染版本vue-cli:4.54vue:2.6.11prerender-spa-plugin:3.4.0vue-meta-info:0.1.7目的因为常规Vue项目采用的是客户端渲染(CRS)，内容是在客户端通过JavaScript生成DOM插入HTML中，对SEO(SearchEngineOptimization|搜索引

预渲染获得服务端渲染的优点对特定路由生成静态HTML文件，前端作为一个完全静态的站点无需使用web服务器实时动态编译HTML改善少数页面的SEO,可采用预渲染若网站有成百上千条路线，预编译会非常缓慢（此情况慎用）vue-meta-info

由于做的活动有tdk的需求，而且并不只有一个页面，所以就需要区分不同路由的tdk检索了很多方式开始尝试了一种智能实现title的替换，插件名字我忘记了，最后没有用他我现在使用的是vue-meta-info

目录vue-meta-info官方介绍vue-meta-info使用在写移动端项目的时候，通常都会设置meta禁止用户缩放。最近的需求中，个别页面允许用户缩放，就需要给不同的页面设置不同的meta了。

预渲染模式，这比服务端渲染要简单很多，而且可以配合vue-meta-info来生成title和meta标签，基本可以满足SEO的需求注意：使用预渲染vue-router必须使用history模式build

title:vue使用vue-meta-info设置每个页面的title和meta信息#文章页面上的显示名称，一般是中文date:2019-11-2016:30:16#文章生成时间，一般不改，当然也可以任意修改

vue-meta-info官方地址：https://github.com/monkeyWang...

Vue项目seo:使用vue-meta-info动态生成meta标签众所周知，vue这种单页面的项目是不利于seo的，但是在实际项目中，像一些交互网站，不可避免会考虑一些seo问题。

vue项目使用prerender-spa-plugin+vue-meta-infoseo优化一.安装prerender-spa-plugin的安装及使用1.npminstallprerender-spa-plugin--save2.在webpack.prod.config.js中引入constPrerenderSPAPlugin=require(‘prerender-spa-plugin’)con

上周想给自己做的网站做一下seo优化，因为这个网站是用vue做的，所以首先就得先解决单页面的seo问题.网上有好几种方案：1、使用服务器端渲染（很多大厂都在用）2、使用vue-meta-info配合prerender-spa-plugin

1.插件prerender-spa-plugin，vue-meta-info2.prerender-spa-plugin插件进行页面的预渲染，vue-meta-info添加页面title,keywords3

利用vuecli3搭建项目，需要使用vue-meta-info和prerender-spa-plugin来优化seo，但是在prerender-spa-plugin好像出了点问题，解决后总结一下方法。

同时配合vue-meta-info可以生成title和meta标签，可解决SPA页面的SEO痛点一、安装npminstallprerender-spa-plugin--save二、路由模式特别注意：使用预渲染

前端时间写一个vue官网，开发很顺利，但是发布之后，发现对于SPA项目seo很不友好，于是用到预渲染进行优化，顺便利用vue-meta-info编写每个页面的name、content等等。

prerender-spa-plugin与vue-meta-info前端vue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种：1、SSR服务器渲染了解服务器渲染请进，这里不做记录

用prerender-spa-plugin（预渲染）+vue-meta-info（设置页面meta信息）对动态页面SEO问题很多，当页面数据切换时，meta信息无法及时修改。。

项目上线之后要求解决一下seo问题，现在总结一下希望能帮到各位ps：其实网上已经有很多的解释了我这边就不多做介绍贴一下vue-cli和依赖的版本1，需要用到我们的prerender-spa-plugin和vue-meta-info

prerender-spa-plugin+vue-meta-info做SEO和预渲染的效果首先说说prerender-spa-plugin这玩意儿这个就弄预渲染，好处就是预渲染可以极大的提高网页访问速度，配合一些meat插件，就可以可以满足SEO需求，尤其是开发到一半的项目没有配置SSR有需要SEO的需求，这个时候prerender-spa-plugin+vue-meta-info就可以达到要求1

所以就需要借助到vue-meta-info了。vue-meta-info官方介绍vue-meta-info是一个基于vue2.0的插件，它会让你更好的管理你的app里面的meta信息。你可以直接在组件

vue-meta-info:安装:npminstallvue-meta-info--save全局引入vue-meta-info,在main.jsimportVuefrom'vue'importMetaInfofrom'vue-meta-info'Vue.use

用于vue的SEO优化方案，我查了一下，大概有以下几种：（1）ssr,即单页面后台渲染（2）vue-meta-info与prerender-spa-plugin预渲染（3）nuxt（4）phantomjs

提到vue的seo优化，这本身就是一个麻烦，spa单页面应用对于网络爬虫是不友好的。由于单页面，所以每个页面的title和meta标签都是一样的，右键点击查看网页源文件。是看不到页面的dom结构的，包括meta和title的更改，这就不利于网络爬虫的爬取。不过vue也提供了对于网页预渲染的一些解决方案，提高网站的seo的优化本文只提供vue-cli3的解决方案使用webpack+prerender

如需使用vue-meta-info配置title和meta按照以下步骤：1.安装npminstallvue-meta-info--save2.在main.js引入importMetaInfofrom'vue-meta-info'Vue.use

1vue-meta-info介绍vue-meta-info是一个基于vue2

同时配合vue-meta-info可以生成title和meta标签，可解决SPA页面的SEO痛点一、安装npminstallprerender-spa-plugin--save二、路由模式特别注意：使用预渲染

同时配合vue-meta-info可以生成title和meta标签，可解决SPA页面的SEO痛点。

在Vue应用中，SEO优化通常都是采用服务端渲染，我们还有另外一种方式：使用vue-meta-info动态设置title/keword/description、具体用法参见文档：https://github.com

vue2.X使用步骤一.安装cnpmiprerender-spa-plugin--save-dev(建议通过淘宝镜像)npmivue-meta-info二.修改配置文件1.router/index.jsexportdefaultnewRouter({linkActiveClass:"on",mode:'history',//必须为history模式base:'/base/',//添加baserou

上文中提到过这里主要使用的是vue-meta-info，下面来和大家说一下它的用法安装大家可以选择不同的安装方式Yarn:$yarnaddvue-meta-infoNPM:$npminstallvue-meta-info

最近做项目的时候，被要求做seo，由于项目已经开发完毕，且只需首页做seo，所以考虑再三，决定用prerender-spa-plugin结合vue-meta-info来实现首页的seo。

vue-meta-info官方地址：monkeyWangs/vue-meta-info（设置vue单页面metainfo信息，如果需要单页面SEO，可以和prerender-spa-plugin形成更优的配合