使用方式
- 輸入您網頁上使用或預計使用的 og:title 和 og:description。
- 貼上 og:image 的完整 URL。工具會載入圖片並回報實際像素尺寸。
- 新增網頁 URL 或網域，比較大型和小型卡片預覽，並修正任何警告。
運作方式
有人分享連結時，多數社群平台和聊天 App 會擷取網頁並讀取其中的 Open Graph 標籤：og:title、og:description、og:image 和 og:url，接著建立預覽卡片。寬高比約為 1.91:1 的寬幅圖片通常會顯示為圖片在上方的大型卡片；尺寸較小或正方形的圖片則常會顯示為文字旁附有縮圖的小型卡片。
這項工具會顯示兩種通用卡片樣式，協助您判斷文字長度和圖片構圖。瀏覽器載入圖片後，工具會檢查圖片的原始尺寸：小於 200 × 200 px 時，許多 App 會略過圖片；小於 600 × 315 px 時，通常會採用小型版面；若比例與 1.91:1 相差過大，圖片就可能會被裁切。普遍建議使用 1200 × 630 px，因為在高像素密度的螢幕上也能保持清晰。
預覽無法完全呈現特定 App 實際顯示的樣子。各 App 顯示標題和說明的行數不同，有些會忽略說明；而且多數平台在首次分享後會將預覽快取一段時間，因此您修改標籤後，內容可能不會立即更新。許多平台都有自己的除錯工具，可用來重新整理快取。
範例
將螢幕截圖用作 og:image
一張 1440 × 900 的螢幕截圖，比例為 1.6:1。工具會提示比例不符：在大型卡片中，圖片上下方可能會被裁切。另存為 1200 × 630 的版本，就能避免意外裁切。
只使用標誌作為圖片
180 × 180 的標誌小於 200 × 200 px，因此許多 App 不會顯示圖片。建議改用包含標誌的較大寬幅橫幅圖片。
檢查標題長度
90 個字元的 og:title 在大型卡片預覽中會換成三行。縮短至約 60 個字元，在多數 App 中看起來會更整齊。
常見問題
為什麼我的連結在 Facebook、LinkedIn 和 X 上看起來不一樣？
各平台的卡片版面、裁切方式和文字長度限制都不同，有些會顯示說明，有些則不會。這項預覽僅為通用示意，並非任何平台的實際設計。
我已變更 og:image，為什麼還是顯示舊圖片？
平台會快取連結預覽。您可以使用該平台的分享除錯工具重新擷取網頁，或等候快取到期。變更圖片檔名也有幫助。
可以使用 SVG 或 WebP 圖片嗎？
多數平台不支援 SVG。許多 App 支援 WebP，但並非全部；使用 JPG 或 PNG 最穩妥。
為什麼工具無法載入我的圖片？
這個 URL 可能需要登入、指向 HTML 網頁而非圖片，或是伺服器封鎖了其他網站的請求。如果瀏覽器無法在此載入圖片，社群平台的爬蟲也可能無法載入。
隱私權
您輸入的文字會保留在瀏覽器中。檢查圖片時，瀏覽器會直接向您輸入的 URL 發出請求（不傳送 referrer），因此該伺服器會收到一般的圖片請求。任何資料都不會傳送至 TIG Tools。