結構化資料與 JSON-LD：SEO 富摘要的完整實作指南

前端工程（更新於 2026年6月7日）

什麼是結構化資料？

結構化資料是按照 Schema.org 詞彙表組織的標準化資料格式，幫助搜尋引擎理解頁面內容的語意含義，從而在搜尋結果中展示富摘要（Rich Snippets）。

三種嵌入格式對比

格式 嵌入方式 Google 推薦 維護性
JSON-LD <script type="application/ld+json"> 推薦 優
Microdata HTML 屬性 itemscope/itemprop 不推薦 差
RDFa HTML 屬性 vocab/property 不推薦 差

Google 官方明確推薦 JSON-LD，因為它與 HTML 內容解耦，維護更方便。

JSON-LD 基礎語法

基本結構

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章標題",
  "description": "文章描述",
  "author": {
    "@type": "Person",
    "name": "張三"
  },
  "datePublished": "2026-06-07",
  "dateModified": "2026-06-07"
}
</script>

多型別組合

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "..."
  },
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [...]
  }
]
</script>

常用結構化資料型別

1. Article（文章）

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Web Animations API 與高效能動畫",
  "description": "深入對比 Web Animations API 與 CSS 動畫的效能差異",
  "image": "https://toolsku.com/og/blog-animation.png",
  "author": {
    "@type": "Organization",
    "name": "工具庫團隊",
    "url": "https://toolsku.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ToolsKu",
    "logo": {
      "@type": "ImageObject",
      "url": "https://toolsku.com/logo.png"
    }
  },
  "datePublished": "2026-06-06",
  "dateModified": "2026-06-06",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://toolsku.com/blog/web-animations-api-performance"
  }
}

2. FAQPage（常見問題）

{
  "@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": "結構化資料多久被 Google 識別？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常需要數天到數週，取決於爬取頻率。可透過 Search Console 的增強功能報告檢視狀態。"
      }
    }
  ]
}

3. HowTo（教學步驟）

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "如何新增 JSON-LD 結構化資料",
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "確定頁面型別",
      "text": "根據頁面內容選擇合適的 Schema.org 型別，如 Article、Product、FAQPage。"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "撰寫 JSON-LD",
      "text": "按照 Schema.org 規範撰寫 JSON-LD 資料，確保所有必填欄位完整。"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "嵌入頁面",
      "text": "將 JSON-LD 放入 <script type=\"application/ld+json\"> 標籤，置於 <head> 或 <body> 中。"
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "驗證與測試",
      "text": "使用 Google 富結果測試工具驗證結構化資料是否正確。"
    }
  ]
}

4. BreadcrumbList（麵包屑導覽）

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首頁",
      "item": "https://toolsku.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "部落格",
      "item": "https://toolsku.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "結構化資料與 JSON-LD",
      "item": "https://toolsku.com/blog/structured-data-json-ld"
    }
  ]
}

5. SoftwareApplication（工具應用）

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "CSS 動畫產生器",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web",
  "description": "線上 CSS 動畫程式碼產生與預覽工具",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "CNY"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "256"
  }
}

Next.js 中的 JSON-LD 實作

使用 next/script 注入

import Script from 'next/script';

function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.description,
    author: {
      '@type': 'Organization',
      name: '工具庫團隊',
    },
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
  };

  return (
    <>
      <Script
        id="json-ld"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{post.content}</article>
    </>
  );
}

使用 metadata API（Next.js 15+）

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
    },
  };
}

Google 富摘要效果

結構化資料型別 富摘要效果 CTR 提升
Article 作者頭像、發布日期 +20-30%
FAQPage FAQ 折疊展開 +30-50%
HowTo 步驟列表 +20-40%
BreadcrumbList 麵包屑路徑 +10-15%
SoftwareApplication 評分、價格 +25-35%

驗證與除錯

Google 富結果測試

造訪 Rich Results Test，輸入頁面 URL 或貼上 HTML 程式碼。

Schema.org 驗證器

造訪 Schema Markup Validator，驗證 JSON-LD 結構是否符合規範。

Search Console 監控

Search Console → 增強功能 → 結構化資料

- 檢視有效/無效專案數量
- 定位具體錯誤
- 監控 Google 識別進度

常見錯誤排查

錯誤 原因 修復
缺少必填欄位 未提供 required 屬性 補全 headline、datePublished 等
型別不匹配 值型別與 Schema 定義不符 date 應為 ISO 8601 格式
重複結構化資料 同一內容多次宣告 合併為陣列或移除重複
無效 URL URL 格式錯誤或不可達 使用完整絕對路徑

最佳實務

  • 每個頁面只宣告該頁面內容的型別：部落格用 Article，工具用 SoftwareApplication
  • datePublished 和 dateModified 使用 ISO 8601：2026-06-07 或 2026-06-07T08:00:00+08:00
  • image 使用絕對 URL：https://toolsku.com/og/image.png
  • 不要虛構資料：Google 可能對虛假結構化資料進行手動處罰
  • 與 Open Graph 互補：JSON-LD 給搜尋引擎，OG 給社群媒體

總結

JSON-LD 是實作結構化資料的最優方案，透過 Schema.org 詞彙表為搜尋引擎提供語意資訊，顯著提升富摘要展示率和點擊率。在 Next.js 中可透過 next/script 或 metadata API 輕鬆整合，配合 Google 富結果測試和 Search Console 持續監控效果。

使用 OG 預覽工具 檢查 Open Graph 標籤，使用 Sitemap 產生器 確保頁面可被發現，使用 Robots.txt 編輯器 控制爬蟲存取。

本站提供瀏覽器本地工具，免註冊即可試用 →

#JSON-LD#结构化数据#SEO#Schema.org#富摘要