JSON-LD 結構化資料標記：完整實作指南

Q: JSON-LD 與 Microdata 有何差異？

JSON-LD 是獨立的 script 區塊，置於文件 head。Microdata 則直接在現有 HTML 元素加入 itemscope、itemtype 與 itemprop 屬性。Google 官方推薦 JSON-LD，因為它較易維護，HTML 結構變更不會影響結構化資料。

Q: JSON-LD 是否保證在 Google 顯示豐富結果？

不會。有效的 JSON-LD 讓頁面有資格顯示豐富結果，但不保證一定出現。Google 會依額外品質訊號與內容政策決定是否展示豐富功能。請使用豐富結果測試確認資格並檢查缺漏屬性。

Q: 一頁最多可有多少個 schema 區塊？

沒有硬性限制。典型文章頁可能包含 Article、FAQPage 與 BreadcrumbList 三個區塊，Google 會獨立處理。避免同一頁面重複相同類型，避免解析器混淆。

Q: JSON-LD script 標籤應放在哪裡？

放在文件的 中。這是推薦位置，確保 schema 在解析任何主體內容前可用。有些實作放在 body 結尾，Google 兩者皆支援，但放 head 被視為最佳實踐。

Q: 我可以在 Blazor 應用中動態產生 JSON-LD 嗎？

可以。在 Blazor Server 或 WASM 中，您可於 OnInitialized 或 OnInitializedAsync 建立 JSON-LD，並透過 MetadataComponent 以 MarkupString 呈現在 head。關鍵是確保 schema 在伺服器端或預渲染時產生，讓搜尋爬蟲在初次 HTTP 回應時即可見。

Q: 如果我的 JSON-LD 有語法錯誤會怎樣？

Google 會靜默忽略格式錯誤的區塊。您的頁面仍會被索引，但該 schema 類型將失去豐富結果資格。部署變更後，尤其修改序列化模型後，務必使用豐富結果測試驗證。

Q: 即使內容未變更，我是否仍應包含 dateModified？

應該。如果文章從未更新，請將 dateModified 設為與 datePublished 相同。缺少 dateModified 可能降低 Google 對新鮮度訊號的信心，部分豐富結果驗證工具會將其缺失標示為警告。

Q: 麵包屑豐富結果是否必須使用 BreadcrumbList schema？

麵包屑豐富結果可由 BreadcrumbList schema 或 Google 自動解析的 HTML 麵包屑標記產生。明確使用 BreadcrumbList schema 可完全控制每層的標籤與 URL，比自動擷取更可靠。

什麼是 JSON-LD 及其對 SEO 的重要性

JSON-LD（連結資料的 JavaScript 物件表示法）是以 JSON 格式編碼結構化資料的方法。Google 等搜尋引擎透過此資料理解內容意義，而非僅依關鍵字。

當 Google 能解析您的結構化資料，頁面即有資格獲得豐富結果——在搜尋結果頁直接顯示評分、FAQ 摺疊、文章圖片、麵包屑導航等視覺強化元素，豐富結果的點擊率通常高於一般藍色連結。

Google 官方推薦使用 JSON-LD 取代 Microdata 和 RDFa，因為 JSON-LD 可放置於頁面任意位置（包含 head），且不需修改現有 HTML 元素，結構化資料與標記完全分離。

豐富結果資格

有效的 schema 標記讓您的頁面有資格顯示 FAQ 摺疊、文章輪播、麵包屑導航及其他 Google 搜尋豐富功能。

同排名帶來更多點擊

語意清晰

結構化資料消除歧義。關於問答主題的頁面明確標示為 FAQPage，Google 因此能將其呈現為 FAQ 豐富結果。

精確告訴搜尋引擎您的內容

無需修改 HTML

JSON-LD 放置於 head 的 script 標籤中，完全不影響視覺 HTML，新增或更新 schema 不會破壞版面或無障礙。

清晰的職責分離

JSON-LD 與 Microdata 及 RDFa 比較

網頁中嵌入 schema.org 結構化資料有三種格式，Google 均能識別，但在應用與維護方式上有明顯差異。

格式	語法位置	維護性	SEO 影響	Google 推薦
JSON-LD	獨立 script 標籤	簡單 — 無需修改 HTML	完整豐富結果支援	推薦使用
Microdata	內嵌 HTML 屬性	高度耦合標記	完整豐富結果支援	支援
RDFa	內嵌 HTML 屬性	高度耦合標記	完整豐富結果支援	支援

JSON-LD 維護性優勢

Microdata 和 RDFa 將 schema 屬性散布於 HTML 中，模板結構變更可能無聲破壞結構化資料。JSON-LD 是獨立區塊，更新 script 即可，HTML 不受影響。

