結構化資料

Last updated 3 months ago

結構化資料

簡介

結構化資料是一種標準化格式，作用是提供網頁相關資訊並將網頁內容分類。例如在食譜網頁上，結構化資料就能分類材料、烹飪時間和溫度、熱量等內容。

這份說明文件旨在介紹結構化資料的必要屬性、建議屬性及選用屬性，並且說明這些屬性對 Google 搜尋的特殊意義。雖然大部分的 Google 搜尋結構化資料都使用 schema.org 詞彙，但在瞭解 Google 搜尋的運作方式時，請忽略 schema.org 的說明文件，並以 Google 搜尋中心說明文件為最終參考指南。schema.org 上有許多屬性或物件對其他搜尋引擎、服務、工具和平台來說可能很實用，但對 Google 搜尋而言並非必要。

一般而言，只要定義更多建議的功能，資訊就更有可能以進階顯示功能的形式呈現在搜尋結果中。不過，與其設法將所有可能的建議屬性一網打盡，但卻因為不完整、格式錯誤或不正確的資料而漏洞百出，還不如採取量少質精策略，提供較少的建議屬性，但個個完整無誤。

為什麼要在網頁中加入結構化資料？

添加結構化資料可增加搜尋結果對使用者的吸引力，也可能鼓勵使用者更常與您的網站互動 (這稱為「複合式搜尋結果」)。

Google 搜尋中的結構化資料運作方式

Google 會利用從網路上找到的結構化資料來瞭解網頁內容，以及收集網路和全球的資訊 (例如標記中所包含的使用者、書籍或公司相關資訊)。舉例來說，食譜網頁可能會出現以下 JSON-LD 結構化資料程式碼片段，介紹食譜的名稱、作者以及其他詳細資料：

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
    <h2>Party coffee cake recipe</h2>
    <p>
      <i>by Mary Stone, 2018-03-10</i>
    </p>
    <p>
      This coffee cake is awesome and perfect for parties.
    </p>
    <p>
      Preparation time: 20 minutes
    </p>
  </body>
</html>

方式一：JSON-LD

JavaScript Object Notation for Linked Data，JSON 格式的結構化資料，

這是一種嵌入在 HTML 網頁的 <head> 和 <body> 元素內 <script> 標記中 JavaScript 標記法。由於標記不會與使用者可見的文字交錯，因此巢狀資料項目可透過更簡易的方式表達，例如 Country > PostalAddress > MusicVenue > Event。此外，Google 能夠解讀以動態方式插入網頁內容的 JSON-LD 資料，例如透過 JavaScript 程式碼或內容管理系統中的內嵌小工具插入的資料。

使用方式：

<script type="application/ld+json">
{ /* your structured data */}
</script>

請勿透過 robots.txt、noindex或任何其他存取權控管方法，禁止 Googlebot 存取您的結構化資料網頁。

方式二：microdata

這段 HTML 有三個重點，首先是 itemscope ，用來說明這各 div 底下的資訊都是同一個範圍。第二個重點是 itemtype，用來定義這個資訊是屬於哪一種類別，以上方範例來說是電影的類別，最後是 itemprop，用來定義這段文字的資訊是屬於什麼，例如 <h1 itemprop="name">Avatar</h1> 就是說明 Avatar 是電影名稱。

測試

標記工具

結構化資料類別與範例

在 Google 搜尋結果中產生站內搜尋的輸入框

使用 SearchAction 的結構化資料標記（通常以 JSON-LD 格式）。
指定搜尋結果頁的 URL 模板，將使用者的輸入動態插入到站內搜尋的參數中。

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.dribbble.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.dribbble.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

實現效果：

使用者搜尋「dribbble」時，會在 Google 的搜尋結果中看見站內搜尋框，輸入關鍵字後會導向 https://www.dribbble.com/search?q=輸入的關鍵字。

Google 搜尋進入特定搜尋結果頁時，自動帶入關鍵字

這需要透過搜尋引擎友好的 URL 結構和 JavaScript 操作結合來完成。

設置方式

修改網站搜尋頁的 URL 結構，使關鍵字以參數傳入，例如：https://example.com/search?q=腳踏車。
在搜尋框中顯示 URL 中的 q 參數，並觸發搜尋。

結構化標題與描述： 使用 SEO 元標籤，將標題與描述動態生成：

<title>腳踏車 - PChome</title>
<meta name="description" content="在 PChome 購買腳踏車，查看最新價格與優惠！">

<script>
document.addEventListener("DOMContentLoaded", function() {
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get('q');
  if (query) {
    document.getElementById('search-box').value = query;
    document.getElementById('search-form').submit(); // 自動觸發搜尋
  }
});
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.pchome.com.tw/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.pchome.com.tw/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

常見的結構化資料用於行銷方式

// FAQ Schema（常見問答標記）
// 增強搜尋結果，讓使用者在搜尋頁面看到展開的問答，增加點擊率。
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "如何購買腳踏車？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "您可以瀏覽我們的腳踏車專區，選擇適合的商品，並完成下單。"
      }
    },
    {
      "@type": "Question",
      "name": "有提供免費配送嗎？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "是的，所有商品訂單滿 2000 元皆可享受免費配送服務。"
      }
    }
  ]
}
</script>


