前言

在 《一篇带你用 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 搜寻核心提供的《结构化数据惯例指南》，因为我写的是具体的文章，所以参考 Article 章节后，我决定写入以下这些属性：

<script type="application/ld+json">     {      "@context": "https://schema.org",      "@type": "Article",      "headline": "这里填写题目",      "image": [        "https://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": "https://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": "https://schema.org",            "@type": "Article",            "headline": "${this.$page.title}",            "url": "${'https://yayujs.com' + this.$page.path}",            "image": [              "https://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": "https://github.com/mqyqingfeng/Blog"            }]          }      <\/script>`;    }  }};</script>

这里之所以可能给所有的页面都注入脚本内容，是因为借助了 globalUIComponents：

你可能想注入某些全局的 UI，并固定在页面中的某处，如 back-to-top, popup。在 VuePress 中，一个全局 UI 就是一个 Vue 组件。

config.js

接下来咱们批改 config.js：

module.exports = {    title: 'title',    description: 'description',       plugins: [      require('./vuepress-plugin-jsonld')    ]}

留神咱们在本地运行的时候并不能看到，咱们能够敞开 deploy.sh 推送到近程的命令，而后本地编译一下，查一下输入的 HTML：

验证

公布到线上后，咱们能够在 Google 提供的富媒体搜寻测试中进行验证，关上网址，输出页面地址，就能够看到抓取的结构化数据：

如果有谬误，这里也会展现正告。

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，预计 20 篇左右，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 31 篇，全系列文章地址：https://github.com/mqyqingfen...

微信：「mqyqingfeng」，进冴羽的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。