為VitePress部落格文章加入結構化資料

發現文章日期在搜尋引擎結果顯示不正確，該如何修正？

某天自搜時發現許多篇文章在搜尋結果顯示的日期全部都是2012年的某日......但我2018年才開始寫的呢，顯然搜尋引擎無法順利辨識發文日期，更別說最後更新的時間。

為什麼要在網頁中加入結構化資料？

添加結構化資料可增加搜尋結果對使用者的吸引力，也可能鼓勵使用者更常與您的網站互動 (這稱為複合式搜尋結果)。以下提供了一些個案研究，說明網站實際採用結構化資料後的效益^[1]：
爛番茄將結構化資料新增至 100,000 個不重複網頁，發現相較於不含結構化資料的網頁，透過結構化資料強化的網頁在點閱率上高出 25%。
Food Network 將 80% 的網頁轉換為啟用搜尋功能，發現造訪次數提升 35%。
樂天發現，相較於不含結構化資料的網頁，採用結構化資料的網頁在使用者的網頁停留時間方面增加 1.5 倍；而在互動率方面，啟用搜尋功能的 AMP 網頁也比不含搜尋功能的 AMP 網頁高出 3.6 倍。
雀巢發現以複合式搜尋結果形式顯示的網頁，其點閱率比未啟用複合式搜尋結果的網頁高出 82%。

取得VitePress頁面的最後更新日期

要修正文章日期，首先得取得Last Updated^[2]這個值，才能寫入結構化資料。參考VitePress原始碼的VPDocFooterLastUpdated.vue元件^[3]讀取Last Updated的方式，由我的PostHeader.vue^[4]元件去控制，在進入文章頁面時動態寫入包含標題、發文時間和更新時間等資訊的JSON-LD結構化資料^[5]，然後在離開文章頁面時移除它。

範例

typescript

import { useData } from 'vitepress'
import { onMounted, onBeforeUnmount } from 'vue'
const { page, frontmatter } = useData()

let script: HTMLScriptElement

onMounted(() => {
  const lastUpdated = new Date(<number> page.value.lastUpdated).toISOString()
  const dataJsonLD = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": frontmatter.value.title,
    "datePublished": frontmatter.value.date,
    "dateModified": lastUpdated,
  }

  script = document.createElement('script')
  script.setAttribute('type', 'application/ld+json')
  script.textContent = JSON.stringify(dataJsonLD)
  document.head.appendChild(script)
})

onBeforeUnmount(() => {
  if (script && script.parentElement) {
    script.parentElement.removeChild(script)
  }
})

為什麼要在網頁中加入結構化資料？ ​

取得VitePress頁面的最後更新日期 ​

範例 ​

Ref. ​

為什麼要在網頁中加入結構化資料？

取得VitePress頁面的最後更新日期

範例

Ref.