OG 圖片生成器

OG 圖片生成器 是做什麼的？

先理解你的程式碼庫，再利用 Playwright 和你現有的元件，為每個路由生成真實且符合品牌的 Open Graph 圖片。

理念：真實優先於模板

在生成 OG 圖片之前，請詢問：

• 這個網站的品牌識別是什麼（顏色、字型、Logo、設計語言）？
• 存在哪些路由/頁面，它們的用途是什麼？
• 哪些元件和資產可以重複使用以維持一致性？
• 哪些頁面類型需要不同的視覺處理？

核心原則：

1. 先研究再生成：在建立任何東西之前，先理解程式碼庫結構、路由和品牌
2. 真實性優先於模板：使用實際的品牌顏色、字型和元件，而非通用的社交卡片模板
3. 上下文感知設計：登陸頁面、文章、產品和文件需要不同的視覺方法
4. 智慧自動化：自動偵測路由並提取品牌資訊，但允許使用者自訂

工作流程

1. 探索與分析

路由發現：

• 分析專案結構以確定框架（Next.js、Astro、React 等）
• 根據框架慣例自動偵測路由：
  • Next.js：app/*/page.tsx 或 pages/*.tsx
  • Astro：src/pages/*.astro
  • React Router：分析路由設定
• 從頁面中提取路由元資料（標題、描述）
• 分類頁面類型（登陸頁、文章、產品、關於等）

品牌提取：

• 尋找 Logo/圖示檔案（優先使用 SVG）
• 從 CSS/Tailwind 設定中提取色板
• 從樣式表或設定中識別主要字型
• 從現有元件中捕捉設計模式

使用 scripts/analyze_codebase.py 自動化探索。

2. 設計策略

根據頁面類型決定適當的佈局：

• 登陸頁面：大膽、簡潔，強調價值主張
• 文章/部落格文章：標題 + 摘要，如相關可包含日期/作者
• 產品頁面：產品名稱、主要功能，如有可能加上視覺元素
• 文件：主題 + 描述，組織/結構化風格
• 關於/公司：品牌優先、專業

佈局原則：

• 充足的留白（避免雜亂）
• 分享時的高對比度以確保可讀性
• 品牌色彩作為點綴，而非主導
• 與網站匹配的字體大小層級
• 1200×630px（標準 OG 尺寸）

3. 生成圖片

基於元件的生成：

• 盡可能重複使用 React 元件以保持一致性
• 使用 Playwright 將元件渲染為圖片
• 套用品牌色彩、字型和資產
• 注入實際的頁面元資料（非佔位符）

技術方法：

1. 建立帶有品牌樣式的最小 HTML 模板
2. 對每個路由，生成該頁面專屬的標記
3. 使用 Playwright 以 1200×630 尺寸截圖
4. 儲存至 public/og/ 或適當的靜態目錄
5. 更新頁面元資料以引用 OG 圖片

使用 scripts/generate_og_images.py 進行自動化。

4. 驗證與最佳化

• 驗證 HTML 中的 OG 圖片元資料
• 使用 OG 預覽工具（opengraph.xyz、LinkedIn Inspector）進行測試
• 確保檔案大小合理（建議小於 200KB）
• 檢查圖片在不同縮放比例下的外觀

特定框架指南

Next.js

App Router：

// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/og/home.png'],
  },
}

Pages Router：

// pages/index.tsx
<Head>
  <meta property="og:image" content="/og/home.png" />
</Head>

動態 OG 圖片：考慮使用 Next.js OG 圖片生成（@vercel/og）來處理動態內容，但為了品牌一致性，建議使用靜態生成。

Astro

---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
  <meta property="og:image" content={ogImage} />
</head>

React SPA

在 public/index.html 中加入 OG 標籤，或使用 react-helmet：

<Helmet>
  <meta property="og:image" content="/og/home.png" />
</Helmet>

應避免的反模式

❌ 通用模板：不要使用忽略網站品牌的現成社交卡片模板

• 為何不好：造成網站與社群分享體驗之間的脫節
• 更好做法：提取實際的品牌色彩和字型，並一致地使用它們

❌ 一刀切：不要對所有頁面類型使用相同的 OG 圖片設計

• 為何不好：錯失了根據上下文適當呈現的機會
• 更好做法：為登陸頁、文章、產品等使用不同的佈局

❌ 佔位符內容：不要使用 "Lorem ipsum" 或泛用文字

• 為何不好：違背了預覽圖片的初衷
• 更好做法：使用來自元資料的實際頁面標題和描述

❌ 過度擁擠：不要塞入過多文字、太多圖片或複雜佈局

• 為何不好：在社群動態中縮放時難以辨識
• 更好做法：專注於 1-2 個關鍵元素，並保留充足留白

❌ 忽略元件：如果已有現成元件，不要從零開始建立 OG 圖片

• 為何不好：破壞了與網站的視覺一致性
• 更好做法：重複使用元件的按鈕樣式、卡片佈局、字體大小

❌ 手動生成：不要逐一手動建立 OG 圖片

• 為何不好：不可擴展，難以維持一致性
• 更好做法：將生成過程腳本化以處理所有路由

變化指南

重要：OG 圖片應根據頁面上下文而變化，而非收斂於單一設計。

可以變化的維度：

• 佈局：置中 vs 靠左對齊、單欄 vs 雙欄、文字 vs 視覺焦點
• 色彩強調：主品牌色 vs 中性色、漸層 vs 純色
• 內容層級：大標題 vs 平衡的標題+描述
• 視覺元素：Logo 大小/位置、裝飾元素、圖示
• 字體排版：尺寸比例、粗細分佈、字型搭配

避免收斂於：

• 所有東西都用相同的漸層背景
• 完全相同的「標題 + Logo」佈局
• 單一字體大小比例
• 固定的 Logo 位置

上下文驅動變化：

• 技術文件 → 乾淨、有組織、以圖示為基礎
• 行銷登陸頁 → 大膽、多彩、以價值為導向
• 部落格文章 → 讀者友善、附帶作者/日期上下文
• 產品頁面 → 強調視覺產品

技術需求

相依套件（按需安裝）：

npm install playwright sharp
# 或者
pip install playwright Pillow

Playwright 設定：

playwright install chromium

檔案結構：

project/
├── public/og/          # 生成的 OG 圖片
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # 生成腳本
    ├── analyze_codebase.py
    └── generate_og_images.py

請記住

OG 圖片是品牌的延伸，而非泛用的社交卡片。

研究程式碼庫以理解設計語言。提取品牌識別。使用實際的元件和內容。建立與網站融為一體、符合上下文的圖片。

當有人分享你的頁面時，OG 圖片應該感覺像是一個自然的預覽——而不是硬套上去的模板。

你有能力創造出精美且與品牌一致的 OG 圖片，強化而非削弱網站的形象。