跳到主要內容
Cypher's Practical Coding
正在準備工作環境...

結構化資料(JSON-LD)

你有沒有在 Google 搜尋結果中看過商品旁邊出現星星評分、價格、庫存狀態?那不是 Google 自己加的——是網站透過「結構化資料」主動告訴 Google 這些資訊。學會寫 JSON-LD,你的商品就有機會在搜尋結果中脫穎而出。

什麼是結構化資料?

結構化資料就是用「機器看得懂的格式」,把網頁上的資訊(商品名稱、價格、評分、FAQ...)標記清楚,讓 Google 能直接讀取並顯示在搜尋結果上。

Google 支援三種格式,我們學最主流的 JSON-LD(JSON for Linking Data):

  • 寫在 <script type="application/ld+json"> 標籤裡
  • 放在 <head><body> 都可以
  • 不影響頁面顯示,純粹給搜尋引擎看

Rich Results — 豐富搜尋結果

加了結構化資料後,Google 可能在搜尋結果中顯示:

類型顯示內容常用 Schema
商品價格、庫存、評分星星Product
FAQ可展開的問答列表FAQPage
麵包屑頁面路徑導航BreadcrumbList
食譜烹飪時間、熱量、圖片Recipe
文章作者、發布日期Article

Product Schema — 電商最常用

Product Schema 必填欄位:

  • name — 商品名稱
  • image — 商品圖片網址
  • offers — 價格與庫存資訊(pricepriceCurrencyavailability

常用 availability 值:

  • https://schema.org/InStock — 有貨
  • https://schema.org/OutOfStock — 缺貨
  • https://schema.org/PreOrder — 預購中

FAQ Schema — 讓搜尋結果出現問答

在商品頁加上 FAQ 結構化資料,搜尋結果會出現可展開的問答:

BreadcrumbList — 麵包屑導航

讓 Google 在搜尋結果中顯示頁面路徑:首頁 > 3C 配件 > 藍牙耳機 > AirMax Pro

怎麼驗證結構化資料?

Google 提供免費的驗證工具:

  1. Rich Results Testhttps://search.google.com/test/rich-results — 測試你的頁面能不能產生豐富搜尋結果
  2. Schema Markup Validatorhttps://validator.schema.org/ — 檢查 JSON-LD 語法是否正確

AI 協作:學了這個,跟 AI 怎麼配合?

JSON-LD 的格式很固定,非常適合讓 AI 幫你批量生成。你只需要提供商品資訊,AI 就能產出正確格式。

你的人類優勢:

  • 你知道商品的正確名稱、價格、庫存狀態
  • 你能決定哪些 FAQ 最能吸引顧客
  • 你能判斷結構化資料的內容是否與頁面一致(Google 會懲罰不一致的標記)

可以這樣跟 AI 說:

幫我為這個商品產生 JSON-LD 結構化資料,包含 Product schema 和 FAQ schema。商品資訊:名稱「有機棉嬰兒連身衣」、價格 NT$590、有貨、評分 4.8(156 則評價)。FAQ 三題:尺寸怎麼選、可以機洗嗎、多久會到貨。

練習題

互動示範

DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩

挑戰任務

Task 1

為一個電商商品寫 Product JSON-LD。商品名稱:經典帆布鞋,價格:TWD 1290,狀態:有貨,品牌:StepOne

Task 2

寫一個 FAQPage JSON-LD,包含兩個問答:「可以退貨嗎?」和「運費怎麼算?」

Task 3

寫一個 BreadcrumbList JSON-LD,路徑為:首頁 > 服飾 > 女裝 > 洋裝。網域為 https://www.myshop.com

BackNext Lesson →