用三個常用情境入門JSON-LD

在 AI 驅動的時代，JSON-LD 幫助搜尋引擎與 AI 工具更精準理解網頁內容，提升流量與使用者體驗。

Schema.org 結構化資料作為一種標準化的資料標記方式，為 AI 提供了更清晰、更具語義的資料基礎。

結構化資料支援多種格式，本文將以 JSON-LD 來拆解如何實作結構化資料。

什麼是 JSON-LD？

JSON-LD是一種基於 JSON 的結構化資料的實作格式，透過 Schema.org 詞彙提供語義標記，與 Microdata、RDFa 相比，更適合初學者學習資料結構化。

JSON-LD 與 SEO 的關係

JSON-LD 幫助搜尋引擎理解網頁內容，提升排名與曝光率。

支援 JSON-LD 的搜尋引擎

Google、Bing、Yandex 和 Baidu。

在網頁中加入結構化資料的好處

Google 搜尋中心提供了一些個案研究：

• 爛番茄：有做結構化資料的網頁，點閱率提升 25%。
• 樂天：採用結構化資料的網頁，使用者的停留時間會增加 1.5 倍。

實作 JSON-LD 的步驟

常用情境一：文章(範例：保養品開箱文)

步驟1：設定 @context
告訴搜尋引擎我們使用 Schema.org 詞彙表的屬性

{
    "@context": "https://schema.org/"
}

步驟2：選擇 @type
使用正確的類型，一般文章用 Article，新聞類型可以用 NewsArticle

{
    "@type": "Article"
}

步驟3：添加基本屬性

• 文章標題 headline
• 作者 author
• 發布日期 datePublished
• 相關圖片 image
• 文章簡介 description
• 文章網址 url

{
    "headline": "文章標題",
    "author": "作者姓名",
    "datePublished": "2025-03-13",
    "image": "圖片 URL",
    "description": "文章簡介",
    "url": "文章網址"
}

範例：保養品開箱文

{
    "@context": "https://schema.org/", 
    "@type": "Article", 
    "headline": "好物推薦，用過就離不開的保養品", 
    "author": "保養控4我",
    "datePublished": "2025-03-13",
    "image": "https://eighteen-years-old.com/images/skin-care-product.jpg",
    "description": "冬季必備的霜狀保養品，滋潤好吸收，天然精油調香，讓每次保養都像做SPA一樣放鬆享受。",
    "url": "https://eighteen-years-old.com/blog/unboxing-skin-care-products"
}

檢查：使用 Google 結構定義標記驗證工具

圖1: 檢查文章的資料結構化格式

常用情境二：產品(範例：保養品)

步驟1：設定 @context
告訴搜尋引擎我們使用 Schema.org 詞彙表的屬性

{
    "@context": "https://schema.org/"
}

步驟2：選擇 @type
使用正確的類型，產品用 Product

{
    "@type": "Product"
}

步驟3：添加基本屬性

• 產品名稱 name
• 產品描述 description
• 品牌 brand
• 產品圖片 image
• 優惠資訊 offers

{
    "name": "產品名稱",
    "description": "產品描述",
    "brand": "品牌名稱、品牌 Logo、品牌 Slogan、品牌官網",
    "image": "產品圖片 URL",
    "offers": "價格、貨幣別",
    "url": "產品網址"
}

步驟4：添加更多資訊細節

品牌資訊：

{
    "brand": {
        "name": "品牌名稱",
        "logo": "品牌Logo",
        "slogan": "品牌Slogan",
        "sameAs": "品牌官網URL"
    }
}

優惠資訊：

{
    "offers": {
        "@type": "offer",
        "price": "價格",
        "priceCurrency": "價格貨幣"
    }
}

範例：保養品

{
    "@context": "https://schema.org/", 
    "@type": "Product",
    "name": "重返18精華霜",
    "description": "冬季必備的霜狀保養品，滋潤好吸收，天然精油調香，讓每次保養都像做SPA一樣放鬆享受。",
    "image": "https://eighteen-years-old.com/images/skin-care-product.jpg",
    "url": "https://eighteen-years-old.com/shop/skin-care-product",
    "brand": {
        "name": "年十八",
        "logo": "https://eighteen-years-old.com/images/logo.jpg",
        "slogan": "美人如花，年年十八",
        "sameAs": "https://eighteen-years-old.com/"
    },
    "offers": {
        "@type": "offer",
        "price": "2100",
        "priceCurrency": "TWD"
    }
}

檢查：使用 Google 結構定義標記驗證工具

圖2: 檢查產品的資料結構化格式

常用情境三：本地商家(範例：旗艦店)

步驟1：設定 @context
告訴搜尋引擎我們使用 Schema.org 詞彙表的屬性

{
    "@context": "https://schema.org/"
}

步驟2：選擇 @type
使用正確的類型，本地商家用 LocalBusiness

{
    "@type": "LocalBusiness"
}

步驟3：添加基本屬性

• 商店名稱 name
• 地址 address
• 電話號碼 telephone
• 營業時間 openingHours

{
    "name": "商店名稱",
    "address": "地址",
    "telephone": "電話",
    "openingHours": "週一至週四 11:00-19:00、週五至週六 14:00-22:00"
}

步驟4：添加更多資訊細節

商店有多種營業時段

{
    "openingHours": [
        "Mo-Th 11:00-19:00",
        "Fr-Sa 14:00-22:00"
    ]
}

商店評級資訊，平均4.4分，有112則評論

{
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "112"
    }
}

範例：旗艦店

{
    "@context": "https://schema.org/", 
    "@type": "LocalBusiness",
    "name": "年十八台北旗艦店",
    "address": "台北市南港區",
    "telephone": "02-12345678",
    "openingHours": [
        "Mo-Th 11:00-19:00",
        "Fr-Sa 14:00-22:00"
    ],
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "112"
    }
}

檢查：使用 Google 結構定義標記驗證工具

圖3: 檢查本地商家的資料結構化格式

常見錯誤與最佳實踐

最佳實踐

• 欄位與頁面內容保持一致。
• 從基本屬性開始實作，使用正確的屬性比填加很多屬性來得重要。
• 使用 Google 結構定義標記驗證工具檢查資料格式。

常見錯誤

• 屬性名稱拼寫錯誤。
• 缺少必要欄位(參考步驟1和步驟2)。
• 標點符號有誤(務必使用JSON語法)。

透過正確實作 JSON-LD，不僅提升網站 SEO 成效，還能讓 AI 工具更精準解析內容，改善 AI 摘要品質，進而優化使用者體驗。

加入語義星圖官方 Discord

你也可以加入語義星圖官方 Discord 與我們一起學習資料結構化技巧。

參考資料

Google 搜尋基礎入門
結構定義標記測試工具
Schema.org
A Guide to JSON-LD for Beginners