VuePress 部落格之 SEO 優化（五）新增 JSON-LD 資料

冴羽發表於2022-03-21
Vue優化JSON

前言

在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

本篇講 SEO 中的 JSON-LD。

JSON-LD

如果我們開啟掘金任意一篇文章，比如這篇《VuePress 部落格優化之增加 Vssue 評論功能》，檢視 DOM 元素，我們可以在 head 中找到這樣一段 script 標籤：

image.png

在思否等其他平臺也是可以看到的：

image.png

那這個 type 為 application/ld+json 的 script，到底是什麼意思呢? 又是什麼作用呢？

這就是我們今天要介紹的 JSON-LD，英文全程：JavaScript Object Notation for Linked Data，官方地址：https://json-ld.org/，簡單的來說，就是用來描述網頁的型別和內容，方便搜尋引擎做展現。

比如如果我們在 Google 搜尋 「Chocolate in a mug」，我們會看到這樣的搜尋結果：

image.png

我們開啟頁面，就可以看到搜尋展示的內容對應了 application/ld+json 中的內容：

image.png

新增 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：

image.png

驗證

釋出到線上後，我們可以在 Google 提供的富媒體搜尋測試中進行驗證，開啟網址，輸入頁面地址，就可以看到抓取的結構化資料：

image.png

如果有錯誤，這裡也會展示警告。

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，預計 20 篇左右，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。本篇為第 31 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，進冴羽的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章