📌 本文精華摘要商品網址分享到 Facebook 或 LINE 卻出現灰底破圖或半年以前的舊活動圖，問題通常出在網頁的 Open Graph 設定不完整，或是社群伺服器保留了舊快取。只要掌握正確的圖檔比例、標籤結構以及強制清除快取的技巧，就能讓社群分享卡片恢復正常且具吸引力的視覺呈現。
- 社群預覽卡片仰賴網頁內部的 Open Graph 標籤，缺少指定圖檔時系統只能胡亂抓取網頁素材。
- Facebook 官方建議預覽圖尺寸為 1200 × 630 像素，維持 1.91 比 1 比例能避免重要圖文在手機螢幕遭到裁切。
- 更換新圖後若預覽未更新，可善用 Meta 分享偵錯工具強制重新抓取，或在網址後方加上參數化解 LINE 的快取記憶。
電商促銷檔期一到，行銷人員往往花了大把時間排版文案、確認折扣碼，最後把商品連結貼進 Facebook 粉專貼文或 LINE 官方帳號群發，畫面卻瞬間讓人傻眼！跳出來的不是精美主圖，而是一整塊尷尬的灰底空白，甚至抓出半年前檔期的舊 Banner。
很多電商老闆與行銷小編經常詢問：「Liz，為什麼別人的臉書連結出去既清楚又吸睛，我們的連結一貼出去就破圖，甚至抓到幾個月前早就結束的活動圖？」這類狀況不只影響品牌質感，更直接打擊使用者的點擊意願與下單轉化率。
要解決這個困擾，不需要改寫整個網站的架構，但必須先看懂社群平台是怎麼讀取網頁的。
抓不到圖與吐出舊活動的元兇
社群通訊軟體與社群網站都有專門的網路爬蟲。當使用者在對話框或貼文編輯區貼上一串網址，平台的機器人會立刻順著網址爬進頁面，搜尋特定的中繼資料（Metadata），拼裝成包含標題、簡介與縮圖的「連結預覽卡片」。遇到破圖或抓錯圖，問題大多落在兩大盲點：
第一、網頁沒有明確指派門面圖：如果頁面原始碼完全沒有標示這張卡片該顯示哪張圖，Facebook 或 LINE 的爬蟲就只能在網頁裡隨機抓取看起來尺寸合格的圖檔。這正是為什麼系統有時會抓到網站頁尾的小 Logo、付款方式圖示，甚至是側邊欄的廣告。
第二、社群伺服器的快取機制在作祟：社群平台為了節省伺服器頻寬與提升讀取效能，不可能每一次有人貼網址就重新下載一次你的網站圖文。平台抓過一次之後，會把這張卡片的資料暫存好幾天甚至數週，即使你在電商後台換了新的主圖，只要平台的快取尚未過期，它端給使用者的依然是半年前第一次抓到的舊資料。
搞懂網頁門面 Open Graph 必備設定
想掌控連結在社群上的長相，核心就在於 Open Graph 協議（簡稱 OG 標籤）。這是 Meta 早期制定、如今各大主流平台通用的標準。網頁工程師或電商平台後台在設定 SEO 資訊時，頁面原始碼的 HEAD 區塊內必須放入以下三組核心標籤：
1. `og:title`：連結預覽的專屬標題。
2. `og:description`：下方的補充說明文字。
3. `og:image`：指定給社群展示的預覽圖完整絕對網址（必須以 https:// 開頭）。
有些網站雖然填了 `og:image`，但網址寫成相對路徑（例如 `/images/product.jpg`）而非完整的絕對路徑（例如 `https://example.com/images/product.jpg`），社群爬蟲找不到圖檔來源，就會直接吐出空白灰底。同時，圖片放置的伺服器若有設定防盜連機制，或者檔案體積超過平台限制，爬蟲抓取逾時，一樣會導致破圖。
官方推薦尺寸與常見踩雷細節對照
圖片不是隨便塞一張正方形或直式海報就能好看！社群平台的預覽卡片主要是橫向展示，尺寸不對，重要文字就會直接被裁切。| 項目 | Meta 官方標準建議 | 容易踩雷的錯誤設定 |
|---|---|---|
| 建議解析度 | 1200 × 630 像素（最適高畫質呈現） | 低於 200 × 200 像素（會被判定無效）或小於 600 × 315 像素（卡片會縮成邊角小圖） |
| 視覺外觀比例 | 1.91 比 1 橫向矩形 | 直接使用 1 比 1 正方形或直式限動圖，上下兩端重要資訊遭平台強制切除 |
| 檔案大小與格式 | JPG 或 PNG，官方規範上限 8MB（實務建議壓縮在 1MB 內加速讀取） | 使用動態 GIF、WebP 相容性不佳版本，或未壓縮的巨大圖檔造成爬蟲逾時 |
| 進階輔助標籤 | 加入 og:image:width 與 og:image:height 宣告 | 未提供尺寸資訊，使首次分享的使用者因非同步載入而短暫看不到縮圖 |
強制刷新 FB 與 LINE 暫存
確認網站的 OG 標籤與圖檔尺寸都正確無誤後，接下來要對付的就是平台上的「快取」。如果你直接把連結再次貼出，看到的八成還是舊資料。這時必須手動請官方伺服器重新讀取。處理 Facebook 的快取問題
Meta 提供了官方的免費工具「分享偵錯工具」（Sharing Debugger）。
1. 前往 Meta for Developers 的 Sharing Debugger 頁面。
2. 輸入你要檢查的商品或文章網址，點擊「偵錯」。
3. 頁面會顯示目前 Meta 伺服器存取的最後時間與抓到的圖文。
4. 點擊「再次抓取」（Scrape Again）按鈕。這個動作會強迫 Meta 的伺服器重新爬一次你的網頁，更新暫存檔案。
舉例來說，原本的網址如果是 `https://myshop.com/product-a`，你在分享到 LINE 前，可以在網址後方加上一個問號與隨機版本字串，例如 `https://myshop.com/product-a?v=2` 或 `https://myshop.com/product-a?utm_source=line`。
對網站伺服器來說，使用者造訪的依然是同一支商品頁面；但對 LINE 的爬蟲來說，這串帶有新參數的網址被視為「一個從沒看過的全新網址」，因此爬蟲會立刻重新抓取頁面最新設定的 `og:image`，完美繞過舊快取的干擾。
數位行銷往往把大部分心力放在文案撰寫與受眾投放，卻經常忽視這個最基本但也最致命的門面細節。
連結卡片就是使用者點進網頁前看到的第一張海報！當潛在顧客在 LINE 群組或社群動態上看到一張破圖、裁切怪異或主題對不上的卡片，品牌傳遞出去的印象就是不專業。
養成「上線前用偵錯工具跑一次、分享前確認預覽長相」的工作流程，比事後在群組補傳澄清訊息要有效率得多！把技術設定視為行銷資產的一部分，每檔促銷活動的點擊轉換才不會白白漏在起跑線上。
2. 輸入你要檢查的商品或文章網址，點擊「偵錯」。
3. 頁面會顯示目前 Meta 伺服器存取的最後時間與抓到的圖文。
4. 點擊「再次抓取」（Scrape Again）按鈕。這個動作會強迫 Meta 的伺服器重新爬一次你的網頁，更新暫存檔案。
處理 LINE 的快取問題
LINE 在台灣的點擊轉換舉足輕重，但它的快取處理相對麻煩！過往開發者常用的 LINE Page Poker 清除工具目前已不可用。如果發現 LINE 聊天室一直卡在半年前的舊圖，行銷實務上有一個極度有效且最推薦的解法：在網址後方加上參數。舉例來說，原本的網址如果是 `https://myshop.com/product-a`，你在分享到 LINE 前，可以在網址後方加上一個問號與隨機版本字串，例如 `https://myshop.com/product-a?v=2` 或 `https://myshop.com/product-a?utm_source=line`。
對網站伺服器來說，使用者造訪的依然是同一支商品頁面；但對 LINE 的爬蟲來說，這串帶有新參數的網址被視為「一個從沒看過的全新網址」，因此爬蟲會立刻重新抓取頁面最新設定的 `og:image`，完美繞過舊快取的干擾。
連結卡片就是使用者點進網頁前看到的第一張海報！當潛在顧客在 LINE 群組或社群動態上看到一張破圖、裁切怪異或主題對不上的卡片，品牌傳遞出去的印象就是不專業。
養成「上線前用偵錯工具跑一次、分享前確認預覽長相」的工作流程，比事後在群組補傳澄清訊息要有效率得多！把技術設定視為行銷資產的一部分，每檔促銷活動的點擊轉換才不會白白漏在起跑線上。
資料來源與查核
- 發布機構：Meta for Developers；資料名稱：Images in Link Shares；發布日期：2026-06-30；支持說法：支持 Facebook 預覽圖建議尺寸 1200 × 630 像素、最小 200 × 200 像素、比例 1.91:1 以及使用 Sharing Debugger 進行預先快取之規範；查看原始資料
- 發布機構：Meta for Developers；資料名稱：Sharing best practices；發布日期：2022-02-23；支持說法：支持使用 Open Graph 標籤控制爬蟲抓取資料，以及運用 Sharing Debugger 更新暫存內容；查看原始資料
推薦閱讀：
終結年薪百萬？當 Vibe Coding 讓你淪為「AI 藍領」，如何避免成為第一批數位低保戶？
「最快樂國家」芬蘭教孩子先學會說早安？企業必看的人才與AI雙贏法則
「風險厭惡」：穩袋5萬 vs. 賭一把100萬？從「展望理論」測出你是天生創業者還是神級上班族
0 留言