官網 Open Graph (OG) 標籤設計完整攻略：中小企業如何讓網址在 LINE、Facebook 分享時自動跳出漂亮的預覽卡
把網址貼到 LINE 群組只跳一條光禿禿的連結？OG 標籤教你一次設好，分享出去自帶圖文預覽卡，讓每次轉發都是免費的再行銷。
網址貼到 LINE 群組，只有一條光禿禿的連結？
身為中小企業老闆，你一定遇過這個畫面：花了好幾萬做的官網，把網址貼到 LINE 群組想分享給朋友，結果出來的只是一條冷冰冰的藍色連結，沒有圖、沒有標題、沒有任何描述。對手公司一貼，馬上跳出一張漂亮的預覽卡片，有 Logo、有文案、有產品照，一眼就讓人想點。
這個差距，不是運氣，也不是 LINE 偏心，而是你的官網少設定了一組叫做 Open Graph 標籤（OG Tag）的東西。今天這篇就把這件事從頭講清楚：什麼是 OG 標籤、為什麼一定要做、怎麼做才不會踩雷，最後給你一份可以直接交給工程師的檢查清單。
Photo by Mariia Shalabaieva on Unsplash
什麼是 Open Graph 標籤？三句話講完
Open Graph 是 Facebook 在 2010 年推出的一套網頁標記規範，後來被 LINE、Twitter（X）、Slack、Discord、WhatsApp、Threads 等幾乎所有社群平台採用。它的工作只有一件事：當有人把你的網址貼到對話框，平台抓你網頁原始碼裡的 <meta property="og:..."> 標籤，組成一張預覽卡片給其他人看。
講白話：OG 標籤就是「網址被分享時，自動跳出來的那張小卡片」。卡片上的標題、描述、圖片，全都由你在網頁原始碼裡寫的 OG 標籤決定。沒寫，平台只好抓網頁第一句話和隨便一張圖湊；寫得爛，分享出去丟臉；寫得好，分享一次抵廣告貼三次。
為什麼中小企業一定要做 OG？三個你會在意的理由
1. LINE 是台灣中小企業的命脈
台灣老闆談生意、發報價、推產品，最常用的就是 LINE。你寄一個官網連結給客戶或群組，LINE 會自動抓 OG 標籤生成預覽卡。沒設定的話客戶看到一條乾連結，點擊率直接打七折；設定好之後，那張預覽圖就是免費的「再行銷廣告」，每個被轉發的對話框都在替你曝光。
2. Facebook、Threads、IG 限動分享都用同一套
不管你是經營粉專、發 Threads、放 IG 限動連結貼紙，背後抓的都是 OG 標籤。一次設定好，所有平台一起受惠。就算你沒在做社群行銷，你的客戶幫你轉發時，也會用到。
3. SEO 雖然不直接加分，但點擊率會說話
OG 標籤本身不是 Google 排名因素，但它影響的是「社群曝光帶回來的流量」和「分享連結的點擊率」。Google 早就把「使用者行為訊號」納入排名考量，分享多、點擊高，間接幫排名加分。更別說，OG 標籤裡用到的 og:title、og:description，跟 SEO 用的 Title Tag、Meta Description 是邏輯一致的，做 OG 等於順手把 SEO 也整理了。
Photo by Campaign Creators on Unsplash
必備的五個 OG 標籤，缺一不可
OG 規範可以寫到 30 幾個欄位，但對中小企業來說，先把這五個做到位就贏 90% 的對手了。每個標籤都放在網頁 <head> 區塊裡，格式如下：
og:title — 預覽卡的大標題
<meta property="og:title" content="奧隆股份有限公司｜中小企業官網與客製化系統" />建議 30 到 60 個中文字以內。重點是「一眼看懂你是誰、能幫客戶解決什麼」。不要塞滿關鍵字，那是給機器看的；OG 標題是給真人看的，要有說服力。如果這個值留空，平台會抓 <title> 標籤，但你失去精準控制的機會。
og:description — 預覽卡的副標
<meta property="og:description" content="專為中小企業打造 WordPress 官網、預約系統、打卡系統，從 SEO 到內部數位化一條龍。" />60 到 120 個中文字最理想。重點：把產品、目標客群、差異點塞進去。「我們是做什麼的、為誰做、為什麼比別人好」，三件事一句話講完。不要寫成廣告詞「最專業、最頂尖」，台灣人對這種文案已經疲乏，反而會跳過。
og:image — 預覽卡的圖（最重要的一個）
<meta property="og:image" content="https://oron.com.tw/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />這是整組 OG 裡最致命的一個。沒設好，分享出去要嘛沒圖、要嘛抓到頁尾一張產品照、要嘛被裁切到只剩一個角落。設定原則：
- 尺寸固定 1200 x 630 px：這是 Facebook、LINE、Threads 共通的最佳比例（約 1.91:1）。其他尺寸會被自動裁切，常常裁到關鍵文字消失。
- 格式用 JPG 或 PNG：先別用 WebP 或 AVIF，部分老舊版本的爬蟲還抓不到，會直接放棄。
- 檔案大小控制在 1 MB 以下：太大的圖 LINE 會直接放棄抓取，預覽卡就空了。
- 用絕對網址：一定要寫
https://yourdomain.com/...，不能寫/og-image.jpg，相對路徑很多平台不支援。 - 放可讀文字：圖上最好放公司 Logo 加一句標語，光放一張產品照效果差很多。
og:url — 標準網址
<meta property="og:url" content="https://oron.com.tw/" />告訴平台這個頁面的正規網址是什麼。重點是：如果你的網站同時可以用 www 和不帶 www 開啟、或同時有 http 和 https 版本，要在這裡指定唯一的正規網址，避免分享計數被分散到多個變體上。
og:type — 頁面類型
<meta property="og:type" content="website" />首頁、服務頁、聯絡頁用 website；部落格文章用 article；產品頁用 product。寫對了，部分平台會根據類型優化呈現方式，例如文章類會多顯示發布日期跟作者。
進階加分項：把 LINE 跟 X 的版本也補齊
LINE 的 LIFF 環境跟一般網頁分享略有不同，X（前 Twitter）則自己定義了一套 twitter: 標籤。實務上我會建議多補這幾組，多花 10 分鐘做完整：
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="同 og:title" />
<meta name="twitter:description" content="同 og:description" />
<meta name="twitter:image" content="同 og:image" />summary_large_image 是讓 X 用大圖卡的關鍵，不寫的話會變成迷你的小圖縮圖，視覺差很多。LINE 雖然抓 OG 標籤，但有些情境（例如 LIFF）會優先抓 twitter:，補上一份保險。
實戰：每一頁都該有專屬的 OG 設定
很多中小企業官網犯的一個錯：全站只在首頁設一組 OG，所有內頁分享出去都長一樣。客戶分享你的「服務頁」、「部落格文章」、「產品頁」，預覽卡卻全顯示首頁的標題和圖，效果直接砍半。
正確做法是每一頁都動態產生自己的 OG：
- 首頁：公司全名 + 主打服務 + 整體形象圖
- 服務頁：服務名稱 + 一句賣點 + 對應的視覺圖
- 部落格文章：文章標題 + 文章摘要 + 文章封面圖
- 產品頁：產品名稱 + 規格亮點 + 產品照
- 案例頁：客戶公司名 + 一句成果 + 案例代表圖
WordPress 用戶可以裝 Yoast SEO 或 Rank Math 外掛，後台每篇文章下方都會跳出 OG 編輯欄位，直接打字就好。客製化網站則要請工程師在 template 裡讀資料庫欄位，動態組出每頁的 OG。一次工，受用五年。
驗證工具：別讓 OG 設了卻沒效
OG 設完一定要驗證，不然永遠不知道對不對。三個免費工具直接用：
- Facebook Sharing Debugger（
developers.facebook.com/tools/debug）：貼網址進去，看 FB 抓到的 OG 內容對不對。改完一定要按「Scrape Again」清快取，否則你看到的還是舊版。 - LINE Inspector（
poker.line.naver.jp/）：LINE 官方的 OG 預覽工具，貼網址就能看到 LINE 對話框會跳什麼卡片。 - OpenGraph.xyz：一次預覽 Facebook、Twitter、LinkedIn、Discord 等多平台的卡片長相，做完一輪檢查最快。
建議官網上線、改版、或每篇新部落格文章發布後，都拿這三個工具跑一次。OG 設定有快取機制，平台抓過一次就不會主動更新，你不主動清快取，三個月後改了標題還是舊的在跑。
結語：花一個下午，省下一年廣告費的零頭
Open Graph 標籤不會讓你的網站變漂亮，也不會直接讓 Google 排名暴漲。它做的事很簡單：讓你的網址在被分享出去的瞬間，自帶一張會說話的小卡片，幫你做免費宣傳。
對中小企業老闆來說，最划算的數位投資，往往不是燒大錢做活動，而是把這些「網站基本盤」一次做好。OG 設定一個下午就能做完，但它會在接下來每一次客戶轉發、每一次粉專分享、每一次員工貼連結時，持續替你工作。
今天的行動建議很簡單：打開 Facebook Sharing Debugger，把你的官網首頁網址貼進去，看看跳出來的卡片是不是你想要的樣子。如果不是——你已經知道該怎麼開口跟工程師說了。