學習 HTML 標籤、Open Graph 與 JSON-LD 結構化資料的實作方法。
實用的 SEO 策略，提升搜尋引擎能見度與排名。
實作專案涵蓋響應式設計與效能優化。

探索網頁開發課程

核心 schema 類型及使用時機

Schema.org 定義數百種類型，但少數類型涵蓋大部分網頁內容，這些類型可解鎖 Google 搜尋的豐富結果。

Schema 類型	使用情境	豐富結果類型
Article	部落格文章、指南、新聞稿	文章輪播、熱門新聞
FAQPage	問答頁面	搜尋結果中的 FAQ 摺疊
BreadcrumbList	具導航層級的頁面	URL 下方的麵包屑路徑
WebSite / WebPage	首頁、樞紐頁、登陸頁	網站連結搜尋框、實體識別
SoftwareApplication	應用程式、工具、軟體產品	帶評分與價格的應用豐富結果

Schema.org 詞彙

所有 schema 類型均定義於 schema.org。每個 JSON-LD 區塊的 @context 屬性指示解析器依 schema.org 詞彙解讀屬性名稱。單頁可結合多種 schema 類型，Google 獨立處理每個 script 區塊。

文章 schema 實作

文章 schema 是內容驅動網站最重要的類型，告訴 Google 標題、描述、發佈日期、作者與發行者，是取得豐富結果資格的最低屬性集合。

以下 C# 類別為序列化模型，每個屬性透過 JsonPropertyName 屬性直接對應 JSON-LD 欄位。

C#ArticleSchema C# 類別（JsonLdService.cs）

private class ArticleSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "Article";

    [JsonPropertyName("headline")]
    public string? Headline { get; set; }

    [JsonPropertyName("description")]
    public string? Description { get; set; }

    [JsonPropertyName("image")]
    public string? Image { get; set; }

    [JsonPropertyName("url")]
    public string? Url { get; set; }

    [JsonPropertyName("author")]
    public Organization? Author { get; set; }

    [JsonPropertyName("publisher")]
    public ArticlePublisher? Publisher { get; set; }

    [JsonPropertyName("datePublished")]
    public string? DatePublished { get; set; }

    [JsonPropertyName("dateModified")]
    public string? DateModified { get; set; }

    [JsonPropertyName("articleSection")]
    public List<string>? ArticleSection { get; set; }
}

必填屬性包括：headline、image、datePublished、dateModified、author 與 publisher。articleSection 陣列為選填但建議使用，能向 Google 表示文章主題範圍。

HTML文章 schema JSON-LD 輸出

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "JSON-LD Schema Markup: Complete SEO Implementation Guide",
  "description": "Learn how to implement JSON-LD structured data for Article, FAQPage, BreadcrumbList, WebSite, and WebPage schema types.",
  "image": "https://ghostlyinc.com/images/web/jsonldguide/opengraph/hero-1200.png",
  "url": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/",
  "author": {
    "@type": "Organization",
    "name": "GhostlyInc",
    "url": "https://ghostlyinc.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "GhostlyInc",
    "logo": {
      "@type": "ImageObject",
      "url": "https://ghostlyinc.com/images/logo.png"
    }
  },
  "datePublished": "2026-03-28T10:00:00Z",
  "dateModified": "2026-03-28T10:00:00Z",
  "articleSection": [
    "What is JSON-LD and why it matters for SEO",
    "JSON-LD vs. Microdata vs. RDFa",
    "Core schema types and when to use them",
    "Article schema implementation"
  ]
}
</script>

作者與發行者皆為 Organization 類型，個人部落格則可將作者設為 Person，包含姓名與網址。

FAQ schema 用於豐富摘要

FAQPage schema 產生 FAQ 豐富結果——可展開的問答對直接顯示於 Google 搜尋結果頁，顯著增加結果垂直空間，提升能見度與點擊率。

FaqPage 類別包含問題實體清單，每個實體須有 name（問題）及 acceptedAnswer，後者含 text 屬性（答案）。

C#FaqPage C# 類別（JsonLdService.cs）

private class FaqPage
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "FAQPage";

    [JsonPropertyName("@id")]
    public string? Id { get; set; }

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("mainEntity")]
    public List<FaqEntity>? MainEntity { get; set; }
}

private class FaqEntity
{
    [JsonPropertyName("@type")]
    public string Type { get; } = "Question";

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("acceptedAnswer")]
    public FaqAnswer? AcceptedAnswer { get; set; }
}

private class FaqAnswer
{
    [JsonPropertyName("@type")]
    public string Type { get; } = "Answer";

    [JsonPropertyName("text")]
    public string? Text { get; set; }
}