// Product Schema（商品結構化資料）
// 在搜尋結果中顯示價格、評分等商品資訊。
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "高性能腳踏車",
  "image": "https://example.com/bike.jpg",
  "description": "這款腳踏車適合城市和山地使用，耐用且輕便。",
  "brand": {
    "@type": "Brand",
    "name": "BikeBrand"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/bike",
    "priceCurrency": "TWD",
    "price": "12000",
    "availability": "https://schema.org/InStock"
  }
}
</script>

// Review Schema（評論結構化資料） 
// 顯示平均評分，提升點擊吸引力。
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "AggregateRating",
  "ratingValue": "4.5",
  "reviewCount": "120",
  "bestRating": "5",
  "worstRating": "1"
}
</script>

// Event Schema（活動結構化資料）
// 將線上或線下活動直接顯示於搜尋結果。
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "2024 脚踏车展览",
  "startDate": "2024-05-01T10:00",
  "endDate": "2024-05-05T18:00",
  "location": {
    "@type": "Place",
    "name": "台北世貿中心",
    "address": "台北市信義區信義路5段5號"
  },
  "image": "https://example.com/event.jpg",
  "description": "年度脚踏车展览，展示最新骑行科技与趋势。",
  "offers": {
    "@type": "Offer",
    "price": "500",
    "priceCurrency": "TWD",
    "availability": "https://schema.org/InStock"
  }
}
</script>

// 使用 Article 結構化資料新公告
// 適用於一般的文章或公告，例如部落格文章、公司更新或最新消息。
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "2024 年最新產品發布公告",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "publisher": {
    "@type": "Organization",
    "name": "My Company",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2024-12-04",
  "dateModified": "2024-12-04",
  "description": "我們很高興宣布 2024 年的新產品線，包括創新的腳踏車和相關配件。",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/latest-news"
  }
}
</script>


// 使用 NewsArticle 結構化資料
// 若最新消息屬於新聞類型（如重大公告或新聞稿），可使用更適合新聞內容的 NewsArticle 類型。
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "公司宣布新產品發布會日期",
  "image": [
    "https://example.com/news-image1.jpg",
    "https://example.com/news-image2.jpg"
  ],
  "datePublished": "2024-12-04T08:00:00+08:00",
  "dateModified": "2024-12-04T08:30:00+08:00",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "publisher": {
    "@type": "Organization",
    "name": "My Company",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "我們將於 2024 年 12 月 10 日舉行年度產品發布會，邀請媒體與合作夥伴共同參與。",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/announcement"
  }
}
</script>

// 使用 BlogPosting 結構化資料
// 如果最新消息是以部落格形式發佈的，可使用 BlogPosting 類型。
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "企業 2024 年的目標與計劃",
  "author": {
    "@type": "Person",
    "name": "Marketing Team"
  },
  "publisher": {
    "@type": "Organization",
    "name": "My Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2024-12-01",
  "dateModified": "2024-12-03",
  "description": "探索我們在 2024 年將如何提升產品和服務，為客戶提供更多價值。",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/blog/2024-plans"
  }
}
</script>

// 針對即時新聞：LiveBlogPosting
// 如果最新消息需要持續更新（例如重大活動的即時報導），可以使用 LiveBlogPosting。
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LiveBlogPosting",
  "headline": "2024 年產品發佈會即時更新",
  "coverageStartTime": "2024-12-10T10:00:00+08:00",
  "coverageEndTime": "2024-12-10T12:00:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Reporter"
  },
  "publisher": {
    "@type": "Organization",
    "name": "My News Platform",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "liveBlogUpdate": [
    {
      "@type": "BlogPosting",
      "headline": "開始登場！",
      "articleBody": "活動剛剛開始，CEO 發表了精彩的開場演講。",
      "datePublished": "2024-12-10T10:05:00+08:00"
    },
    {
      "@type": "BlogPosting",
      "headline": "第一款產品亮相",
      "articleBody": "新款腳踏車 'SpeedMaster' 正式發布，適合城市與山地使用。",
      "datePublished": "2024-12-10T10:20:00+08:00"
    }
  ]
}
</script>

Nuxt3 動態應用

<script setup lang="ts">

const products = ref([])

onMounted(async () => {
  const response = await fetch('https://api.example.com/products')
  products.value = await response.json()

  const structuredData = {
    '@context': 'https://schema.org',
    '@graph': products.value.map((product: any) => ({
      '@type': 'Product',
      name: product.name,
      image: product.image,
      description: product.description,
      brand: {
        '@type': 'Brand',
        name: product.brand,
      },
      offers: {
        '@type': 'Offer',
        url: product.url,
        priceCurrency: 'TWD',
        price: product.price,
        availability: `https://schema.org/${product.availability}`,
      },
    })),
  }

  useHead({
    script: [
      {
        type: 'application/ld+json',
        children: JSON.stringify(structuredData),
      },
    ],
  })
})
</script>

PreviousHTML tag Next其他技巧

Last updated 3 months ago