快速解答
選擇一張 Open Graph 圖片，並在分享前測試連結
大多數頁面建議從 1200 x 630 圖片開始，重要文字與標誌遠離邊緣，使用絕對 HTTPS 圖片 URL，並在平台除錯工具測試最終 URL。此簡易流程能捕捉大部分預覽錯誤。
預覽角色
將 Open Graph 圖片視為頁面資產
Open Graph 圖片非裝飾用，而是爬蟲在社群動態、聊天應用及工作工具建立連結卡片時代表頁面的圖片，應與標題、描述、可見主題及結構化資料圖片相符。
吸引點擊
圖片、標題與描述構成訪客抵達頁面前的第一印象。
應與內容相符
優質預覽圖片應符合頁面標題、可見主題及主要用戶承諾，而非使用通用品牌圖示。
屬於 SEO 資料的一部分
Open Graph 圖片、Twitter 卡片圖片、正規 URL 與 JSON-LD 圖片應描述同一頁面。
需要命名規則
明確的檔名與更新規則可避免陳舊快取及舊活動圖片日後再次出現。
尺寸規劃
選擇能通過實際預覽的尺寸
不同平台對預覽圖片的裁切與快取方式略有差異。1200 x 630 是 Open Graph 預覽的強力預設尺寸，但更安全的做法是以置中安全區設計，並在重要平台測試最終 URL。
| 平台或用途 | 實用圖片規劃 | 注意 | 發佈檢查 |
|---|---|---|---|
| 一般 Open Graph | 以 1200 x 630 作為大型分享圖片的實用預設尺寸。 | 小尺寸圖片可能顯得模糊或以更小縮圖顯示。 | 分享前先在平台除錯工具預覽最終 URL。 |
| Facebook 與 LinkedIn | 除非頁面需要平台專用資產，否則使用相同 1.91:1 風格圖片。 | 邊緣在不同動態版面與裝置上可能被裁切不同。 | 將重要文字與標誌置於中央安全區內。 |
| X 大型卡片 | 使用 summary_large_image 並保持視覺置中；X 支援寬幅大型卡片圖片。 | 卡片被裁切或調整大小時，細小文字與邊緣細節可能消失。 | 設定 twitter:image 並用 X 卡片工具測試。 |
| 聊天應用與工作工具 | 保持檔案小且設計簡潔，因預覽常出現在緊湊視窗中。 | 複雜截圖、冗長標題與低對比度會迅速變得難以閱讀。 | 將最終連結貼入您的目標受眾實際使用的工具。 |
將主要訊息置於圖片中央，邊緣區域風險較高，因動態卡、聊天預覽與手機版面可能裁切不同。
HTML
頁面上線前設定爬蟲所需標籤
Open Graph 標籤應放在 HTML 頁首，使用絕對圖片 URL，宣告寬高，加入有用的替代文字，並保持正規 URL 與用戶實際分享頁面一致。
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| 標籤 | 重要原因 | 常見錯誤 |
|---|---|---|
| og:image | 指向應代表頁面的圖片給爬蟲。 | 使用相對路徑或被登入、重定向或機器人規則阻擋的圖片。 |
| og:image:width / og:image:height | 告知平台圖片尺寸，讓其在抓取與檢查檔案前得知。 | 未宣告尺寸，讓爬蟲自行猜測如何呈現預覽。 |
| og:image:alt | 描述預覽圖片以提升無障礙性，並提供爬蟲更多上下文。 | 重複頁面標題而非描述圖片中可見內容。 |
| og:url | 將預覽連結至應分享的正規頁面 URL。 | 使用追蹤、測試或文化錯誤的 URL 作為永久頁面識別。 |
| twitter:card / twitter:image | 給予 X 明確的大卡指示及可選平台專用圖片。 | 假設 X 平台會與其他平台完全相同地呈現 Open Graph 圖片。 |
若使用 Blazor，Blazor SEO 元資料元件 可將 Open Graph 標籤、Twitter 卡片標籤、正規 URL 與 JSON-LD 元資料整合管理。
設計規則
先為小型動態卡設計
大多數人不會看到完整圖片，而是動態、訊息或預覽窗格中的壓縮卡片。簡潔版面勝出：一個明確主題、清晰對比，且無僅在設計檔可讀的小字。
工作流程
每個重要頁面的簡易工作流程
- 1
撰寫預覽承諾
決定卡片一眼看出的訊息：主題、效益、產品或文章角度。
- 2
依計劃比例製作圖片
預設檔案使用 1200 x 630，並將重要內容置中。
- 3
優化檔案
社交圖片建議使用 JPG 或 PNG，保持檔案適中大小，避免明顯壓縮損壞。
- 4
設定元資料與結構化資料
同時更新 Open Graph 標籤、Twitter 卡片標籤、正規 URL 與 JSON-LD 圖片參考。
- 5
以穩定檔名發佈
使用有意義的檔名，若平台快取可能保留舊版本，替換圖片時請更改檔名。
- 6
測試最終 URL
使用除錯工具檢查公開頁面 URL，確認真實預覽而非僅看原始碼。
工具提示
確定預覽尺寸後使用 PixelPress
當圖片規劃命名最終檔案時，PixelPress 可協助本地轉換 WebP 或 AVIF，保留原始檔案，檢視輸出後更新 Open Graph URL。
除錯
信任預覽前先刷新平台快取
社群平台會快取預覽資料。若更換圖片但 URL 不變，平台可能持續顯示舊預覽。請使用官方工具，必要時更換檔名或加入版本化 URL。
檢查清單
發佈前 Open Graph 圖片檢查清單
文章、產品頁、工具頁或登陸頁上線前使用此清單，能捕捉連結已分享後難以發現的預覽問題。
常見問題
Open Graph 圖片應該多大？
大多數 Open Graph 預覽建議使用 1200 x 630 作為實用預設尺寸，足夠高解析螢幕且接近常見 1.91:1 預覽比例。仍需測試最終 URL，因各平台裁切與快取方式不同。
我可以為每個頁面使用相同的 Open Graph 圖片嗎？
可以，但通常效果較弱。通用品牌圖片總比沒有圖片好，但重要文章、產品頁與工具應有符合該頁的預覽圖片。
為什麼我的舊 Open Graph 圖片仍在顯示？
最常見原因是平台快取。使用 Facebook 分享除錯工具、LinkedIn 貼文檢視器或 X 卡片工具刷新 URL。若舊檔持續出現，請以新檔名或版本化 URL 發佈新圖片。
og:image 與 twitter:image 有何不同？
og:image 是多數平台使用的標準 Open Graph 圖片，twitter:image 則專屬於 X 卡片。若提供 twitter:image，X 會使用該圖片而非回退到 og:image。
JSON-LD 圖片應與 Open Graph 圖片相符嗎？
不必完全相同，但應傳達相同頁面故事。搜尋元資料、Open Graph 標籤、Twitter 卡片與 JSON-LD 不應指向無關或過時圖片。
PixelPress 在 Open Graph 圖片流程中扮演什麼角色？
PixelPress 適用於確定圖片尺寸、檔名與角色後，可協助本地轉檔且保留原始檔案，頁面仍需正確元資料與預覽測試。