什麼是 Schema 結構化資料?
Schema 結構化資料是一種用特定格式標注網頁內容的方式,讓搜尋引擎(Google, Bing)更容易理解頁面在說什麼。
正常的 HTML 只包含用於顯示的資訊——標題、段落、圖片。但 Google 不一定知道這個標題是「文章名稱」還是「商品名稱」,這段文字是「價格」還是「作者名稱」。
Schema 標記(通常用 JSON-LD 格式)告訴 Google:「這是一篇關於 X 主題的文章,發表於 Y 日期,由 Z 人撰寫,優先關鍵字是 W」——讓 Google 可以更精確地索引和展示你的內容。
Schema 帶來的直接好處
豐富摘要(Rich Snippets)
實作特定類型的 Schema 後,你的搜尋結果可以顯示額外的視覺元素:
- 文章(Article):顯示發佈日期
- 評論(Review):顯示星評和評分數量
- 常見問題(FAQPage):在搜尋結果下方直接展開 Q&A 列表
- 本機商家(LocalBusiness):顯示評分、地址、開放時間
- 食譜(Recipe):顯示烹飪時間、評分、熱量
豐富摘要在搜尋結果上佔用更多空間、視覺更突出,通常點擊率(CTR)比普通結果高 20-30%。
適合設計工作室的 Schema 類型
1. LocalBusiness(在地商家)
這是對服務業最重要的 Schema,讓 Google 知道你是一個地理位置相關的業者。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "SimpleCreative 簡創數位工作室",
"url": "https://www.simplecreative.tw",
"email": "service@simplecreative.tw",
"description": "台灣網頁設計工作室,一頁式網站 NT$5,800 起",
"priceRange": "NT$5,800 - NT$50,000",
"areaServed": {
"@type": "Country",
"name": "Taiwan"
},
"address": {
"@type": "PostalAddress",
"addressCountry": "TW"
},
"sameAs": [
"https://www.instagram.com/simplecreative.tw",
"https://www.facebook.com/share/1HBa2jVvdZ/"
]
}
</script>
2. BlogPosting(部落格文章)
每篇部落格文章應加入 BlogPosting 或 Article Schema(這個你的網站已有實作):
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "文章標題",
"datePublished": "2025-06-01T09:00:00Z",
"dateModified": "2025-06-01T09:00:00Z",
"author": {
"@type": "Organization",
"name": "SimpleCreative 簡創數位工作室"
},
"publisher": {
"@type": "Organization",
"name": "SimpleCreative",
"logo": {
"@type": "ImageObject",
"url": "https://www.simplecreative.tw/images/logo/logo.svg"
}
}
}
3. FAQPage(常見問題)
如果你的官網有 FAQ 區塊,加入 FAQPage Schema 是最值得的操作之一——可能讓你的 Google 搜尋結果下方展開問答列表,佔用超過兩倍的螢幕空間。
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "網站製作費用是多少?",
"acceptedAnswer": {
"@type": "Answer",
"text": "一頁式網站 NT$5,800 起,多頁式官網 NT$18,000 起。費用依功能需求而定,歡迎聯絡取得詳細報價。"
}
},
{
"@type": "Question",
"name": "製作一個網站需要多久時間?",
"acceptedAnswer": {
"@type": "Answer",
"text": "從確認需求到上線,一頁式通常需要 2-3 週,多頁式官網通常需要 4-6 週,視功能複雜度而定。"
}
}
]
}
在 Next.js 中實作 Schema
在 Next.js App Router 中,最簡潔的方式是在每個頁面的 layout.tsx 或 page.tsx 中直接加入 標籤:
// app/layout.tsx 或 app/page.tsx
const structuredData = {
"@context": "https://schema.org",
"@type": "ProfessionalService",
// ... 你的 Schema 資料
}
export default function RootLayout({ children }) {
return (
<html lang="zh-TW">
<head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
/>
</head>
<body>{children}</body>
</html>
)
}
對動態的文章頁面(如你的 blog/[slug]/page.tsx),可以根據文章資料動態生成 Schema。
驗證你的 Schema
實作後,用 Google 提供的工具驗證:
Rich Results Test(search.google.com/test/rich-results):輸入 URL,檢查 Google 是否能正確解讀你的 Schema,並預覽在搜尋結果中可能的呈現方式。
Schema Markup Validator(validator.schema.org):更詳細的 Schema 語法檢查。
Schema 的注意事項
- Schema 內容必須與頁面可見內容一致:不能在 Schema 裡放頁面上沒有顯示的內容(Google 視為欺騙性標記,會被處罰)
- FAQ Schema 的問答必須真的出現在頁面上:Google 要求 Schema 反映的是頁面可見的內容
- 不要一次加入所有 Schema 類型:專注在對你的業務最相關的 2-3 種,然後確認正確實作
Schema 不是保證獲得豐富摘要的銀彈(Google 決定是否顯示),但正確實作是獲得這些 SEO 增強功能的必要條件。