早年架站時，Open Graph 卡片幾乎只做一件事：讓分享到 Facebook 的連結預覽完整呈現。生成式搜尋普及後，它多了另一層意義：模型擷取頁面時，會把 OG meta 列為優先讀取的摘要訊號。在 量身規劃的網站設計 裡，這組設定最容易被低估，卻能決定系統對該頁的第一印象。
和業主對過分享欄位後會發現，常見錯誤是預覽圖只放商標、標題寫成「首頁」、描述留白。自動化程式讀到這種卡片，幾乎無法建立有效認知。同類疏漏在專案中反覆出現。
撰寫精準的 OG，不只讓社群卡片更完整，也會左右模型對頁面主題的初始判斷。
OG 卡片的兩種任務
| 用途 | 對象 | 影響 |
|---|---|---|
| 社群分享預覽 | Facebook、LinkedIn、Slack、Discord | 點擊意願 |
| 頁面短摘要 | 語言模型與搜尋引擎 | 理解是否到位 |
第二種用途是近幾年才被認真看待：處理網頁時，OG 給出長度受控、格式固定的摘要，遠比通讀整份 HTML 有效率。
OG meta 範例全集
撰寫與設計要點
og:title
- 控制在 60 字以內，避免手機預覽被截斷
- 與 H1 呼應，但可以再濃縮
- 不要堆關鍵字，改寫成讀者願意點開的句子
| ✗ | ✓ |
|---|---|
| 網頁設計｜結構化資料｜搜尋｜分享卡｜關鍵字堆疊 | 結構化資料標記實作手冊 |
| 公司簡介頁 | 專注模型可讀網站的建置團隊 |
og:description
- 中文約 100 到 150 字
- 第一句就要說清這頁在講什麼
- 自然帶入核心詞，不要刻意堆砌
- 避開空泛形容，例如「最棒」「第一名」
og:image
預覽裡最關鍵的視覺。建議遵守以下條件：
- 尺寸 1200×630 像素，比例約 1.91:1
- 檔案小於 1MB
- 文字要夠大，縮成手機縮圖仍可辨識
- 對比要強，例如淺底深字或深底亮字
- 畫面包含品牌標誌與標題，呈現原則可參考 圖片與 alt 的模型友善寫法
落地時可以這樣做：
- 自動產出預覽圖：每篇文章依標題生成專屬 OG
- Vercel 或 Cloudflare 都提供動態產圖介面
- 樣板實作：用 SVG 範本為每篇專欄生成預覽圖
og:type
使用規範值，不要自訂類型：
| 值 | 用途 |
|---|---|
website | 首頁與彙整頁 |
article | 部落格與專欄 |
product | 商品詳細頁 |
book | 書籍介紹 |
profile | 個人頁面 |
video.movie | 影片內容 |
選定類型後，再補對應子欄位，例如 article 可加 article:author 與 article:published_time。
Twitter Card
常見類型如下：
summary：小圖（120×120）搭配標題與描述summary_large_image：大圖（1200×630）搭配標題與描述app：應用程式推廣卡player：影片或音訊播放卡
多數頁面應採用 summary_large_image，視覺張力最高。
讓模型讀得懂的 OG 寫法
下面比較兩種寫法：
後一版寫出具體範圍、明確服務（智慧網站建置）以及目標系統（ChatGPT、Claude、Google AI）：讀完就能判斷這是什麼團隊、提供什麼。
動態產出 OG 圖
若每篇文章都手工製作 1200×630 預覽，維護成本會很快上升。動態生成才是能長期維持的做法。
方案一：Vercel OG
// pages/api/og.jsximport { ImageResponse } from '@vercel/og';export default function OgImage(req) { const title = new URL(req.url, 'https://example.com').searchParams.get('title') || '未命名'; return new ImageResponse( {title} , { width: 1200, height: 630 } );}每篇文章都能自動產出符合品牌視覺的預覽圖。
方案二：Cloudflare Workers
概念與 Vercel OG 相近，但執行在 Cloudflare 邊緣節點，延遲更低，免費額度也更寬裕。
方案三：Puppeteer 截圖
彈性最大，成本也最高：在伺服器啟動無頭瀏覽器，把排好的 HTML 截成圖片。
上線前自我檢查
每一頁的 OG meta 可依下列項目核對：
- og:title 不超過 60 字，與 H1 對齊且更精煉
- og:description 約 100 到 150 字，首句點明主題
- og:image 為 1200×630，縮到 200×100 仍可讀
- 已標明 og:image:width 與 og:image:height
- og:type 選用 website、article 或 product
- Twitter Card 設為 summary_large_image
- og:url 為含 https:// 的完整網址
- og:site_name 全站一致
- og:locale 設定正確，例如 zh_TW 或 en_US
- 以 Open Graph Debugger 檢查通過
結語：摘要層不只 Schema
過去 OG 多半被當成社群分享的外觀設定，現在應把它升級成人與模型都會讀取的頁面摘要。寫得清楚，系統的第一印象就準；寫得含糊，再扎實的正文也容易在起點失分。
建置網站時，OG 與 Schema 適合放在同一階段處理：兩者都是讓模型看懂頁面的多層訊號。若要做模型友善升級，建議兩項一起排程，不要拆開。延伸可讀 Schema.org 結構化資料指南 與 解決方案。