輸出為單一 FAQPage 區塊，含 mainEntity 陣列，每項為 Question 類型並帶有 acceptedAnswer。Google 支援每頁最多十個問題的豐富結果。

HTMLFAQ schema JSON-LD 輸出

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "@id": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/#faq",
  "name": "Frequently asked questions",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is the difference between JSON-LD and Microdata?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD is a separate script block that lives in the head and does not touch HTML. Microdata adds attributes directly to HTML elements. Google recommends JSON-LD for its maintainability."
      }
    },
    {
      "@type": "Question",
      "name": "How many FAQ questions can I mark up?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Google supports up to ten questions per page for the FAQ rich result. Additional questions are still valid schema but will not appear in the search result enhancement."
      }
    }
  ]
}
</script>

FAQPage 區塊上的 @id 錨定至特定 URL 片段，是多個 schema 區塊頁面的最佳實踐，方便解析器明確識別各實體。

導航用 BreadcrumbList

BreadcrumbList schema 告訴 Google 從首頁到當前頁面的層級路徑，Google 會用此顯示搜尋結果中的麵包屑路徑，取代原始 URL，提升可讀性。

C# 類別建立 ListItem 元素清單，每個包含位置、名稱與項目（URL），位置從 1 開始編號，首頁為位置 1。

C#BreadcrumbListSchema C# 類別（JsonLdService.cs）

private class BreadcrumbListSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "BreadcrumbList";

    [JsonPropertyName("itemListElement")]
    public List<BreadcrumbListElement>? ItemListElement { get; set; }
}

private class BreadcrumbListElement
{
    [JsonPropertyName("@type")]
    public string Type { get; } = "ListItem";

    [JsonPropertyName("position")]
    public int Position { get; set; }

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("item")]
    public string? Item { get; set; }
}

JSON 輸出將每個麵包屑放入 itemListElement，Google 要求至少兩個項目才能顯示麵包屑豐富結果，最後一項應為當前頁面 URL。

HTMLBreadcrumbList schema JSON-LD 輸出

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://ghostlyinc.com/en/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Web SEO Hub",
      "item": "https://ghostlyinc.com/en/web-seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "JSON-LD Schema Markup: Complete SEO Implementation Guide",
      "item": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/"
    }
  ]
}
</script>

麵包屑豐富結果顯示於搜尋結果頁標題下方，提升使用者體驗，讓用戶在點擊前更清楚網站結構。

WebSite 與 WebPage schema

WebSite 與 WebPage schema 建立網站的基礎實體圖。WebSite 定義網站本身，包括名稱、URL、語言與發行者。WebPage 描述單一頁面，並透過 isPartOf 關聯連結至父 WebSite。

兩個類別皆遵循相同 JSON-LD 模式。WebSite 的 @id 是網域根目錄；WebPage 的 @id 是完整頁面 URL。

C#WebSiteSchema 與 WebPageSchema C# 類別（JsonLdService.cs）

private class WebSiteSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "WebSite";

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("url")]
    public string? Url { get; set; }

    [JsonPropertyName("inLanguage")]
    public string? InLanguage { get; set; }

    [JsonPropertyName("publisher")]
    public Organization? Publisher { get; set; }
}

private class WebPageSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "WebPage";

    [JsonPropertyName("@id")]
    public string? Id { get; set; }

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("description")]
    public string? Description { get; set; }

    [JsonPropertyName("url")]
    public string? Url { get; set; }

    [JsonPropertyName("inLanguage")]
    public string? InLanguage { get; set; }

    [JsonPropertyName("isPartOf")]
    public WebSiteReference? IsPartOf { get; set; }
}

inLanguage 屬性使用 BCP 47 語言代碼（如 en、de、fr）。isPartOf 連結透過參考網域的 @id，將 WebPage 與 WebSite 實體關聯，協助 Google 建立完整網站實體模型。

HTMLWebSite 與 WebPage schema JSON-LD 輸出

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "GhostlyInc",
  "url": "https://ghostlyinc.com",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "GhostlyInc",
    "url": "https://ghostlyinc.com"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/",
  "name": "JSON-LD Schema Markup: Complete SEO Implementation Guide",
  "description": "Learn how to implement JSON-LD structured data for Article, FAQPage, BreadcrumbList, WebSite, and WebPage schema types.",
  "url": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/",
  "inLanguage": "en",
  "isPartOf": {
    "@type": "WebSite",
    "@id": "https://ghostlyinc.com"
  }
}
</script>

實作最佳做法

WrapInScriptTag 輔助方法是將 JSON 字串轉為有效 JSON-LD 區塊的唯一入口，會將序列化的 schema 載荷包裹在帶有 application/ld+json MIME 類型的 script 標籤中。

