vue设置TDK及语义化

差不少

已于 2022-07-13 22:32:01 修改

阅读量919

点赞数

分类专栏：基础前端 h5 文章标签： vue.js 经验分享移动端前端

于 2022-07-13 21:09:36 首次发布

本文链接： https://blog.csdn.net/c62387723sq/article/details/125772669

版权

基础同时被 3 个专栏收录

69 篇文章 1 订阅

订阅专栏

前端

68 篇文章 1 订阅

订阅专栏

22 篇文章 1 订阅

订阅专栏

TDK

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

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

TDK在哪里
打开F12我们就可以看到

Vue设置TDK：
设置

效果

Vue中动态设置TDK

修改index.html
来到路由配置中添加meta属性
找到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及语义化

vue和react都可以设置tdk（用于seo）TDK是什么TDK就是网站的标题（title）、描述（description）和关键词（keyword）TDK在哪里打开F12我们就可以看到vue设置tdk：https://blog.csdn.net/JHXL_/article/details/118332895语义话标签：https://www.itcast.cn/news/20210924/15142219121.shtml............
复制链接

扫一扫

专栏目录

Vue项目中如何设置动态的TDK，web前端开发基础

m0_63174811的博客

03-20

369

description: ‘描述内容描述内容描述内容描述内容描述内容描述内容描述内容’根据自己项目中导航守卫设置的位置，此处为了方便我就直接设置在了route.js中了。(img-hbJ6QIuT-1710898364579)]// 路由发生变化改变description和keyword。keywords: ‘关键字1，关键字2’,title: ‘首页’,

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 and view the bundle analyzer report npm run build --report

参与评论您还未登录，请先登录后发表或查看评论

Vue项目中设置背景图片方法

08-28

下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

2024年前端最新Vue项目中如何设置动态的TDK(2)，一线大厂前端面试题 4天训练营

最新发布

2401_84413092的博客

05-13

557

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。项目里用到了react，为什么要选择react，react有哪些好处。有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react和Vue的原理，区别，亮点，作用。

vue初始化模板vue初始化模板

08-08

vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初

Vue大屏可视化案例资源

05-29

Vue大屏可视化相关案例，适合掌握Vue技能并对可视化有兴趣的人群。

vue-multipage vue 模块化开发打包

11-23

vue-multipage vue 模块化开发打包

web前端面试题附答案008-你项目中的TDK是怎么赋值的？（这道题很容易暴露项目经验）

xingyu_qie的专栏

10-01

770

除了知道TDK是什么意思，你还要知道项目中的属性值都是怎么加上去的，这道题特别容易暴露项目经验，不管你原理题答的怎么样，这道题一定要会，项目经验啊这可是

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的内容清空，然后

网站TDK

qq_37004501的博客

08-28

166

设置，"T"代表页头中的title元素，"D"代表页头中的description元素，"K"代表页头中的。部署代码后，在钉钉中聊天界面输入网址发送，会将网址自动美化，以卡片形式展示，如下图。如何添加，在html页面头部添加如下代码。

Vue设置单页面tdk，使用vue-meta-info设置meta

Mitin_的博客

04-05

1110

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

1178

最近在做一个商城官网，需要优化网站排名，公司要求做seo，项目架构用的vue SSR服务端渲染，由于vue是但页面应用，所以主要通过对路由的跳转动态切换title和meta里的内容来实现。项目搭建就不多说了，主要是在gitHub上面下载的一个模版，后期会整理好再发一篇文章。一、首先router.js给每个页面组件加上meta属性，然后meta属性里边定义一个title和index(因为tdk数...

vue cli3 修改生成index.html文件的默认title

追梦小狂魔的博客

04-02

2019

vue.config.js文件在 module.exports 中加入 pages: { index: { entry: 'src/main.js', title: 'xxx' // 放要改的title名 } }

vue 每一个页面设置网页标题描述和关键词(SEO设置)

weixin_62770871的博客

08-17

859

vue+router 设置seo标题关键词和描述

vue 同一个域名移动端pc端两套代码跳转_移动端网站进行百度SEO优化的问题要点...

weixin_39968820的博客

11-22

547

随着移动互联网的快速发展，移动端的网站也纷纷融入人们的生活，而某些网站在pc端上某个关键词或许有排名，但是在移动端上就不见得有优先排名的展现，但是以现在移动端的发展速度，移动端的流量入口已经远远超越PC端的流量入口了，那么，摆在我们眼前的问题就是移动端进行SEO优化的问题。目前，在移动手机用户群体中，百度依然占据搜索的龙头位置不可动摇，除了少数的大站和权威站，大多数的中小网站都是依靠搜索...

vue SEO的解决方案

司马懿的西山居

02-15

9578

介绍什么是 SEO SEO（Search Engine Optimization）搜索引擎优化，是指通过对网站进行站内优化和修复（网站Web结构调整、网站内容建设、网站代码优化和编码等）和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。搜索引擎的原理搜索引擎，又称爬虫或者蜘蛛，它在爬取和分析页面内容时，主要进行如下操作：从 meta 标签中读取 keywords、description 的内容根据语义化的html标签爬取和分析内容（h1-h6、strong、em等标签具有不同程度的强调意

Vue3 项目修改index.html的 title

northcastle的博客

11-20

1449

vue3 项目中修改index.html 中的 title

2024年前端最新ERROR Error [copy-webpack-plugin] patterns must be an array，html注释标签

2401_84435059的博客

05-06

320

/ 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到。项目里用到了react，为什么要选择react，react有哪些好处。有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react生命周期函数和react组件的生命周期。react和Vue的原理，区别，亮点，作用。react的组件是通过什么去判断是否刷新的。React的jsx，函数式编程。react高阶组件知道吗？reactJs的组件交流。react的生命周期函数。选择react的原因。

vue保存自动格式化设置在哪

09-02

在Vue项目中，可以通过配置文件或者编辑器插件来保存自动格式化设置。 1. 配置文件：Vue项目根目录下的`.prettierrc.js`文件或者`.prettierrc`文件中保存了项目的自动格式化设置。可以通过在这个配置文件中定义相关的选项来设置代码的格式化规则，比如缩进方式、换行符、单引号还是双引号等等。在修改完成后，保存这个配置文件即可。 2. 编辑器插件：大多数代码编辑器都有支持Vue的插件，比如VSCode的Prettier插件。安装并启用相关插件后，可以在编辑器的设置中找到对应的设置项。在插件的设置页面中，可以定义代码的格式化规则和预览，通过修改相关选项来保存自动格式化的设置。在Plugin的设置中修改完成后，编辑器会根据设置的规则自动格式化每次保存的代码。无论是使用配置文件还是编辑器插件，都需要根据个人的喜好和项目要求来设置自动格式化的规则。可以灵活运用上述两种方式，根据实际需求保存自己所需的自动格式化设置。