vue设置TDK及语义化

已于 2022-07-13 22:32:01 修改
阅读量967 收藏 2
点赞数
分类专栏： 基础 前端 h5 文章标签： vue.js 经验分享 移动端 前端
于 2022-07-13 21:09:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c62387723sq/article/details/125772669
版权
基础 同时被 3 个专栏收录
69 篇文章 1 订阅
订阅专栏
前端
68 篇文章 1 订阅
订阅专栏
h5
22 篇文章 1 订阅
订阅专栏

TDK

vue和react都可以设置TDK（用于seo）

TDK是什么
TDK就是网站的标题（title）、描述（description）和关键词（keyword）

TDK在哪里
打开F12我们就可以看到
在这里插入图片描述

Vue设置TDK：
设置
在这里插入图片描述
效果
在这里插入图片描述

Vue中动态设置TDK

  1. 修改index.html
  2. 来到路由配置中添加meta属性
  3. 找到Vue项目中的导航守卫（根据自己项目中导航守卫设置的位置）

https://blog.csdn.net/JHXL_/article/details/118332895

语义话标签：

语义化标签有什么优势?
1、 方便页面布局
2、 便于特殊化设备读取（有利于一些特殊设备的解析，比如盲人阅读器会完全根据你的标签来“读”你的网页）
3、 利于SEO优化

常见的语义化标签
header，nav，article，aside，section，footer

https://www.itcast.cn/news/20210924/15142219121.shtml

