為個人網站實作 JSON-LD

為個人網站實作 JSON-LD

JSON-LD (JSON Linked Data) 是一種標準化的格式，用於在網頁中加入結構化數據，讓網路爬蟲和 AI 引擎能夠理解網站的語義結構。實作 JSON-LD 可以帶來更豐富的連結預覽、提升搜尋排名，以及提高 LLM 爬蟲引用的準確性。

JSON-LD 基礎知識

JSON-LD 是透過在 HTML 文件的 <head> 部分加入一個 MIME 類型為 application/ld+json 的 <script> 標籤來實作的。這能確保瀏覽器的 JavaScript 引擎忽略該內容，同時讓 Googlebot 等專業爬蟲進行解析。

JSON-LD 文件的核心組成部分

  • @context: 定義所使用的詞彙表。大多數網路爬蟲都以 Schema.org 為標準。
  • @graph: 一個標記過的有向圖，包含由弧連接的多個節點。
  • Nodes: 圖中的個別實體，由以下內容定義：
    • @type: 節點的類別 (例如，WebSite, Person)。
    • @id: 一個唯一的識別碼，通常是帶有 hash 的 URL (例如， https://example.com/#website)，這能讓爬蟲在不同頁面之間合併相同實體的屬性。
    • Properties: 描述節點屬性的鍵值對。

個人網站必備的節點

為了極大化 SEO 和可發現性，個人網站應實作一組特定的 Schema.org 節點。

WebSite 與 WebPage

WebSite 節點提供關於整個網域的高層級元數據 (metadata)，例如網站名稱和描述。雖然根目錄頁面應包含完整的 WebSite 節點，但後續頁面可以使用精簡版本，為單頁爬蟲提供足夠的上下文。

WebPage 描述的是實體的 HTML 頁面及其內容。它是一個通用節點，可以進一步細分為子類型，例如 ProfilePage (用於「關於我」頁面) 或 CollectionPage (用於部落格索引或個人檔案列表)。

Person

Person 節點對於內容品質指標和 LLM 引用至關重要。它應該包含在個人網站的每個頁面上，以建立一致的身分識別。關鍵屬性包括：

  • url: 錨定身分的根目錄頁面。
  • name, givenName, familyName: 對個人的清晰識別。
  • sameAs: 其他專業檔案的 URL 列表 (GitHub, LinkedIn, 等)，這有助於爬蟲建立知識圖譜並區分名稱相同的個人。
  • image: 與該個人相關的標準照片或標誌。

SoftwareApplication

對於展示專案的開發者，SoftwareApplication 節點 (或其子類型如 MobileApplication 或 WebApplication) 提供有關軟體的元數據。建議針對免費且開源的軟體 (FOSS) 加入 offers 屬性並將價格設為 0，以確保元數據的完整性。

內容組織與導覽

BreadcrumbList

BreadcrumbList 允許網站擁有者控制搜尋引擎如何在搜尋結果中呈現頁面層級。這對於將長 URL 路徑縮短為可讀格式 (例如，Home > Blog > Post Title) 特別有用。

Blog 與 BlogPosting

對於擁有技術部落格的網站，會使用兩層結構：

  1. Blog: 此節點放置在部落格索引頁面，作為 WebSite 與個別文章之間的橋樑。它可以包含 license 屬性 (例如， Creative Commons) 以告知爬蟲使用權利。
  2. BlogPosting: 此節點應用於個別文章。它應包含 headline, datePublished, dateModified, 以及 author (指向回 Person 節點)。image 屬性應與用於社群連結預覽的 Open Graph (OG) 圖片一致。

實作摘要表

節點類型 建議放置位置 主要目的
WebSite 所有頁面 (根目錄使用完整版) 網域層級的元數據與網站命名
Person 所有頁面 身分識別、權威性與 LLM 引用
WebPage 所有頁面 描述特定的 HTML 文件
BreadcrumbList 所有非根目錄頁面 搜尋引擎路徑呈現
Blog 部落格索引頁面 部落格文章的聚合器
BlogPosting 個別部落格文章 文章特定的元數據與豐富摘要 (rich snippets)

Sources