元伸科技
Open Graph（OG）與 Twitter Card 的傳統用途是『社群分享預覽』，但 AI 時代有了新意義——AI 模型也讀 OG meta 作為理解網頁的快速摘要。實作重點：(1) **og:title** 簡潔有力，與 H1 對齊；(2) **og:description** 100-150 字，含核心關鍵字；(3) **og:image** 1200×630px，圖內文字必須清楚易讀；(4) **og:type** 用標準值（website / article / product）；(5) **Twitter Card** summary_large_image 為主流。AI 模型在處理網頁時，OG meta 是繼 `<title>`、`<h1>` 之後最先讀的元素之一。設計師應把 OG 視為『給 AI 與社群的快速簡介』，與內容層的 Schema、定義段落形成多層理解網路。
過去做網站，OG（Open Graph）Card 的用途很單純：「分享到 Facebook 時讓預覽好看」。AI 時代有了新意義——AI 模型在抓取網頁時，OG meta 是優先讀的元素之一。OG meta 是 客製化網頁設計 中最容易被低估、卻直接影響 AI 第一印象的設定。
寫得好的 OG 不只讓社群分享漂亮，更直接影響 AI 對你網頁的「第一印象」。
OG Card 的雙重角色
| 用途 | 對象 | 影響 |
|---|---|---|
| 社群分享預覽 | Facebook、LinkedIn、Slack、Discord | 點擊率 |
| 網頁快速摘要 | AI 模型、搜尋引擎 | 理解準確度 |
第二個用途是這幾年才被重視的——AI 在處理網頁時，OG 提供「長度可控、格式標準的摘要」，比讀整個 HTML 高效得多。
OG meta 完整範例
<head>
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="Schema.org 結構化資料完整指南">
<meta property="og:description" content="網頁設計師必懂的 7 種 Schema 標記，從 Organization 到 FAQPage，附完整 JSON-LD 範例與實作建議。">
<meta property="og:image" content="https://example.com/og/schema-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/insights/schema-guide">
<meta property="og:site_name" content="元伸科技 OZ Champ">
<meta property="og:locale" content="zh_TW">
<!-- 文章專屬 -->
<meta property="article:published_time" content="2026-04-28T10:00:00+08:00">
<meta property="article:modified_time" content="2026-04-28T10:00:00+08:00">
<meta property="article:author" content="元伸科技">
<meta property="article:section" content="網頁設計">
<meta property="article:tag" content="Schema.org">
<meta property="article:tag" content="AI-Ready">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Schema.org 結構化資料完整指南">
<meta name="twitter:description" content="7 種 Schema 標記完整解析">
<meta name="twitter:image" content="https://example.com/og/schema-guide.png">
</head>
設計重點
og:title
- 60 字內（手機顯示限制）
- 與 H1 對齊但可以更精煉
- 不要塞關鍵字，要寫成「使用者讀了想點」的句子
| ❌ | ✅ |
|---|---|
| 網頁設計｜AI-Ready｜Schema｜SEO｜OG Card｜元伸 | Schema.org 結構化資料完整指南 |
| 我們是元伸科技 | 24 年深耕 · AI-Ready 智慧網站專家 |
og:description
- 100-150 字（中文）
- 第一句就講清楚這頁是什麼
- 包含核心關鍵字但不刻意
- 避免廣告詞（「最棒」「第一名」）
og:image
最重要的視覺元素。要求：
- 1200×630 像素（1.91:1 比例）
- 檔案 < 1MB
- 文字必須夠大（手機縮圖仍可讀）
- 對比強（白底黑字、深底亮字）
- 含品牌 Logo 與標題（圖片內容呈現原則可參考 圖片與 alt 文字的 AI 友善設計）
實作建議：
- 動態產生 OG：每篇文章自動產生客製化 OG 圖
- Vercel/Cloudflare 提供 OG 圖片動態產生 API
- 元伸實作：每篇 Insights 文章用 SVG 範本動態生成 OG
og:type
用標準值，不要自創：
| 值 | 用途 |
|---|---|
website |
首頁、列表頁 |
article |
部落格、Insights 文章 |
product |
商品頁 |
book |
書籍 |
profile |
個人檔案頁 |
video.movie |
影片 |
選對 type 後可加對應子欄位（如 article 加 article:author、article:published_time）。
Twitter Card
主流類型：
summary：小圖（120×120）+ 標題 + 描述summary_large_image：大圖（1200×630）+ 標題 + 描述app：App 推廣player：影片或音訊
幾乎所有情境都用 summary_large_image，視覺衝擊最強。
AI 友善的 OG 寫法
對比兩個寫法：
<!-- ❌ 給人看的廣告詞版 -->
<meta property="og:title" content="元伸科技 - 您最值得信賴的網頁夥伴">
<meta property="og:description" content="豐富的經驗與專業的團隊，提供最棒的網頁設計服務，立即聯絡我們！">
<!-- ✅ 給 AI + 人都看得懂的精準版 -->
<meta property="og:title" content="AI-Ready 智慧網站 - 元伸科技 24 年深耕">
<meta property="og:description" content="2002 年成立的網頁設計公司，3,000+ 企業實績。專注於可被 ChatGPT、Claude、Google AI 推薦的智慧網站建置。">
第二版含具體數字（24 年、3,000+）、明確服務（智慧網站建置）、目標 AI（ChatGPT、Claude、Google AI）——AI 讀完立刻知道這是什麼公司、做什麼。
動態產生 OG 圖的進階技巧
每篇文章手動做 1200×630 OG 圖太累。動態產生才是長期解法。
方案 1：Vercel OG（免費）
// /api/og.tsx (Next.js)
import { ImageResponse } from '@vercel/og';
export default function handler(req) {
const { title } = req.query;
return new ImageResponse(
<div style={{ /* 設計版面 */ }}>
<h1>{title}</h1>
</div>,
{ width: 1200, height: 630 }
);
}
每篇文章自動產生符合品牌風格的 OG 圖。
方案 2：Cloudflare Workers
類似 Vercel OG，但跑在 Cloudflare CDN，速度更快、免費額度更大。
方案 3：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 是完整 URL（含 https://）
- og:site_name 一致
- og:locale 正確（zh_TW / en_US）
- 在 Open Graph Debugger 驗證通過
結語：給 AI 看的不只 Schema，還有 OG
過去把 OG 當成「社群分享的視覺」，現在要把它升級為「AI 與人類都讀的網頁摘要」。寫得好，AI 對網頁的第一印象就好；寫得差，再好的內容也輸在起跑點。
元伸科技為客戶建置時，OG 設計與 Schema 標記是同一階段的工程——兩者都是「讓 AI 看懂網頁」的多層理解網路。延伸閱讀可參考 Schema.org 結構化資料完整指南 與 解決方案頁。
