前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。本文讨论SEO中的JSON-LD。JSON-LD如果我们打开任意掘金文章，比如这篇《VuePress 博客优化之增加 Vssue 评论功能》，查看DOM元素，可以在head中发现这样一个script标签：在其他平台如四福也可以看到：那么这个类型是什么application/ld+json的脚本是什么意思？它的功能是什么？这就是我们今天要介绍的JSON-LD，全英文：JavaScriptObjectNotationforLinkedData，官方地址：https://json-ld.org/，简单来说就是用来描述类型以及网页内容，方便搜索引擎展示。比如我们在Google中搜索“杯子里的巧克力”，我们会看到这样的搜索结果：我们打开页面，可以看到搜索中显示的内容对应于application/ld+json中的内容：如果我们也想达到这样的效果，加上JSON-LD，方便搜索引擎展示。我们应该怎么做？在页面中添加结构化数据的方法很简单，只需要在页面中添加这样一段脚本即可：具体内容请参考例如Google搜索中心提供的《结构化数据常规指南》，因为我写了一篇具体的文章，所以在参考了文章章节后，我决定写如下属性：VuePress实现找了找也没找到现成的插件，因为每个页面的标题，发布时间，更新时间都不一样，就这样吧，那就写个本地插件吧-in自己实现其实要实现的内容很简单，就是在编译的时候在head中写一个script脚本。脚本的内容取决于页面的属性，但毕竟我用的是vuepress1，要看这个工具提供了哪些API来实现，我们直接看最终的实现方式：vuepress-plugin-jsonld创建一个vuepress-plugin-jsonld文件夹在.vuepress目录下，然后执行npminit，创建package.json并创建index.js，代码写法：const{path}=require('@vuepress/shared-utils')module.exports=options=>({name:'vuepress-plugin-jsonld',enhanceAppFiles(){return[path.resolve(__dirname,'enhanceAppFile.js')]},globalUIComponents:['JSONLD']})创建enhanceAppFile.js并写入代码：importJSONLDfrom'./JSONLD.vue'exportdefault({Vue,options})=>{Vue.component('JSONLD',JSONLD)}创建JSONLD.vue，代码写成：`;}}};here所以由于globalUIComponents的帮助，可以将脚本内容注入所有页面：您可能希望注入一些全局UI并将其固定在页面的某个位置，例如返回顶部、弹出窗口在VuePress中，全局UI是一个Vue组件。config.js接下来我们修改config.js：module.exports={title:'title',description:'description',plugins:[require('./vuepress-plugin-jsonld')]}注意我们是在本地运行我们可以关闭deploy.sh推送到远程的命令，然后在本地编译，查看输出的HTML：验证发布到网上后，我们可以在谷歌提供的富媒体搜索测试中验证，打开网址，输入页面地址，可以看到抓取的结构化数据：如果有错误，也会在这里显示警告。系列文章博客搭建系列是我目前为止写的唯一实用系列教程。预计20篇左右，讲解如何使用VuePress搭建和优化博客，并部署到GitHub、Gitee、私服等平台。本文为第31篇，全系列文章地址：https://github.com/mqyqingfen...微信：“mqyqingfeng”，进入世优读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
