VuePress 博客之 SEO 优化（五）添加 JSON-LD 数据

前言

在 《一篇带你用 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 搜索中心提供的