繁體 ▾
Free, Fast & Secure Online Tools
有人把你的連結貼進 Slack、iMessage、LinkedIn、WhatsApp 或 Facebook 時，會跳出一張帶圖的預覽卡。那張圖叫 Open Graph 圖片，而多數網站都設錯了，卻沒有人會告訴他們——因為頁面本身看起來好好的。
1200 × 630 像素。比例是 1.91:1，Facebook、LinkedIn 和多數連結預覽系統都是照這個比例設計的。
你還會看到其他數字：
用 1200 × 630。它高過所有下限，是最常見版面的原生比例，縮到別處也乾淨。
這是造成大部分麻煩的誤解。預覽圖是宣告出來的，寫在頁面 head 的一個標籤裡：
<meta property="og:image" content="https://example.com/img/card.jpg">
你什麼都不宣告，每個平台就各自猜。而猜出來的結果很糟：頁首的 logo、一個圖示、一個追蹤像素、一則廣告，或者什麼都沒有。不同平台猜法不同，所以同一條連結在 Slack 和 LinkedIn 上長得不一樣。
值得完整宣告的一組：
og:image——絕對網址。這是最常見的失敗；像 /img/card.jpg 這樣的相對路徑在你瀏覽器裡沒問題，對每一個預覽爬蟲都失效。og:image:width 和 og:image:height——讓平台在還沒下載檔案前就先留好位置。og:image:alt——描述文字，給螢幕閱讀器用。og:title 和 og:description——卡片上的文字。twitter:card 設成 summary_large_image——沒有它，就算你的圖完美無缺，X 還是顯示小方塊版面。你設計一張圖，每個平台裁得都不一樣。
你沒辦法同時精確滿足所有平台。你能做的是把中央當成唯一可靠的區域。把主體和所有文字放在置中約 1000 × 520 的框內，外圈只承載背景。任何必須在方形裁切下存活的東西，得待在中間的 630 × 630 裡。
一張 1200 像素寬的圖，在桌機動態牆上顯示約 500 像素，在手機聊天列表裡更小。那是大約 40% 的縮減——而且還沒算裁切。
所以 OG 圖上的文字必須比它在你設計軟體裡看起來的大得多。一個好檢查法：把 1200 × 630 的輸出縮到 500 像素寬，然後看。如果你得湊近看，就是太小了。實務上這意味著幾個字的大標題配上非常大的字級，而不是一個句子。
而且記得卡片下方已經用真實文字顯示了你的 og:title。在圖裡重複同樣的字是浪費空間——用那張圖講標題沒講的事。
平台抓一次你的 OG 圖就快取起來，有時候存很久。後果常常讓人措手不及：你修好了圖、重新分享連結，出現的還是舊的那張。
兩個可靠的應對：
全站共用一張 OG 圖是常見的偷懶做法。它比沒有好——至少阻止了平台亂猜——但你分享出去的每一條連結長得都一樣，讀者完全看不出自己要打開的是什麼。
每頁一張效果好得多，而且不必手工做。一個合理的折衷是做模板：固定的背景和 logo 位置，把該頁自己的標題算進去。這樣生產成本低，又讓每條連結的卡片都說了具體的事。
https://。robots.txt 被禁、藏在登入後面，或由會擋未知 agent 的主機提供，卡片就是空的。twitter:card。圖沒問題，只是版面變小——很容易看過去而沒發現。og:image 用絕對網址——相對路徑是第一名的失敗原因twitter:card = summary_large_image，否則 X 顯示小卡