閱讀時間 4 分鐘
為什麼你的連結預覽看起來壞掉了（以及如何修好）
當你把連結貼到 Slack、iMessage 或 X 時出現空白或錯誤的預覽，幾乎都歸結於少數幾個 Open Graph 標籤。這是檢查清單。
你上線了一個頁面，把連結貼進 Slack，結果只得到一串沒有圖片的裸網址 — 甚至更糟，顯示的是上個月的標題。連結預覽由 Open Graph 和 Twitter meta 標籤驅動，一旦它們缺失或有誤，每個平台都會退而求其次，呈現出很難看的東西。
驅動預覽的標籤
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />常見的元凶
- og:image 使用相對路徑 — 它必須是絕對網址。
- 圖片太小；目標是 1200×630。
- 標籤是在用戶端注入的，所以爬蟲根本看不到。
- 快取送出的是舊的預覽 — 重新抓取以更新它。
OG Image 工具會為每個頁面繪製一張品牌化的卡片，並在你上線前預覽這張卡片在 Slack、iMessage、X 和 LinkedIn 上的展開效果 — 接著技能會把標籤串進你的儲存庫，讓它們在伺服器端渲染。