分享卡片只有一個任務：當有人在動態中看到它時，應該在大約一秒內理解產品的用途。有效的卡片會展示產品的實際運作情況，例如一份已簽署的提案、一個客戶可以確認的提醒，或一個報價價格，而非只是一個漂浮在漸層背景上的 Logo。透過程式碼產生卡片，可以確保它與品牌保持一致，且日後無需設計工具即可修改。
1. 先收集品牌資訊，再寫程式碼
依序閱讀現有的資料：設計文件（DESIGN.md、PRODUCT.md、風格指南）、CSS 變數（globals.css、Tailwind @theme、CSS 自訂屬性）、登陸頁面的標題與副標題，以及 Logo（SVG 元件或檔案）。使用真實的十六進位色碼和實際的顯示字型與內文字型。使用與網站不同字型的卡片會顯得不符合品牌形象。
尋找現有的設定（opengraph-image.*、og.png.*、佈局中的 og:image），並在其基礎上擴展，而不是新增第二個設定。
然後決定卡片上要顯示的模擬內容。詢問使用者，客戶在使用產品後會拿到什麼（一張發票、一封確認郵件、一個儀表板區塊、一張收據），並繪製它。如果不太明顯，用一句話提出一個建議，然後繼續進行，除非使用者反對。
2. 組合卡片
除非使用者另有指示或已有現成卡片，否則從這個版面開始。它在動態中顯示的小尺寸下閱讀效果良好。
| 區域 | 內容 |
|---|---|
| 畫布 | 1200x630。品牌背景，純色或帶有朝向模擬內容的柔和放射狀漸層。 |
左欄，寬約 620 到 660px，內邊距約 60px 0 60px 72px，使用 justify-content: space-between 對齊 | 頂部：Logo 標誌加上 34 到 38px 的文字標記。中間：64 到 76px 的標題，行高緊湊（0.98 到 1.08），字距略為負值。底部：26 到 28px 的單一 muted 副標題。 |
| 右側 | 使用品牌色彩和真實資料的產品模擬圖。傾斜 2 到 4 度，在它後面放一張向另一方向傾斜的強調色背景卡片，並加上柔和陰影，例如 0 24px 48px -20px rgba(0,0,0,0.35)。 |
一些有幫助的小細節：在模擬圖上蓋一個印章或徽章（「已付款」、「已確認」），一個重疊在模擬圖角落的紙條，上面顯示一個關鍵數字，以及在低透明度下的淺色背景線條。
文案：
- 標題是產品的承諾，最好與登陸頁面引導的標題相同。具體勝過巧妙。
- 模擬資料要具體且可信（
$1,510.00、38 張卡片、一個合理的客戶姓名）。像 lorem ipsum 或$XX這樣的佔位文字會讓產品看起來不完整。 - 用強調色標記標題中的一個短語可能會有所幫助。超過一個會稀釋效果。
- 文字要保持大。動態中顯示的卡片通常只有原始大小的三分之一，所以任何小於約 18px 的文字都會消失。
3. 渲染
使用 Satori，它將類似 JSX 的樹狀結構轉換為 SVG，然後柵格化為 PNG。Next.js 內建此功能為 next/og。在其他情況下，將 satori 與 @resvg/resvg-js 搭配使用。關於各框架（Next.js App Router、Astro 以及任何其他靜態網站的純建置腳本）的設定，請閱讀 references/frameworks.md。
Satori 僅支援 CSS 的子集，這些限制是造成大多數失敗的原因：
- 字型必須是真實的 TTF、OTF 或 WOFF 檔案，並在渲染時傳入。WOFF2 無法運作，也沒有系統字型備援。僅載入你使用的兩三種字重。references/frameworks.md 涵蓋了取得檔案的位置。
- 任何具有多個子元素的元素都需要
display: "flex"。否則 Satori 會拋出錯誤，因此預設每個盒子都使用 flex。 - 沒有 CSS grid、沒有 CSS 變數、沒有
calc()。將 literal 色彩放在檔案頂部的一個小型 map 中（const C = { ink: "#1c2128", ... }）。 - 文字會自動換行。留意最後一行單獨出現的單詞，以及文字是否與模擬圖重疊。透過明確分割行（一欄 span）或調整寬度和大小來修正。
whiteSpace: "nowrap"加上flexShrink: 0可以讓價格和明細項目保持在一行。 position: "absolute"在相對定位的 flex 父元素內部可以運作。將其用於背景卡片、印章和紙條。- 內聯 SVG 路徑渲染效果良好，因此重用 Logo 的 SVG 路徑，而不是嵌入其圖片。本地點陣圖影像以 base64 data URI 的形式加入。
4. Alt 文字與標籤
撰寫 og:image:alt 來描述圖片實際顯示的內容，格式為「品牌名稱：模擬內容的說明，以及標題」。例如：「Acme Invoices：一張金額為 $1,510.00 並蓋有「已付款」印章的發票，旁邊是標題：在離開工作現場前收到款項。」
頁面需要以下內容，且必須使用絕對 URL：og:title、og:description、og:image、og:image:width (1200)、og:image:height (630)、og:image:alt、twitter:card 設為 summary_large_image，以及 twitter:image。相對路徑的 og:image 是卡片無法顯示的最常見原因，因為大多數 unfurler 不會解析它。
5. 透過查看來驗證
在宣告卡片完成之前，你必須親眼看過 PNG。
-
啟動開發伺服器，獲取圖片，然後在圖片檢視器中開啟它，或使用你的檔案閱讀工具（如果它能夠顯示圖片）。
-
仔細檢查：孤立的單詞、碰到模擬圖的文字、在畫布邊緣被裁切的陰影、不均勻的內邊距、備援字型（看起來明顯不對勁）以及對比度低的副標題。修正它們並重新渲染，直到一切乾淨。
-
同時檢查標籤和圖片：
python3 scripts/check_og.py http://localhost:3000/ --out /tmp/og-check.png它會列出每個 OG 和 Twitter 標籤，擷取圖片，確認其為 1200x630 且小於 5MB，標記相對 URL 和錯誤的卡片類型，並在出現任何問題時以 exit code 1 退出。開啟儲存的 PNG 以確認它正是你預期的圖片。
-
執行生產建置，確保圖片在那裡仍然可以產生。
-
部署後，針對正式網址執行檢查器。告知使用者 Slack、LinkedIn 和其他平台會快取 unfurl，因此在變更之前分享的連結可能會在一段時間內保留舊的卡片。LinkedIn 的 Post Inspector 可以強制重新整理。
完成後，向使用者提供 PNG 的路徑，並用一個簡短的段落描述版面配置和模擬圖顯示的內容。