此方法由服務中所有 schema 建構器呼叫——Article、FAQPage、BreadcrumbList、WebSite 與 WebPage 均將序列化 JSON 傳入此工具。

C#WrapInScriptTag 方法（JsonLdService.cs）

private static MarkupString WrapInScriptTag(string json)
{
    var builder = new StringBuilder();
    builder.AppendLine("<script type=\"application/ld+json\">");
    builder.AppendLine(json);
    builder.AppendLine("</script>");

    return new MarkupString(builder.ToString());
}

SchemaContext 物件是 BuildSchema 方法的入口，攜帶建構頁面完整 schema 區塊所需的所有資料——類型、元資料、FAQ 清單、麵包屑層級與文章資料。

C#BuildSchema 分派邏輯（JsonLdService.cs）

public SchemaBuildResult BuildSchema(SchemaContext context)
{
    if (context == null) throw new ArgumentNullException(nameof(context));

    var jsonLd = new List<MarkupString>();

    switch (context.PageType)
    {
        case PageSchemaType.Home:
            jsonLd.Add(WebSite(context));
            jsonLd.Add(WebPage(context));
            break;
        case PageSchemaType.Article:
            jsonLd.Add(Article(context.Article!));
            break;
        case PageSchemaType.Tool:
            jsonLd.Add(WebPage(context));
            jsonLd.Add(SoftwareApplication(context.SoftwareApplication!));
            break;
        case PageSchemaType.Hub:
            jsonLd.Add(WebPage(context));
            break;
    }

    if (context.Faqs != null && context.Faqs.Count > 0)
    {
        jsonLd.Add(FAQ(context.Faqs.ToList(), context.FaqTitle, context.Url));
    }

    if (context.ParentHierarchy.Count > 0)
    {
        jsonLd.Add(BreadcrumbList(BuildBreadcrumbItems(context)));
    }

    return new SchemaBuildResult(jsonLd, context.PageType == PageSchemaType.Article);
}

分派開關使 schema 建構器具組合性。無論頁面類型，若有 FAQ 或麵包屑皆會附加，代表任何頁面類型都能新增 FAQ 區塊或麵包屑路徑，無需修改核心分派邏輯。

測試與驗證您的 schema

有效的 JSON-LD 語法不保證豐富結果資格。Google 工具會檢查語法正確性及內容是否符合各豐富結果類型的政策要求。

豐富結果測試

使用 search.google.com/test/rich-results 測試任意 URL 或貼上原始 HTML，Google 會確認偵測到的豐富結果類型並標示缺少的必填屬性。

Google 官方資格檢查工具

Schema 標記驗證器

validator.schema.org 依 schema.org 規範檢查您的標記，獨立於 Google 豐富結果政策，適合偵測屬性名稱錯誤與類型不符。

Schema.org 語法驗證

Google 搜尋主控台

搜尋主控台的增強功能區塊會大規模報告已編入索引頁面的 schema 錯誤與警告，適合初次驗證後持續監控。

上線後大規模監控

常見問題

01 JSON-LD 與 Microdata 有何差異？

02 JSON-LD 是否保證在 Google 顯示豐富結果？

03 一頁最多可有多少個 schema 區塊？

04 JSON-LD script 標籤應放在哪裡？

05 我可以在 Blazor 應用中動態產生 JSON-LD 嗎？

06 如果我的 JSON-LD 有語法錯誤會怎樣？

07 即使內容未變更，我是否仍應包含 dateModified？

08 麵包屑豐富結果是否必須使用 BreadcrumbList schema？

JSON-LD 結構化資料標記：完整 SEO 實作指南

什麼是 JSON-LD 及其對 SEO 的重要性

豐富結果資格

語意清晰

無需修改 HTML

JSON-LD 與 Microdata 及 RDFa 比較

掌握現代網頁開發與 SEO 最佳實務

核心 schema 類型及使用時機

文章 schema 實作

FAQ schema 用於豐富摘要

WebSite 與 WebPage schema

實作最佳做法

測試與驗證您的 schema

豐富結果測試

Schema 標記驗證器

Google 搜尋主控台

常見問題

常見 JSON-LD schema 標記問題解答

什麼是 JSON-LD 及其對 SEO 的重要性

豐富結果資格

語意清晰

無需修改 HTML

JSON-LD 與 Microdata 及 RDFa 比較

掌握現代網頁開發與 SEO 最佳實務

核心 schema 類型及使用時機

文章 schema 實作

FAQ schema 用於豐富摘要

導航用 BreadcrumbList

WebSite 與 WebPage schema

實作最佳做法

測試與驗證您的 schema

豐富結果測試

Schema 標記驗證器

Google 搜尋主控台

常見問題

常見 JSON-LD schema 標記問題解答

相關資源