👀 Open Graph 預覽怎麼設?FB/LINE/Twitter 分享卡片完整指南(2026)

Q: OG 圖更新了 LINE / FB 還是顯示舊圖?

各平台都有 cache。FB 用 https://developers.facebook.com/tools/debug 重抓,LINE 沒官方工具但約 24h 後會自動更新。緊急可以改 URL 加 ?v=2 強制重抓。

Q: OG image 用本地檔還是 CDN?

一律用「絕對 URL」(https://...)非本地路徑。各平台爬蟲從外部抓,看不到本地檔。建議放 CDN 或 Cloudflare,加速分享預覽載入。

Q: 一頁可以有多個 OG image 嗎?

可以加多個 og:image 標籤,FB 會自動選最大的。但建議只放 1 張主圖避免混亂。

Q: 動態頁面(商品頁)OG 要每頁不同嗎?

是。每個商品頁的 og:title + og:image 應該不同(分別是商品名 + 商品圖),不能全站共用一張。Next.js 用 generateMetadata 動態產出。

Q: OG 描述跟 meta description 一樣嗎?

可以一樣(省事)或不同(更精準)。OG 是「社群分享」、meta description 是「Google SERP」,兩個情境用詞可以微調。

分享連結到 LINE 沒圖、Facebook 顯示亂碼,8 成是 OG meta 沒設好。本文拆解 OG 規格 + 4 平台預覽差異 + AI 工具一鍵生成。

為什麼分享連結沒圖?

你貼自己網站到 LINE 群組,結果出現「網址 / 沒圖 / 標題奇怪」。原因:沒設 Open Graph meta tags。

OG 是 Facebook 2010 創的標準,現在 LINE / Twitter / Slack / Discord 都沿用。沒設等於主動放棄分享的視覺曝光。一個沒圖的分享 CTR 比有圖低 5-10 倍。

OG 標準 5 個欄位

內加:

<meta property="og:title" content="標題(60 字內)">
<meta property="og:description" content="描述(155 字內)">
<meta property="og:image" content="https://yoursite/og.png">
<meta property="og:url" content="https://yoursite/page">
<meta property="og:type" content="website">

圖片規格:1200×630 px(各平台會自動裁切)。重要文字放中間(避免被裁掉)。檔案 < 5MB,用 .png 或 .jpg。

Twitter / X 額外需要 twitter:card、twitter:image(可以跟 OG 共用同一張圖)。

想要實際操作看看？

試試 OG/Meta Tag 預覽器 →

4 平台預覽差異

Facebook:大圖 + 標題 + 描述,圖最大。

LINE:中圖 + 標題 + 標題下顯示網域,描述被吃掉。

Twitter/X:大圖 + 標題 + 描述(類似 FB)。

Slack / Discord:小圖 + 標題 + 描述。

/og-preview 工具:輸入 URL → 即時看 4 平台預覽長什麼樣,字數自動檢查。

常見問題