差不少
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中如何设置动态的TDK(1)，前端岗大厂面试官常问的那些问题
2401_84139728的博客
04-18 395
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
Vue项目中如何设置动态的TDK
热门推荐
官方推荐
06-29 3万+
TDK是什么 TDK就是网站的标题（title）、描述（description）和关键词（keyword） TDK在哪里 上面大佬对TDK的概念解释的很全面，但是在网页中的TDK在哪里呢，作为开发人员打开F12我们就可以看到 可以看到T就是我们页签中的标题，而description和keyword也是可以存在的但是并没有给用户直接展示的形式 设置网站TDK 在html中我们可以如下设置我们的网站TDK 设置后效果如下 Vue中动态设置TDK 1. 修改index.html 将TDK的内容清空，然后
vue3【实战】语义化首页布局
最新发布
朝阳39的博客
07-05 504
* 绝对定位撑满全屏（避开的浏览器默认样式 html 和 body 存在 margin 和 pandding 的影响）*//* flex-grow: 1;时，需设置 width,其值的效果为最小宽度（否则随文字内容的增加，会挤压左右两侧）*//* 最小宽度为左右侧栏的宽度+文章的最小宽度*//* 对页面内的元素使用flex布局*//* 垂直方向使用flex布局*//* 主体内容-垂直方向撑满*//* 文章-水平方向撑满*/
Vue设置单页面tdk，使用vue-meta-info设置meta
Mitin_的博客
04-05 1226
vue-meta-info并不是直接改变页面的meta信息，而是在下面追加一条覆盖上面的，如上图会在最后面追加keywords和description。这个时候无法直接在 index中设置，可以使用vue-meta-info插件，使用与vue2，如果是vue3可以使用vue-meta。需求：用户需要每个页面对应的title，keywords，description都是不同的，随着页面内容的标题和描述变化。打开终端，安装vue-meta-info。
vue TDK seo便于搜索引擎爬虫搜索，网站优化排名
weixin_42762167的博客
09-10 1224
最近在做一个商城官网，需要优化网站排名，公司要求做seo，项目架构用的vue SSR服务端渲染，由于vue是但页面应用，所以主要通过对路由的跳转动态切换title和meta里的内容来实现。 项目搭建就不多说了，主要是在gitHub上面下载的一个模版，后期会整理好再发一篇文章。 一、首先router.js给每个页面组件加上meta属性，然后meta属性里边定义一个title和index(因为tdk数...
Vue大屏可视化案例资源
05-29
在“Vue大屏可视化案例资源”中，我们可以深入学习如何利用Vue.js进行大屏数据可视化的开发，这对于那些希望提升Vue技能并对此领域感兴趣的人来说是一份宝贵的资料。 在大屏可视化领域，主要目标是将复杂的数据以...
vue大屏可视化demo
01-25
vue大屏可视化demo 使用方法： # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
vue-multipage vue 模块化开发打包
11-23
在实际使用Vue-multipage 开发时，你需要先安装相关依赖，然后配置Webpack 配置文件（如webpack.config.js），设置多页面入口、输出目录、公共模块等。同时，创建对应的页面组件和路由配置。在完成开发后，运行构建...
vue+vuex实现可视化图形编辑器
05-13
“vue+vuex实现可视化图形编辑器”这个项目的核心在于，它允许用户通过图形界面交互来创建、编辑和操作图形。这通常涉及到以下几个关键知识点： 1. **Vue.js基础**：Vue.js提供了一套声明式的数据绑定和组件系统，...
vue初始化模板vue初始化模板
08-08
vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue...
vue与vue-router搭配设置TDK
追梦&天空的博客
11-24 1800
vue与vue-router搭配设置TDK 参考链接：使用Vue.js和vue-router更新页面标题和元数据 目录 vue与vue-router搭配设置TDK TDK配置meta.js 路由配置index.js 设置main.js 启动应用程序 文档结构： |- src |-- components |--- index.vue |--- about.vue |-- ...
seo vue 动态路由_基于vue.js&vue-router的动态更新TDK（SEO优化）
weixin_36376879的博客
12-23 308
本文基于工作项目开发，做的整理笔记前几天帮朋友解决这个问题，顺带学习了一下，做个笔记Mark下。前提条件：你已经了解并使用vue，能够搭建应用站点。编码环境：system：OS X EI Capitan 10.13.3npm：5.5.1node：v8.9.3vue-cli：@lastest相关技术栈：vue2 + vue-router基于vue.js&vue-router的动态更新TDK...
1.5后台修改添加TDK
dianlei9877的博客
08-04 211
manager\includes\languages\english.php //注意 是后台的语言包define('BOX_CONFIGURATION_Lin_STORE', 'TDKcss_setup'); ----------------- admin_pages，configuration_group，configuration------------------------...
vue 动态tdk
攻防人生3722的博客
01-09 1437
使用vue2.0的插件MetaInfo。 安装插件 cnpm install vue-meta-info --save 全局引入，在main.js import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)   在vue文件里使用，要在index.html 去除tdk的书写。 metaInfo: { title: ...
vue单页应用实现优化seo区分tdk
u010289111的专栏
02-12 3930
由于做的活动有tdk的需求，而且并不只有一个页面，所以就需要区分不同路由的tdk检索了很多方式开始尝试了一种智能实现title的替换，插件名字我忘记了，最后没有用他我现在使用的是 vue-meta-info但是查阅了资料以后好像更优的话还需要其他设置，但是现在基本满足需求了~~而且我原来修改以后发现都配置完了以后居然只有什么都是undfine，所以很懵逼参考地址：https://www.npmjs...
浅谈web语义化
LiuJin1012的博客
09-04 583
1.web语义化是什么 HTML5标准出来的时候，我曾经诧异为什么要定义这么多header footer nav article标准，DIV不挻好的嘛，方便开发人员记忆啊。但当页面开发完，面对所有都是DIV标签的网页，就会混乱了，到底哪里是页头，哪里是正文。当然我们可以用浏览器打开，F12一下，就一目了然了，但如果是网络爬虫，那就没这么容易识别到这个东西了。 引
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 544
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
使用vue使用插件MetaInfo实现动态TDK（title，Keywords，description）
qq_42661587的博客
11-09 1666
先看效果图： 一、安装：npm i vue-meta-info --save 二、在main.js中引入vue-meta-info importVue from'vue' importMetaInfo from'vue-meta-info'; Vue.use(MetaInfo) 三、在vue文件中可以配置tdk metaInfo:{ title:'', meta:[{ name:'Keywords', content...
vue保存自动格式化设置在哪
09-02
在Vue项目中，可以通过配置文件或者编辑器插件来保存自动格式化设置。 1. 配置文件：Vue项目根目录下的`.prettierrc.js`文件或者`.prettierrc`文件中保存了项目的自动格式化设置。可以通过在这个配置文件中定义相关的选项来设置代码的格式化规则，比如缩进方式、换行符、单引号还是双引号等等。在修改完成后，保存这个配置文件即可。 2. 编辑器插件：大多数代码编辑器都有支持Vue的插件，比如VSCode的Prettier插件。安装并启用相关插件后，可以在编辑器的设置中找到对应的设置项。在插件的设置页面中，可以定义代码的格式化规则和预览，通过修改相关选项来保存自动格式化的设置。在Plugin的设置中修改完成后，编辑器会根据设置的规则自动格式化每次保存的代码。 无论是使用配置文件还是编辑器插件，都需要根据个人的喜好和项目要求来设置自动格式化的规则。可以灵活运用上述两种方式，根据实际需求保存自己所需的自动格式化设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值