VuePress博客SEO优化第五步：如何添加JSON-LD数据？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1654个文字，预计阅读时间需要7分钟。
前言 在《一篇带你用VuePress+Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript 中文文档。本篇讲SEO中的JSON-LD。JSON-LD 如果我们打开掘金任意一篇文章，可以看到这样的结构：
json{ @context: https://schema.org, @type: Article, mainEntityOfPage: { @type: WebPage, @id: https://juejin.cn/post/6955175884355364375 }, headline: VuePress + Vite + Element Plus 打造全栈博客, image: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b0a6f6a6f6a4a0a9c393e5b8f6a6f1a~tplv-k3u1fbpfcp-zoom-1.image, author: { @type: Person, name: 前端小智 }, datePublished: 2021-06-01T10:00:00+08:00, dateModified: 2021-06-01T10:00:00+08:00, description: VuePress + Vite + Element Plus 打造全栈博客}
这段代码就是JSON-LD，它可以帮助搜索引擎更好地理解网页内容，从而提高搜索引擎排名。如果我们打开掘金任意一篇文章，可以看到这样的结构：
json{ @context: https://schema.org, @type: Article, mainEntityOfPage: { @type: WebPage, @id: https://juejin.cn/post/6955175884355364375 }, headline: VuePress + Vite + Element Plus 打造全栈博客, image: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b0a6f6a6f6a4a0a9c393e5b8f6a6f1a~tplv-k3u1fbpfcp-zoom-1.image, author: { @type: Person, name: 前端小智 }, datePublished: 2021-06-01T10:00:00+08:00, dateModified: 2021-06-01T10:00:00+08:00, description: VuePress + Vite + Element Plus 打造全栈博客}
这段代码就是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，官方地址：json-ld.org/，简单的来说，就是用来描述网页的类型和内容，方便搜索引擎做展现。
比如如果我们在 Google 搜索 「Chocolate in a mug」，我们会看到这样的搜索结果：
我们打开页面，就可以看到搜索展示的内容对应了 application/ld+json 中的内容：
如果我们也要实现这样的效果，方便搜索引擎展现，该怎么做呢？
在页面加入结构化数据的方法很简单，只用在页面添加这样一段脚本就可以了：
<script type="application/ld+json">
// ...
</script>
具体里面的内容需要参考比如 Google 搜索中心提供的《结构化数据常规指南》，因为我写的是具体的文章，所以参考 Article 章节后，我决定写入以下这些属性：
<script type="application/ld+json">
{
"@context": "schema.org",
"@type": "Article",
"headline": "这里填写标题",
"image": [
"ts.yayujs.com/icon-144x144.png"
],
"datePublished": "2021-11-10T22:06:06.000Z",
"dateModified": "2022-03-04T16:00:00.000Z",
"author": [{
"@type": "Person",
"name": "冴羽",
"url": "github.com/mqyqingfeng/Blog"
}]
}
</script>
VuePress 实现
经过搜索，我并没有发现现成的插件，由于每个页面的标题、发布时间、更新时间都不同，那成吧，那就自己写个本地插件实现吧。
其实要实现的内容很简单，就是在编译的时候在 head 中写入一个 script 脚本，脚本的内容根据页面的属性而定，但毕竟我用的是 vuepress 1.x，实现方式受制于工具，完全看工具提供了什么 API 来实现，我们直接看最终的实现方式：
vuepress-plugin-jsonld在 .vuepress 目录下建立 vuepress-plugin-jsonld 文件夹，然后执行 npm init ，创建 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，代码写入：
import JSONLD from './JSONLD.vue'
export default ({ Vue, options }) => {
Vue.component('JSONLD', JSONLD)
}
创建 JSONLD.vue，代码写入：
<template></template>
<script>
export default {
created() {
if (typeof this.$ssrContext !== "undefined") {
this.$ssrContext.userHeadTags +=
`<script type='application/ld+json'>
{
"@context": "schema.org",
"@type": "Article",
"headline": "${this.$page.title}",
"url": "${'yayujs.com' + this.$page.path}",
"image": [
"ts.yayujs.com/icon-144x144.png"
],
"datePublished": "${this.$page.frontmatter.date && (new Date(this.$page.frontmatter.date)).toISOString()}",
"dateModified": "${this.$page.lastUpdated && (new Date(this.$page.lastUpdated)).toISOString()}",
"author": [{
"@type": "Person",
"name": "冴羽",
"url": "github.com/mqyqingfeng/Blog"
}]
}
<\/script>`;
}
}
};
</script>
这里之所以能够给所有的页面都注入脚本内容，是因为借助了 globalUIComponents：
config.js你可能想注入某些全局的 UI，并固定在页面中的某处，如 back-to-top, popup。在 VuePress 中，一个全局 UI 就是一个 Vue 组件。
接下来我们修改 config.js：
module.exports = {
title: 'title',
description: 'description',
plugins: [
require('./vuepress-plugin-jsonld')
]
}
注意我们在本地运行的时候并不能看到，我们可以关闭 deploy.sh 推送到远程的命令，然后本地编译一下，查一下输出的 HTML：
验证发布到线上后，我们可以在 Google 提供的富媒体搜索测试中进行验证，打开网址，输入页面地址，就可以看到抓取的结构化数据：
如果有错误，这里也会展示警告。
系列文章博客搭建系列是我至今写的唯一一个偏实战的系列教程，预计 20 篇左右，讲解如何使用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 31 篇，全系列文章地址：github.com/mqyqingfeng/Blog
微信：「mqyqingfeng」，进冴羽的读者群。
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。
本文共计1654个文字，预计阅读时间需要7分钟。
前言 在《一篇带你用VuePress+Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript 中文文档。本篇讲SEO中的JSON-LD。JSON-LD 如果我们打开掘金任意一篇文章，可以看到这样的结构：
json{ @context: https://schema.org, @type: Article, mainEntityOfPage: { @type: WebPage, @id: https://juejin.cn/post/6955175884355364375 }, headline: VuePress + Vite + Element Plus 打造全栈博客, image: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b0a6f6a6f6a4a0a9c393e5b8f6a6f1a~tplv-k3u1fbpfcp-zoom-1.image, author: { @type: Person, name: 前端小智 }, datePublished: 2021-06-01T10:00:00+08:00, dateModified: 2021-06-01T10:00:00+08:00, description: VuePress + Vite + Element Plus 打造全栈博客}
这段代码就是JSON-LD，它可以帮助搜索引擎更好地理解网页内容，从而提高搜索引擎排名。如果我们打开掘金任意一篇文章，可以看到这样的结构：
json{ @context: https://schema.org, @type: Article, mainEntityOfPage: { @type: WebPage, @id: https://juejin.cn/post/6955175884355364375 }, headline: VuePress + Vite + Element Plus 打造全栈博客, image: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b0a6f6a6f6a4a0a9c393e5b8f6a6f1a~tplv-k3u1fbpfcp-zoom-1.image, author: { @type: Person, name: 前端小智 }, datePublished: 2021-06-01T10:00:00+08:00, dateModified: 2021-06-01T10:00:00+08:00, description: VuePress + Vite + Element Plus 打造全栈博客}
这段代码就是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，官方地址：json-ld.org/，简单的来说，就是用来描述网页的类型和内容，方便搜索引擎做展现。
比如如果我们在 Google 搜索 「Chocolate in a mug」，我们会看到这样的搜索结果：
我们打开页面，就可以看到搜索展示的内容对应了 application/ld+json 中的内容：
如果我们也要实现这样的效果，方便搜索引擎展现，该怎么做呢？
在页面加入结构化数据的方法很简单，只用在页面添加这样一段脚本就可以了：
<script type="application/ld+json">
// ...
</script>
具体里面的内容需要参考比如 Google 搜索中心提供的《结构化数据常规指南》，因为我写的是具体的文章，所以参考 Article 章节后，我决定写入以下这些属性：
<script type="application/ld+json">
{
"@context": "schema.org",
"@type": "Article",
"headline": "这里填写标题",
"image": [
"ts.yayujs.com/icon-144x144.png"
],
"datePublished": "2021-11-10T22:06:06.000Z",
"dateModified": "2022-03-04T16:00:00.000Z",
"author": [{
"@type": "Person",
"name": "冴羽",
"url": "github.com/mqyqingfeng/Blog"
}]
}
</script>
VuePress 实现
经过搜索，我并没有发现现成的插件，由于每个页面的标题、发布时间、更新时间都不同，那成吧，那就自己写个本地插件实现吧。
其实要实现的内容很简单，就是在编译的时候在 head 中写入一个 script 脚本，脚本的内容根据页面的属性而定，但毕竟我用的是 vuepress 1.x，实现方式受制于工具，完全看工具提供了什么 API 来实现，我们直接看最终的实现方式：
vuepress-plugin-jsonld在 .vuepress 目录下建立 vuepress-plugin-jsonld 文件夹，然后执行 npm init ，创建 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，代码写入：
import JSONLD from './JSONLD.vue'
export default ({ Vue, options }) => {
Vue.component('JSONLD', JSONLD)
}
创建 JSONLD.vue，代码写入：
<template></template>
<script>
export default {
created() {
if (typeof this.$ssrContext !== "undefined") {
this.$ssrContext.userHeadTags +=
`<script type='application/ld+json'>
{
"@context": "schema.org",
"@type": "Article",
"headline": "${this.$page.title}",
"url": "${'yayujs.com' + this.$page.path}",
"image": [
"ts.yayujs.com/icon-144x144.png"
],
"datePublished": "${this.$page.frontmatter.date && (new Date(this.$page.frontmatter.date)).toISOString()}",
"dateModified": "${this.$page.lastUpdated && (new Date(this.$page.lastUpdated)).toISOString()}",
"author": [{
"@type": "Person",
"name": "冴羽",
"url": "github.com/mqyqingfeng/Blog"
}]
}
<\/script>`;
}
}
};
</script>
这里之所以能够给所有的页面都注入脚本内容，是因为借助了 globalUIComponents：
config.js你可能想注入某些全局的 UI，并固定在页面中的某处，如 back-to-top, popup。在 VuePress 中，一个全局 UI 就是一个 Vue 组件。
接下来我们修改 config.js：
module.exports = {
title: 'title',
description: 'description',
plugins: [
require('./vuepress-plugin-jsonld')
]
}
注意我们在本地运行的时候并不能看到，我们可以关闭 deploy.sh 推送到远程的命令，然后本地编译一下，查一下输出的 HTML：
验证发布到线上后，我们可以在 Google 提供的富媒体搜索测试中进行验证，打开网址，输入页面地址，就可以看到抓取的结构化数据：
如果有错误，这里也会展示警告。
系列文章博客搭建系列是我至今写的唯一一个偏实战的系列教程，预计 20 篇左右，讲解如何使用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 31 篇，全系列文章地址：github.com/mqyqingfeng/Blog
微信：「mqyqingfeng」，进冴羽的读者群。
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。