元伸科技
如果說網頁設計的視覺層是「給人看的」，那麼 Schema.org 標記就是「給 AI 看的」。前者是 CSS 與排版，後者是隱藏在 HTML 裡的一段資料。兩者都做才是完整的網頁設計。
很多設計師沒做 Schema 的原因不是不重要，而是覺得「那是工程師的事」。但實際上，Schema 該標什麼、怎麼標，是從設計階段就要決定的。設計師如果不懂 Schema，做出來的版面工程師事後加 markup 會非常痛苦。
Schema 是什麼？簡單說：給 AI 的標籤
Schema.org 是 Google、Microsoft、Yahoo、Yandex 等四大搜尋巨頭共同制訂的「網頁資料標準」。它定義了一系列「實體類型」（Thing 的子類），讓網頁可以告訴 AI：
- 這段內容是「文章」（Article）
- 這個區塊是「FAQ」（FAQPage）
- 這個圖片是「公司 Logo」（ImageObject + Organization.logo）
- 這個價格是「商品售價」（Offer.price）
AI 看到這些標記，就能精確理解網頁每個區塊的角色，從而決定是否拿來作為搜尋摘要的來源。
推薦格式：JSON-LD（不影響視覺）
Schema.org 支援三種格式：Microdata（嵌在 HTML）、RDFa、JSON-LD。Google 強烈推薦 JSON-LD，因為它：
- 與 HTML 分離，不影響視覺與排版
- 可放在
<head>或<body>任意位置 - 一個區塊就是一個完整資料結構，容易維護
- 不影響網頁速度、不影響 SEO 排名
範例：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "元伸科技",
"url": "https://ozchamp.com",
"logo": "https://ozchamp.com/logo.svg",
"foundingDate": "2002",
"description": "AI-Ready 智慧網站開發專家"
}
</script>
這段資料對使用者完全不可見，但 AI 看到後立刻知道：「這是一家 2002 年成立、做 AI-Ready 網站的公司」。
7 種網頁設計師必懂的 Schema
1. Organization（公司資訊）
用在哪：首頁、關於我們頁 為什麼重要：建立品牌信任、影響知識面板（Knowledge Panel）
關鍵欄位：name、url、logo、foundingDate、address、contactPoint、sameAs（社群連結）
2. Article（文章）
用在哪：部落格、新聞、Insights 文章 為什麼重要：是 AI Overviews 引用的核心類型
關鍵欄位：headline、author、datePublished、dateModified、image、publisher、articleBody
3. FAQPage（常見問題）
用在哪：FAQ 頁、產品詳情頁底部、文章結尾 為什麼重要：AI Overviews 引用率最高的類型之一，因為格式天生適合摘要
關鍵欄位：mainEntity（陣列，每個元素是 Question + acceptedAnswer）
每個 Q&A 可以獨立被擷取，AI 直接拿來回答相關搜尋。
4. Product（商品）
用在哪：電商商品詳情頁 為什麼重要：影響商品在 Google Shopping、AI 購物推薦的曝光
關鍵欄位：name、image、description、brand、offers（含 price、priceCurrency、availability）、aggregateRating
5. BreadcrumbList（麵包屑）
用在哪：每個非首頁的頁面 為什麼重要：幫助 AI 理解網站結構與頁面所在位置
關鍵欄位：itemListElement（陣列，每個元素含 position、name、item）
6. LocalBusiness（實體店家）
用在哪：有實體據點的企業（餐廳、診所、零售店） 為什麼重要：影響「附近的 OO」類型搜尋與地圖搜尋
關鍵欄位：name、address、telephone、openingHoursSpecification、geo（經緯度）、priceRange
7. Person（人物）
用在哪：作者頁、團隊介紹 為什麼重要：建立作者權威，影響 E-E-A-T 評分
關鍵欄位：name、jobTitle、image、sameAs、worksFor
設計階段就要規劃的 3 件事
一、定義每頁該標哪些 Schema
設計階段就決定每個頁面需要哪些 Schema 組合：
| 頁面類型 | 推薦 Schema |
|---|---|
| 首頁 | Organization + WebSite |
| 關於我們 | AboutPage + Organization |
| 部落格列表 | CollectionPage |
| 部落格內頁 | Article + BreadcrumbList + FAQPage（如有） |
| 商品列表 | CollectionPage + ItemList |
| 商品詳情 | Product + BreadcrumbList + Review |
| FAQ 頁 | FAQPage |
| 聯絡我們 | ContactPage + LocalBusiness |
| 作者頁 | Person + ProfilePage |
二、確認設計版面有相應的內容欄位
如果你規劃了 Article schema，那設計版面就要有：作者區塊、發布日期、更新日期、文章主圖。如果你規劃了 FAQPage schema，版面就要有清楚的問答對。不能 schema 標了但版面沒有對應內容，這會被 Google 視為「結構性詐欺」反而扣分。
三、與工程師對齊資料來源
Schema 的資料要從哪裡來？是寫死在模板還是從 CMS 撈？這要在設計階段就跟工程師討論清楚，避免後期手動補資料的維護災難。
常見錯誤排雷
- ❌ Schema 寫了但內容假：Schema 標 Review 但實際沒有評論區塊 → Google 視為違規
- ❌ 多重 Type 混用：一個區塊同時標 Article 跟 BlogPosting 但欄位互相衝突
- ❌ 缺必填欄位：Article 沒寫 author 或 datePublished，AI 不會引用
- ❌ logo 用相對路徑：必須用絕對 URL（含 https://）
- ❌ 價格寫文字而非數字：
"price": "NT$ 5000"錯，應該"price": "5000", "priceCurrency": "TWD"
結語：設計與標記不分家
AI Overviews 時代的網頁設計，已經不能把「視覺」與「Schema」分開來做。版面有什麼內容、Schema 就標什麼，兩者必須在規劃階段就一起考慮。設計師如果懂 Schema，做出來的版面就會自然「AI-Ready」；如果不懂，事後補救成本是事前規劃的 3-5 倍。
元伸科技在每個 AI-Ready 網站專案的需求分析階段，都會產出「Schema 對應表」——明確列出每個頁面要標哪些 Schema、欄位資料從哪來、由誰維護。這份表是設計、工程、行銷三方對齊的依據，也是事後驗收的標準。
