網站連結縮圖是把網址貼到社群或通訊軟體時出現的預覽圖，平台會讀取頁面 head 裡的 Open Graph 標籤來產生：og:image 指定縮圖，og:title 與 og:description 提供標題與摘要。依 Open Graph 協定，每個頁面都要有 og:title、og:type、og:image、og:url 四個必要屬性，指定 og:image 時也應該加上描述圖片內容的 og:image:alt。縮圖抓錯或換圖後沒更新，可能是標籤沒設或重複、圖片網址讀不到，或平台仍在使用快取。
縮圖從哪裡來：Open Graph 標籤的運作
網址被貼出去時，平台的爬蟲會抓取這個網址的 HTML，讀取 head 區塊裡的 meta 標籤，再把標題、描述與圖片組成預覽卡片。Open Graph 是原本由 Facebook 建立的公開協定，每個屬性寫成一行 meta 標籤：property 填屬性名稱，content 填屬性值。
也就是說，縮圖不是平台從畫面上「看」出來的，而是讀你寫給它的資料。Meta 的網站管理員指南說明，頁面沒有 Open Graph 標籤時，爬蟲會用內部的判斷方式猜測標題、描述與預覽圖，結果可能是網站標誌、廣告圖，或完全沒有圖片。設定後要檢視網頁原始碼，確認標籤確實出現在 head 裡。
必要屬性與常用的選填屬性
Open Graph 規格把屬性分成必要屬性與選填屬性，圖片另有一組結構化屬性。企業官網常用的整理如下：
| 屬性 | 類型 | 內容 |
|---|---|---|
| og:title | 必要 | 物件顯示的標題；Meta 建議不加網站名稱等品牌字樣 |
| og:type | 必要 | 物件類型，例如 website、article |
| og:image | 必要 | 代表這個頁面的圖片網址 |
| og:url | 必要 | 頁面的標準網址，不帶工作階段或追蹤參數 |
| og:description | 選填 | 簡短的頁面描述 |
| og:site_name | 選填 | 頁面所屬網站的名稱 |
| og:locale | 選填 | 標籤使用的語系，未設定時預設為 en_US |
| og:image:alt | 圖片屬性 | 描述圖片內容的文字，不是圖說 |
| og:image:width、og:image:height | 圖片屬性 | 圖片的寬與高，單位是像素 |
規格允許同一個屬性出現多次，例如放好幾張 og:image，但發生衝突時，由上往下排在前面的標籤優先。佈景主題與外掛同時輸出標籤時，縮圖抓錯可能和這條規則有關。
網站連結縮圖的設定步驟
- 準備圖片：依目標平台的建議尺寸製作，主體放在中央，重要文字不要貼近邊緣，避免被裁切。
- 上傳並取得完整網址：圖片放在公開可讀的位置，og:image 填含 https 的完整網址。
- 寫入四個必要屬性：在頁面 head 加上 og:title、og:type、og:image、og:url，og:url 填這一頁的標準網址。
- 補上選填屬性：加入 og:description、og:site_name、og:image:alt、og:image:width 與 og:image:height。
- 每頁各自設定：文章頁與產品頁用各自的標題與圖片，沒有專屬圖片的頁面才用全站預設圖。
- 用平台工具驗證：把網址貼到平台提供的偵錯工具，確認抓到的標題、描述與圖片都正確。
圖片若放在需要登入的空間，或因防盜連設定拒絕外部讀取，頁面上看得到圖，爬蟲卻抓不到。
Facebook 與 LINE 的縮圖規格
Meta 的分享建議文件指出，圖片寬度至少 1080 像素，在高解析度裝置上顯示效果較好；同時建議用 og:image:width 與 og:image:height 告訴爬蟲圖片尺寸，讓圖片在初次分享時就能正確載入。同一份文件裡的寬度下限與正方形比例，是針對圖片連結廣告的建議，一般分享請以上述說明為準。
LINE 開發者文件說明，聊天室的網址預覽使用網站的 og:title、og:description 與 og:image 三個標籤產生，其他 Open Graph 標籤的資訊不會出現在預覽中；頁面沒有這些標籤時，標題取自 title 標籤，摘要取自 description 標籤或內文，抓不到資訊就不顯示預覽。LINE 文件沒有列出圖片尺寸，請依平台當下規格確認。其他社群平台與通訊軟體同樣依各平台當下規格為準。
換了圖卻沒更新：平台快取怎麼處理
Meta 的文件提到，抓取到的分享內容有固定的更新週期，標準是二十四小時；需要更快更新時，可以把網址貼進 Sharing Debugger（分享偵錯工具），它會重新抓取並更新 Meta 已取得的內容，更新內容的圖片後也建議這樣做。要注意圖片是以網址為單位快取，網址不變就不會更新，所以換圖時要用新的圖片網址，例如換一個檔名，不要只覆蓋同名檔案。LINE 開發者文件沒有說明網址預覽的快取期間與更新方式，請依平台當下規格處理。
另一個要排除的是自己網站的快取。網站或 CDN 的頁面快取若還保留舊版 HTML，平台重新抓取時拿到的仍是舊標籤，所以先清除網站端快取，確認原始碼已是新值，再到平台工具重新抓取。WordPress 的快取層級與清除時機，可以參考WordPress 清除快取的運作原理。
縮圖抓錯或不出現的排查清單
- 標籤是否存在：檢視網頁原始碼，搜尋 og:image，確認在 head 裡，而且只有你要的那一組。
- 是否重複輸出：佈景主題與外掛都輸出 Open Graph 標籤時，排在前面的會優先，保留一個來源即可。
- og:url 是否正確：每一頁都填自己的標準網址，不要整站都填首頁網址。
- 圖片網址能否直接開啟：用無痕視窗打開圖片網址，確認不需登入、沒有轉址到錯誤頁。
- 尺寸標示是否一致：og:image:width、og:image:height 要和實際圖片尺寸相符。
- 爬蟲是否被擋：網站防火牆、地區封鎖或機器人驗證，可能讓平台的爬蟲拿不到頁面。
WordPress 網站的設定位置
WordPress 網站的 Open Graph 標籤由佈景主題或 SEO 外掛輸出，來源規則依各自的設定而定，有些會以文章的精選圖片作為 og:image。使用的外掛若提供社群分享設定，個別文章可以另外指定分享圖、標題與描述；換了佈景主題或新增外掛後，記得確認原始碼裡只剩一組 Open Graph 標籤。精選圖片的尺寸、裁切與站內呈現，請參考WordPress精選圖片的尺寸與分享呈現，這裡不重複說明。
常見問題
網站連結縮圖和精選圖片是同一張嗎？
不一定。精選圖片是網站內部代表文章的圖，連結縮圖則由 og:image 決定。有些外掛會用精選圖片當 og:image，也可以另外指定；兩者的版面比例不同時，另做一張分享圖比較不會被裁切。
og:description 要寫多長？
Open Graph 規格寫的是一到兩句，Meta 文件則說通常兩到四句。可以沿用頁面的描述文字，說明這一頁能解決什麼問題，避免只是重複標題。
可以讓不同平台顯示不同的縮圖嗎？
Open Graph 允許放多張 og:image，但衝突時以排在前面的為準。要針對個別平台指定不同圖片，需看該平台的官方文件是否支援專用標籤，沒有支援就以同一張圖兼顧各平台。
改了標題，分享出去為什麼還是舊的？
平台可能還在使用先前抓取的資料。先確認原始碼裡的 og:title 已更新、清除網站端快取，再用平台提供的工具重新抓取；已經發出去的貼文不一定會跟著改變。
縮圖上可以放文字嗎？
可以，但各平台裁切與縮小的方式不同，文字太小或貼邊容易看不清。文字放在畫面中央的安全範圍內、字數精簡，並用 og:image:alt 另外描述圖片內容。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
如果分享網址時縮圖常常抓錯，可以先挑幾個重要頁面檢視原始碼，確認 Open Graph 標籤是否完整、是否重複。京采的技術 SEO 與網站健檢服務可以協助檢查全站的標籤輸出、圖片網址與快取設定，並整理需要修正的頁面清單。歡迎與我們聯繫，提供網址與分享時看到的畫面，我們會協助找出原因。
