前言
在 《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。
本篇讲 SEO 中的 JSON-LD。
JSON-LD
如果我们打开掘金任意一篇文章,比如这篇《VuePress 博客优化之增加 Vssue 评论功能》,查看 DOM 元素,我们可以在 head 中找到这样一段 script 标签:
在思否等其他平台也是可以看到的:
那这个 type 为 application/ld+json
的 script,到底是什么意思呢? 又是什么作用呢?
这就是我们今天要介绍的 JSON-LD,英文全程:JavaScript Object Notation for Linked Data,官方地址:https://json-ld.org/,简单的来说,就是用来描述网页的类型和内容,方便搜索引擎做展现。
比如如果我们在 Google 搜索 「Chocolate in a mug」,我们会看到这样的搜索结果:
我们打开页面,就可以看到搜索展示的内容对应了 application/ld+json
中的内容:
添加 JSON-LD
如果我们也要实现这样的效果,方便搜索引擎展现,该怎么做呢?
在页面加入结构化数据的方法很简单,只用在页面添加这样一段脚本就可以了:
<script type="application/ld+json">
// ...
</script>
具体里面的内容需要参考比如 Google 搜索中心提供的《结