Schema.org + JSON-LD 實戰：讓 Google 讀懂你的頁面

為什麼需要 JSON-LD

你的頁面有食譜，Google 不知道那是食譜還是一般文章。你的頁面有商品，Google 不知道價格是多少、有沒有庫存。你的頁面有 FAQ，Google 不知道哪些是問答、哪些是正文。

沒有結構化資料，Google 只能從文字猜測。猜對了頂多正常排名；猜到你給的資料，Google 可以顯示Rich Snippets——搜尋結果裡的星評、FAQ 展開、麵包屑、商品價格——這些直接影響點擊率。

JSON-LD 是 Google 首選的結構化資料格式，放在 <head> 裡的 <script> 標籤，不污染 HTML 結構，可以獨立維護。

<head>
  <!-- JSON-LD 放這裡，type 固定是 application/ld+json -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    ...
  }
  </script>
</head>

七種最常用的 Schema 類型

1. WebSite — 網站基本資訊 + 站內搜尋

每個網站的首頁都應該有這個，讓 Google 知道網站名稱和搜尋功能。

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "網站名稱",
  "url": "https://example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://example.com/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

potentialAction 是讓 Google 知道你的站內搜尋 URL 格式，有機會在搜尋結果顯示 sitelinks 搜尋框。

2. Article / BlogPosting — 文章

技術部落格、新聞文章用這個。Google 用它判斷內容新鮮度，影響新聞搜尋和 Discover 排名。

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "文章標題（110 字以內）",
  "description": "文章摘要",
  "image": "https://example.com/og-image.jpg",
  "datePublished": "2026-04-21T09:00:00+08:00",
  "dateModified": "2026-04-21T09:00:00+08:00",
  "author": {
    "@type": "Person",
    "name": "Terry Yao",
    "url": "https://example.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "網站名稱",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/this-article/"
  }
}

dateModified 比 datePublished 重要——定期更新舊文章並更新這個時間，Google 會視為新鮮內容。

3. BreadcrumbList — 麵包屑導覽

搜尋結果的 URL 顯示可以從醜醜的路徑變成有意義的麵包屑層級。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首頁",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "前端",
      "item": "https://example.com/frontend/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "HTML 語意化",
      "item": "https://example.com/frontend/html/semantic/"
    }
  ]
}

最後一個 item 可以省略 item 屬性（因為就是目前這頁）。

4. FAQPage — FAQ

這個的 ROI 最高——FAQ 正確標記後，搜尋結果可以直接展開問答，不用點進網頁。

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "JSON-LD 和 Microdata 有什麼差別？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD 放在 script 標籤裡，不影響 HTML 結構，維護比較容易。Microdata 要直接寫在 HTML 屬性上，跟呈現層耦合度高。Google 現在建議用 JSON-LD。"
      }
    },
    {
      "@type": "Question",
      "name": "一個頁面可以有多個 JSON-LD 嗎？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "可以。每個 schema type 可以各自放一個 script 標籤，Google 都會讀到。"
      }
    }
  ]
}

FAQ 的答案文字可以包含 HTML，但 Google 建議保持純文字。

5. Product — 商品

電商必備，讓 Google Shopping 和搜尋結果顯示價格、評分、庫存。

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "商品名稱",
  "image": "https://example.com/product.jpg",
  "description": "商品描述",
  "sku": "SKU-001",
  "brand": {
    "@type": "Brand",
    "name": "品牌名稱"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/product/",
    "priceCurrency": "TWD",
    "price": "1200",
    "priceValidUntil": "2026-12-31",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "89"
  }
}

availability 和 priceValidUntil 一定要填正確，填錯 Google 會懲罰。

6. Person / Organization — 關於頁面

個人部落格用 Person，公司網站用 Organization。

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Terry Yao",
  "url": "https://terryyaowork.github.io",
  "image": "https://terryyaowork.github.io/avatar.jpg",
  "jobTitle": "前端工程師",
  "sameAs": [
    "https://github.com/terryyaowork",
    "https://linkedin.com/in/terryyao"
  ]
}

sameAs 陣列連到你的社群帳號，Google 用這個把不同平台的你識別為同一個實體，有助於 Knowledge Panel 的建立。

7. 一個頁面多個 Schema

文章頁同時有 BreadcrumbList + BlogPosting + FAQPage 完全合法，各自放一個 <script> 標籤：

<script type="application/ld+json">{ BlogPosting schema }</script>
<script type="application/ld+json">{ BreadcrumbList schema }</script>
<script type="application/ld+json">{ FAQPage schema }</script>

驗證方法

寫完一定要驗，錯誤的 JSON-LD 比沒有還糟（Google 可能對整個網域降低信任度）。

Google Rich Results Test：貼 URL 或直接貼 HTML，告訴你哪種 Rich Result 資格、有沒有錯誤。

Schema Markup Validator：更嚴格的 Schema.org 標準驗證，不只看 Google 支援的類型。

Chrome DevTools：Application > Cache > Back/Forward Cache 可以看到 Google 實際抓到的結構化資料。

[[frontend/html/24-head-checklist|正常網站 <head> 完整清單]] — JSON-LD 放在哪、跟其他 meta 的順序
AEO 結構化資料 — 結構化資料在 AI 搜尋（SGE / AEO）的角色
Technical SEO — canonical、sitemap、robots 完整說明

Terry Yao's Blog

目錄