nuxt 服务器渲染动态设置 title和seo关键字的操作
5星 · 超过95%的资源 121 浏览量
2021-01-21
10:57:16
上传
评论
收藏 77KB PDF 举报 
nuxt 每个页面head标签内容设置方式
浏览：196
导读
在前面几节课程中，我们已经完成对首页，jokes查询页，About页面的开发，接下来，我们来看一下每个页面的head标签
内容，我们会发现这三个页面的标签一致，而且和nuxt.config.js配置文件的head配置保持一致；
所以我们需要对这三个页面单独做一个head，更加方便于SEO优化，搜索引擎的爬取；
好，我们打开index.vue，编辑如下：
head(){
return {
nuxt-seo-meta:支持为nuxtjs生成各种seo元信息
浏览：128
适度元
支持Nuxt轻松生成SEO元数据
安装
yarn add nuxt-seo-meta
//or npm
npm add nuxt-seo-meta
将配置添加到nuxt.config.js文件。
{
... your options
modules : [
'nuxt-seo-meta' ,
] ,
seoMeta : {
title : 'SEO M
vue 动态给每个页面添加title、关键词和描述的方法
浏览：93
前言：直接写html加title和关键词想必大家都知道怎么去加，但用vue框架开发的项目我们怎么去动态的给每个页面添加呢 ↓
先在router.js里面配置我们的title、关键词和描述
{
path: '/train',
name: 'Train',
component: () => import('../components/page/Train.vue'),
meta: {
Nuxt页面自定义meta标签和asyncData异步请求
浏览：172
一、页面自定义meta标签
可以为每个页面单独设置不同的meta标签 以便于SEO
全局的meta标签在nuxt.config.js文件里配置
而单独的meta标签在组件的内部标签内进行配置即可
值得注意的是：hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description
因为默认的meta的hid属性就是description
若hid不配置成desc
Web前端框架应用：第8章 服务器端渲染-webpack搭建及渲染框架.pptx
浏览：177
第8章 服务器端渲染;;目录;目录;知识架构;知识架构;知识架构;知识架构;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;...8.4 Nuxt.js服务器端渲染框架;8.
基于 SpringBoot 和 Nuxt 的服务端渲染博客系统.zip
浏览：25
基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 (2) 基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 (2) 基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 (2) 基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 (2) 基于...
轻量级MVVM框架Vue.js快速上手（MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js）视频教程
浏览：72
分享视频教程——轻量级MVVM框架Vue.js快速上手（MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js） 实践阶段由浅入深分为四个案例：动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了Vue和HTML5技术的...
正版个人毕设-基于SpringBoot 和 Nuxt 的服务端渲染博客系统.zip
浏览：75
基于SpringBoot 和 Nuxt 的服务端渲染博客系统.zip正版个人毕设-基于SpringBoot 和 Nuxt 的服务端渲染博客系统.zip正版个人毕设-基于SpringBoot 和 Nuxt 的服务端渲染博客系统.zip正版个人毕设-基于SpringBoot 和 ...
项目中整合 vue + nuxt + axios + vuex + vue-router 一个基于 Nuxt 的服务器端渲染
浏览：191
项目介绍 项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo PC端项目线上地址 移动端端项目线上地址
【nuxt】服务器渲染部署步骤及【nginx】 反向代理
浏览：92
主要：nuxt.js服务器的渲染配置，在配置中注意的问题以及后台要安装配置哪些技术，和nginx反向代理配置和注意问题
Java 做的一个坦克大战小游戏.zip
浏览：19
基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 基于 SpringBoot 和 Nuxt 的服务端渲染博客系统 基于 SpringBoot 和 ...
轻量级MVVM框架Vue.js快速上手（MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js）
浏览：29
分享视频教程——轻量级MVVM框架Vue.js快速上手（MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js） 本系课程,主要分为两部分完成。第一部分：掌握Vue.js设计规范的语法。 第二部分：通过一些实际的前端案例来强化...
毕设项目基于SpringBoot 和 Nuxt 的服务端渲染博客系统源码.zip
浏览：95
毕设项目基于SpringBoot 和 Nuxt 的服务端渲染博客系统源码.zip毕设项目基于SpringBoot 和 Nuxt 的服务端渲染博客系统源码.zip毕设项目基于SpringBoot 和 Nuxt 的服务端渲染博客系统源码.zip毕设项目基于SpringBoot ...
Vue在 Nuxt.js 中重定向 404 页面的方法
浏览：124
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间使用路由，我们建议使用<nuxt> 标签。 正文 对我来说，Nuxt 是我所用过最好用的软件代码之一。它可以让我高效率地打造网站应用，...
基于Nuxt实现移动端的企业官网
浏览：201
3星 · 编辑精心推荐 项目中整合 vue nuxt axios vuex vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo
nuxt-mission:Nuxt.js 是一个用于构建静态和服务器端渲染站点的 Vue 框架。 此任务将带您了解从头开始构建 Nuxt.js 站点的基本要素
浏览：11
Nuxt.js 是一个用于构建静态和服务器端渲染站点的 Vue 框架。 此任务将带您了解从头开始构建 Nuxt.js 站点的基本要素。 在免费学习课程 构建设置 # install dependencies $ yarn install # serve with hot reload ...
Vue服务器渲染Nuxt学习笔记
浏览：166
然后去Vue.js 服务器渲染指南和nuxt官网看了看，发现文章大多都是搬运官网的内容，真正讲的清晰明了的很少。所以想写篇文章学习下SSR，希望能够帮助大家快速理解Vue SSR。 什么是SSR？ SSR，即服务器渲染，就是在...
Qt 5实现串口调试助手 （源工程文件、0积分下载）
浏览：75
5星 · 资源好评率100% 基于Qt 5实现串口调试助手，程序仅供参考，修改了之前十六进制接收0xA0--0xFF有误的问题，新增了窗口自适应（ui文件设置栅格），文件详情可看博客链接https://blog.csdn.net/m0_51294753/article/details/121405661。
【SystemVerilog】路科验证V2学习笔记（全600页）.pdf
浏览：163
5星 · 资源好评率100% SystemVerilog的听课学习笔记，包括讲义截取、知识点记录、注意事项等细节的标注。
目录如下：
第一章 SV环境构建常识 1
1.1 数据类型 1
四、二值逻辑 4
定宽数组 9
foreach 13
动态数组 16
队列 19
关联数组 21
枚举类型 23
字符串 25
1.2 过程块和方法 27
initial和always 30
func
AutoSAR标准协议4.2.2
浏览：15
5星 · 资源好评率100% AutoSAR标准协议规范4.2.2，里面包含了AutoSAR组织所规定的AutoSAR架构的标准规范协议原文档。对AutoSAR的学习有一定的借鉴意义
光伏-储能并网系统仿真.rar
浏览：20
5星 · 资源好评率100% 该文件是清华大学储能课的期末大作业。用SIMULINK搭建了一个完整的光伏-储能并网系统。我的博客中介绍了系统实现的具体方法，欢迎查看！
NPPJSONViewer.zip
浏览：22
4星 · 用户满意度95% NodePad++ JSON格式化插件
GD32替换STM32注意事项.pdf
浏览：200
3星 · 编辑精心推荐 GD32 介绍与 STM32 兼容性汇总。STM32的代码直接在GD32上运行需要小部分的修改。按教程做对应修改就行哈。
XCP协议的规范文档
浏览：199
5星 · 资源好评率100% XCP协议的原规范文档，主要包含了Part1-5共5个部分，其中第三部分又分为CAN、以太网和Sxl等。对于XCP协议的开发者和学习者有借鉴意义
VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi
浏览：98
3星 · 编辑精心推荐 vs2015.iso包安装，不然会卡在安装包丢失或损坏
CANoe通过CAPL脚本实现自动测试
浏览：182
现在汽车行业用vector的工具进行自动测试，但是该自动测试模板很少，本案例是分享CAPL脚本自动化测试的模板，和自动控制测试步骤的XML模板，使用过程可以通过本人分享的文档来实现工程的建立到自动测试的完成。通过CAPL脚本+XML控制测试步骤，实现自动测试，生成测试报告。
蓝牙BLE协议中文版.pdf
浏览：19
蓝牙BLE协议中文版，帮助初学者更快掌握协议内容。协议为SIG官方协议的中文版，所有协议内容均与英文原版协议内容保持一致
BaiduOCR.zip
浏览：88
5星 · 资源好评率100% 按键精灵百度文字识别 自定义库 使用说明参考：https://blog.csdn.net/sinat_22215253/article/details/118272746
nuxt 服务器渲染动态设置服务器渲染动态设置 title和和seo关键字的操作关键字的操作
使用如下钩子即可，但是前提条件是 没有默认配置head的title
asyncData ({ app }, callback) {
app.head.title = ‘new title'
callback(null, {})
},
补充知识：补充知识：vue 每个页面动态切换每个页面动态切换title keywords description （（seo的设置）的设置）
最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description
！！！在这里先添加一步：
html文件添加文件添加
<meta data-n-head=”1″ data-hid=”description” name=”description” content=””>
<meta data-n-head=”1″ data-hid=”keywords” name=”keywords” content=””>
第一步第一步 在在router里面里面index.js文件夹中文件夹中
routes: [
{
path: '/',
name: 'main',
component: Main,
meta: {
title: '首页title内容',
content:{
keywords:'这里是第一个keywords',
description:'这里是第一个description',
},
}
},
{
path: '/trueBag',
name: 'trueBag',
component: trueBag,
meta: {
title: 'trueBag页面的title内容',
content:{
keywords:'这里是第二个keywords',
description:'这里是第二个description',
},
}
},
]
第二步第二步 在在main.js里面设置，路由发生变化修改页面里面设置，路由发生变化修改页面meta
前提是已经导入了router
// 现在可以直接复制，不需要改什么东西
// 当然如果你想添加的meta,不仅仅只有keywords 和 description的时候，
// 自己可以举一反三 :
// setAttribute 后面就是设置它的值前提是要和router里面的content是相对应的
//要不然是获取不到的
//document.querySelector(‘meta[name=“description”]').setAttribute(‘content', to.meta.content.description)
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面meta */
console.log(to.meta.content)
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
meta.content = to.meta.content;
head[0].appendChild(meta)
}
// /* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
本内容试读结束， 登录后可阅读更多
下载后可阅读完整内容，剩余1页未读， 立即下载
weixin_38568031
- 粉丝: 5
- 资源: 895
我的内容管理
展开
前往需求广场，查看用户热搜最新资源
- seg_16
- Screenshot_20240426_141524.jpg
- Screenshot_20240426_165620.jpg
- 数据科学与机器学习：混淆矩阵深度解析-精准评估分类模型性能的必备工具
- 重庆市下属38个区县geojson 用于ECharts大屏
- 互联网技术+深入剖析：搜索引擎的工作原理、优化技巧与提升使用体验之道.md
- npcap-1.79.exe
- 辨析题 老区(2).pptx
- AWSAWSAWSAWSAWS
- sentinel服务器软件
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页