非SSR项目VUE老项目支持SEO方案

一、meta标题头配置

1、配置google分享和爬虫抓取头

ini 复制代码
<meta property="og:type" content="website" />
<meta property="og:title"  content="**"/>
<meta property="og:description" content="***" />
<meta property="og:url" content="***"/>
<meta  property="og:image" content="***.jpg" />

2、插件"vue-meta-info",使得每个页面都有独立的title配置:

安装vue-meta-info

//yarn $ yarn add vue-meta-info //NPM npm i vue-meta-info --save
2.

在main.js文件中引入vue-meta-info

import Vue from 'vue' import MetaInfo from 'vue-meta-info'; Vue.use(MetaInfo)
3.

静态使用 metaInfo

动态使用 metaInfo

二、SPA页面静态化

安装prerender-spa-plugin

注意因为原来的"prerender-spa-plugin"已经不更新的,在webpack5.0版本会有BUG,所以需要用别人二次修改后的新适配版本

css 复制代码
npm i @dreysolano/prerender-spa-plugin -D

在vue.config.js配置

const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

const vueConfig = { configureWebpack: { // webpack plugins plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ injectProperty: '__PRERENDER_INJECTED', inject: { foo: 'bar' }, // 在 app.vue onMounted函数中 document.dispatchEvent(new Event('custom-render-trigger')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'custom-render-trigger', // renderAfterTime: 6000, // headless: false }) }) ] }, }
2.

路由模式必须是history

mode : "history",
3.

App.vue setup onMounted函数

setup() { onMounted(() => { document.dispatchEvent(new Event('custom-render-trigger')) }) }

相关推荐
然我33 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子38 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹42 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss