HTML JSON-LD 結構化資料

在 SEO (搜尋引擎最佳化) 的領域中，除了讓網頁內容易於閱讀，「語義化」數據也同樣重要。JSON-LD (JavaScript Object Notation for Linked Data) 是一種使用 JSON 格式來傳遞網頁語義資訊的方法，它是 Google 目前最推薦的結構化資料標記方式。

透過 JSON-LD，你可以告訴搜尋引擎這篇網頁是一個「食譜」、一個「產品」、一件「活動」或是一篇「教學文章」，進而有機會在 Google 搜尋結果中呈現「複合式搜尋結果」(Rich Results)，例如星等評價、價格、烹飪時間等。

如何在 HTML 中加入 JSON-LD

JSON-LD 的內容被包在 <script> 標籤中，並將 type 設定為 application/ld+json。通常我們會將它放在 <head> 標籤內，或是 <body> 的最底部。

基本範例：標記一篇教學文章

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML JSON-LD 結構化資料教學",
    "author": {
      "@type": "Person",
      "name": "Fooish 編輯團隊"
    },
    "datePublished": "2026-01-02",
    "publisher": {
      "@type": "Organization",
      "name": "Fooish 教學網",
      "logo": {
        "@type": "ImageObject",
        "url": "https://www.fooish.com/logo.png"
      }
    }
  }
</script>

常見的結構化資料類型

JSON-LD 遵循 Schema.org 的規範，以下是幾種常見的應用場景：

BreadcrumbList：讓搜尋結果顯示麵包屑導覽路徑。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首頁",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "HTML 教學",
      "item": "https://www.example.com/html/"
    }
  ]
}

Product：顯示商品價格、庫存狀態、使用者評分。

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "專業級 HTML5 課程",
  "image": "https://www.example.com/course.jpg",
  "description": "深入淺出的 HTML5 與 Web API 實戰教學。",
  "offers": {
    "@type": "Offer",
    "price": "1200",
    "priceCurrency": "TWD",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "85"
  }
}

FAQPage：讓搜尋結果直接顯示常見問題與回答。

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "JSON-LD 應該放在 HTML 的哪裡？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常建議放在 <head> 內，但放於 <body> 底部也是完全合法的。"
      }
    }
  ]
}

Recipe：顯示料理照片、烹飪時間、卡路里資訊。

{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "經典紅醬義大利麵",
  "cookTime": "PT30M",
  "recipeYield": "2 人份",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "450 calories"
  }
}

為什麼選擇 JSON-LD 而非 Microdata？

過去我們常用 Microdata (直接在 HTML 標籤上加屬性，如 itemprop)，但 JSON-LD 有以下優點：

結構與視覺分離：你不需要在現有的 HTML 佈局中插入奇怪的屬性，不會弄亂原有代碼。
易於維護：由於它是純 JSON 格式，開發者可以輕鬆地透過腳本動態生成或編輯。
Google 優先支援：Google 官方多次公開表示 JSON-LD 是他們的標準首選方案。

驗證你的結構化資料

在部署 JSON-LD 之後，一定要記得使用工具進行驗證，確保語法沒有錯誤且符合 Google 的規範：

Google 複合式搜尋結果測試：檢查網頁是否能正確產生 Rich Results。
Schema Markup Validator：檢查 Schema.org 的屬性完整性。

結語

加入 JSON-LD 結構化資料雖然不會直接改變網頁的視覺長相，但它能讓搜尋引擎更深刻地「理解」你的內容。在競爭激烈的搜尋排名中，Rich Results 帶來的視覺吸引力往往能大幅提升點擊率 (CTR)。