OG 圖片尺寸、meta 標籤與範例

OG 圖片，就是有人在 Facebook、LinkedIn、X、Slack 或 iMessage 分享你的連結時，顯示出來的那張圖。你可以用 Open Graph 協定的 og:image meta 標籤來設定它。如果沒有設定，社群平台會從頁面中隨便挑一張圖，或是完全不顯示圖片。

這篇指南會說明在各平台都適用的尺寸、可直接複製的標籤，以及三種為每個頁面生成圖片的做法。

尺寸：1200 × 630

請使用 1200 × 630 像素，比例為 1.91:1。這是主要平台所要求的尺寸：

Facebook 建議至少 1200 × 630，在高解析度螢幕上效果最好。低於 600 × 315 時圖片仍會顯示，但會小很多。檔案大小上限為 8 MB。
LinkedIn 要求 1200 × 627，比例 1.91:1，上限 3 MB。
X 的大型卡片採用 2:1 的比例，尺寸從 300 × 157 到 4096 × 4096 像素，檔案需小於 5 MB。1200 × 630 的圖片在那裡，上下會被裁掉幾個像素。

所以文字和標誌不要貼近邊緣，檔案也請控制在 3 MB 以下。各平台貼文、封面與大頭貼的尺寸，請見社群媒體圖片尺寸。PNG 和 JPEG 在所有平台都能用：照片用 JPEG，平面圖形與文字用 PNG。

Meta 標籤（OG metadata）

Open Graph 標籤就是頁面的 OG metadata：它的類型、網址、標題、描述與圖片。請把這些標籤放在每個頁面的 head 中，而且要放在伺服器送出的 HTML 裡：

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/blog/dark-mode" />
<meta property="og:title" content="We shipped dark mode" />
<meta property="og:description" content="Every screen, both themes, no flash on load." />
<meta property="og:image" content="https://example.com/og/dark-mode.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark mode launch card with the app logo" />

<meta name="twitter:card" content="summary_large_image" />

Open Graph 標籤參考會逐一說明每個標籤、og:type 的各種值，以及選用的標籤。幾個重要的細節：

og:image 要使用以 https:// 開頭的絕對網址。 像 /og/dark-mode.png 這樣的路徑是無效的。
標籤要放在伺服器送出的 HTML 裡。 社群平台的爬蟲不會執行 JavaScript，所以由腳本在瀏覽器中加入的標籤，它們完全看不到。
加上 og:image:width 和 og:image:height。 Facebook 會用這兩個值在第一次分享時直接顯示圖片，不必先下載再量測。
X 在缺少自家 twitter: 標籤時，會改讀 Open Graph 標籤，所以 twitter:card 是你唯一需要的 X 標籤。

好的 OG 圖片長什麼樣子

好的 OG 圖片只有一個任務：讓人在點開頁面之前，就知道這個頁面是什麼。

標題優先。 頁面標題用大字，4 到 10 個詞。在手機上卡片只有幾百像素寬，標題一定要讀得清楚。
一個視覺元素。 標誌、商品照、作者照片或螢幕截圖擇一，不要四個全放。
品牌固定在同一個位置。 每個頁面都使用相同的色彩、字型與標誌位置，讓人在雜亂的動態消息中一眼認出是你。
不要放小字。 在 1200 寬的畫面上，小於約 24 像素的文字，在動態消息裡很難閱讀。

有效的做法：

部落格文章：標題、作者姓名與照片，以及網站標誌。
文件頁面：章節名稱、頁面標題與產品標誌。
產品頁面：商品照、名稱與價格。
新功能發表與更新日誌：功能名稱與一張螢幕截圖。

範本庫裡有 25 個符合這些模式的 OG 範本，可以直接複製使用。

為每個頁面生成一張

手動設計圖片，用在首頁沒問題，免費的 OG 圖片產生器一分鐘就能做好一張。但 300 篇部落格文章，或每週都在變動的產品頁面，就不適用了。要自動化，有三種做法。

1. 用程式碼繪製

像 @vercel/og 和 Satori 這類函式庫，會在收到請求時把 JSX 轉成圖片。如果你是開發者，而且設計很簡單，它們很合適。代價是版面會寫在你的程式碼裡：每次更改字型、顏色或間距，都是一次程式碼修改加一次部署，而且只支援部分的 CSS。

2. 對頁面截圖

為這張圖建一個專用的 HTML 頁面，再用無頭瀏覽器截圖。所有 CSS 都能用，但你得自己執行並擴充瀏覽器。

3. 用網址填入範本

在編輯器裡設計一次圖片，把會變動的部分（標題、作者、照片）設為有命名的圖層。接著為每個頁面組出一個網址，帶著這些圖層的值。Bannerify 的簽章網址就是這樣運作的：

import { Bannerify } from "bannerify-js"

const bannerify = new Bannerify(process.env.BANNERIFY_API_KEY!)

// 在你的伺服器上執行，例如在輸出頁面 head 的時候。
const ogImage = await bannerify.generateImageSignedUrl("tpl_your_og_template", {
  modifications: [
    { name: "title", text: post.title },
    { name: "author", text: post.author.name },
    { name: "avatar", src: post.author.avatarUrl },
  ],
})

然後把網址放進標籤：

<meta property="og:image" content={ogImage} />

接下來會發生這些事：

簽署網址不會發出任何網路請求，所以不會拖慢你的頁面載入。
圖片會在平台第一次請求時生成。之後由快取提供，最長 7 天，命中快取的請求不會計入你的額度。
當你修改設計並儲存範本，它的快取圖片就會被清除，所有頁面都會套用新設計，你不必動到程式碼。
API 金鑰留在你的伺服器上。網址可以放心分享：它含有的是簽章，不是你的金鑰。

簽章網址文件也提供了 Python、PHP 與 Go 的寫法，以及不用 SDK 如何簽署網址。

分享之前先檢查

社群平台會快取它們抓取的內容，通常長達數天，所以貼文發出之前，請先測試頁面：

**免費的 Open Graph 檢查工具**可以一次顯示任何網址在 X、Facebook 與 LinkedIn 上的預覽，列出缺少的標籤，並檢查圖片尺寸。
Facebook 分享偵錯工具會顯示 Facebook 看到的內容，並在你修改頁面後重新抓取。
LinkedIn Post Inspector 對 LinkedIn 做同樣的事。
X 會在撰寫貼文時顯示卡片。把連結貼到新貼文裡，發布前先看一下。
Slack 和 Discord 只要把連結貼到傳給自己的訊息中，就會立刻顯示卡片。

如果圖片沒有顯示，請先檢查這幾點：og:image 的網址是絕對網址，而且能在無痕視窗中開啟；頁面不需要登入；檔案小於 5 MB；你的 robots.txt 沒有封鎖該平台的爬蟲。

試試看

從範本庫複製一個 OG 範本，為會變動的圖層取清楚的名稱，再為每個頁面簽署一個網址。免費方案每月包含 100 次生成與一個範本，命中快取不計次。Automate 方案每月 $29 起，包含 3,000 次生成。詳情請見價格。

如果你的 OG 圖片仍然是手工製作，可以從免費方案開始，先把一種頁面類型（例如部落格文章）搬到範本上。圖片生成 API 的其餘部分，對電子郵件、社群貼文與商品圖片的運作方式也是一樣的。