Open Graph 與 Twitter Card 在 AI 時代的新意義

老實說，過去做網站，OG（Open Graph）Card 的用途很單純：「分享到 Facebook 時讓預覽好看」。AI 時代有了新意義：AI 模型在抓取網頁時，OG meta 是優先讀的元素之一。OG meta 是 客製化網頁設計 中最容易被低估、卻直接影響 AI 第一印象的設定。

實務上跟客戶聊到 OG，老闆最常踩的坑就是「分享預覽圖隨便放公司 Logo 就好」，結果 AI 抓網頁時，OG title 寫的是「首頁」、description 一片空白，AI 對網站的第一印象直接歸零。元伸 24 年來看過太多這種案例。

寫得好的 OG 不只讓社群分享漂亮，更直接影響 AI 對你網頁的「第一印象」。

OG Card 的雙重角色

第二個用途是這幾年才被重視的：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 對齊但可以更精煉
• 不要塞關鍵字，要寫成「使用者讀了想點」的句子

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

用標準值，不要自創：

選對 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 對網頁的第一印象就好；寫得差，再好的內容也輸在起跑點。

元伸 24 年來為客戶建置時，OG 設計與 Schema 標記都是同一階段的工程：兩者都是「讓 AI 看懂網頁」的多層理解網路。我會建議所有 AI-Ready 升級案，OG 與 Schema 要一起做、不要分開排期。延伸閱讀可參考 Schema.org 結構化資料完整指南 與 解決方案頁。

需要進一步聊聊 OG 體檢、Schema 規劃或整體 AI-Ready 升級方向，歡迎來電。