预渲染prerender-spa-plugin

如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

优势:

  • 改动小,引入个插件就完事;

不足:

  • 无法使用动态路由;
  • 只适用少量页面的项目,页面多达几百个的情况下,打包会很很很慢;

解决方案如下:

1.首先需要安装prerender-spa-plugin和vue-meta-info,prerender-spa-plugin解决打包多个页面,vue-meta-info解决SEO的问题

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

2.在项目中找到webpack.prod.conf.js,有可能这个文件名不同,这个时候你需要根据你的命令行来找到相关文件

在此文件中添加如下代码

贴上相关代码

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, '../dist'),
// Required - Routes to render.
routes: [ '/', '/cart', '/list'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),

3.在VUE项目中添加相关代码

贴上相关代码,

new Vue({
el: '#app',
router,
store,
render: h => h(App),
mounted () {
// You'll need this for renderAfterDocumentEvent. document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')

4.到这里就完成打包成多个页面,执行打包命令

npm run build

5.打包完成会出现相关文件夹,每个文件都有相关的index,html说明打包成功

5接下去就是解决SEO的问题,导入vue-meta-info,然后使用

6然后在需要的组件中添加如下代码

贴上相关代码

metaInfo: {
title: '我是hello头', // set a title
meta: [{ // set meta
name: 'keyWords',
content: '我是hello关键字'
},
{
name: 'description',
content: '我是hello描述'
}]
}

7.再执行打包程序,这时候你再相关页面中查找相关meta

静态化静态化是Nuxt.js打包的另一种方式,算是 Nuxt.js 的一个创新点,页面加载速度很快。

在 Nuxt.js 执行 generate 静态化打包时,动态路由会被忽略。

优势:

  • 纯静态文件,访问速度超快;
  • 对比SSR,不涉及到服务器负载方面问题;
  • 静态网页不宜遭到黑客攻击,安全性更高。

不足:

  • 如果动态路由参数多的话不适用。

vue seo 优化的更多相关文章

  1. vue骨架屏以及seo优化

    参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: ...

  2. VUE 2.x SEO 优化问题 vue-meta-info && prerender-spa-plugin 配合使用

    VUE 2.x  SEO  优化问题,以及预渲染问题 1.新建项目可以采用nuxt.js , 配置meta.以及预渲染 都很方便,官网文档都很详细: 2.对于已有项目: vue-meta-info & ...

  3. Vue(SPA) WebPack模块化打包、SEO优化(Vue SSR服务端同构直出)、全浏览器兼容完整解决方案

    白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...

  4. vue spn如何做seo优化

    vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...

  5. Vue项目SEO优化的另一种姿态

    背景:当前项目首页和登陆后的平台在一个项目里,路由采用hash模式,现在要做SEO优化,这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大,影响范围比较广,同样更改当 ...

  6. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  7. HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)

    前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...

  8. VUE的Seo优化 如何实现

    今天看到这样一个问题,在vue中,如何进行seo优化呢? 大家应该都知道,seo优化主要是做搜索引擎的排名,但是ajax异步又不支持seo,同时对于url #/的写法,搜索引擎也没办法爬取网站内其他路 ...

  9. SEO页面优化以及如何对单页面应用进行SEO优化

    一.简介 1.何为SEO? SEO(search engine optimization),翻译为搜索引擎优化,是利用搜索引擎的搜索规则来提高在相关搜索引擎的排名以及访问量的方式. 2.目的 为了获取 ...

随机推荐

  1. 2020-11-02(三年之约D92)-优秀不是一种行为,而是一种习惯

    1.阅读:<软技能-代码之外的生存指南>- 第45章 培养习惯:刷新你的代码 成就我们的恰恰就是那些不断重复做的事情.因此,优秀不是一种行为,而是一种习惯--亚里士多德 习惯主要由三个要素 ...

  2. html图片拖放

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  3. vue中父子间传值和非父子间传值

    vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...

  4. 如何突出显示PDF文档中的一些重要文本信息

    PDF文档中如果存在着太多的文字时,阅读者会容易遗漏很多重要的信息.但如果,文档中存在着一些特殊标记的文字时,比如标黄.标红文本时,很多人都会给予特别关注. 因此,当大家在使用pdfFactory专业 ...

  5. 【MathType教学】如何让括号内的内容居中

    作为一款非常好用的公式编辑器,MathType它的功能十分强大,不仅包含了大量的数学符号,并且能和Office软件很好地兼容.但是有的时候打出来的公式可能不是自己想要的效果,这时我们就要用一些特别的办 ...

  6. 如何在苹果电脑下载器Folx中管理下载列表

    Folx是一款Mas OS专用的下载器,提供了便捷的下载管理.灵活的设置.今天小编准备跟大家聊一聊关于Folx中常见的几种下载管理方式. 一.管理任务状态栏 在Folx下载面板上,可以通过类别查看任务 ...

  7. Mac支持的网络游戏有哪些?怎么支持Windows游戏?

    "游戏是这个世界上唯一能和女性争夺男朋友的东西(/滑稽,有不少女生也喜欢玩游戏)."虽然只是一句玩笑话,不过也可以看出游戏对大多数男生来说是必不可少的一项娱乐活动了.而网络游戏是游 ...

  8. Vegas的软对比具体如何设置

    软对比是Vegas中比较常用的一个视频特效,通过这一特效可以让视频画面更加柔和.而对于新手用户来说,软对比显得有些陌生,不知道该如何使用. 本集主要为大家介绍:sony vegas的软对比. 在视频制 ...

  9. spring中的事务传播机制

    1.事务的实现思想 在spring中要想某个方法具有事务,只要在方法前加一个@Transactional注解.然后spring就会利用aop思想,在这个方法执行前开启事务, 在方法执行后选择提交事务或 ...

  10. 【VUE】4.配置axios发起请求

    1.配置axios 1. 前端请求后端接口进行数据交互的时候,需要配置axios 2. 导入axios包, main.js import axios from 'axios' 3. 挂载到原型配置上, ...