👀 貼連結到 LINE 群卻沒圖沒描述？發文前先把分享卡片看清楚
OG / Meta Tag 預覽器使用教學。把標題、描述、圖片網址填一填，就能同時看到連結分享到 Facebook、LINE、Twitter/X 和 Google 搜尋結果長什麼樣子，字數自動檢查會不會被截斷，最後一鍵複製整份 meta tags 貼進網頁。純瀏覽器本機運算，不上傳、不耗 AI 額度。
為什麼一條連結貼出去的樣子這麼重要
你花三小時寫好一篇商品頁，興沖沖把連結貼進 LINE 群組推廣，結果跳出來的是一片灰底、沒有圖、標題還是那串「首頁 - 未命名商店」。這條連結在群組裡自動廢了一半，因為沒有人會點一個看起來像垃圾訊息的東西。
分享卡片就是連結的門面。同一條網址，貼到 Facebook、LINE、Twitter/X、丟進 Google 搜尋結果，長出來的樣子完全不一樣，字數上限也各自不同。你在瀏覽器打開網頁看得好好的，不代表它被分享出去時也好看。
真正決定分享卡片長相的，是網頁 <head> 裡那幾行 Open Graph 和 meta 標籤。問題是這些標籤藏在原始碼裡，改完要重新部署、清快取、再用平台的偵錯工具驗證，一輪跑下來半小時就沒了。這個工具讓你在寫進網頁之前，就先把四個平台的樣子一次看清楚。
這個工具實際上在做什麼
它做兩件事：即時預覽，加上產生 meta tags。
你在左邊填五個欄位，右邊就同步畫出分享卡片：
- 頁面標題（title）：分享出去最上面那行粗體字
- 描述（description）：標題底下那段說明文字
- 網址（url）：卡片顯示的網域，也會寫進 canonical
- 圖片網址（og:image）：卡片那張大圖的來源連結
- 網站名稱（og:site_name）：LINE、Facebook 卡片上顯示的來源站名
上方可以切換 Facebook、LINE、Twitter/X、Google 四個分頁，每切一個，字數檢查的上限就跟著換。標題和描述欄位旁邊會即時顯示「目前字數 / 該平台上限」加上紅綠燈：綠色代表安全，黃色代表可能被截斷，紅色代表一定超出。
各平台的實際上限差很多。標題部分，LINE 大約 50 字、Facebook 和 Google 約 60 字、Twitter/X 約 70 字；描述部分 LINE 只有約 80 字、Facebook 和 Google 約 155 字、Twitter/X 約 200 字。LINE 是最嚴格的，你在 Facebook 看起來剛好的描述，貼到 LINE 群很可能被切一半。
填完之後，工具會自動組好一整份 meta tags，包含 <title>、description、canonical、Open Graph 那一組（Facebook 和 LINE 共用）、還有 Twitter Card 那一組，按一下就複製，直接貼進網頁的 <head> 就好。全程在你瀏覽器裡跑，沒有上傳、沒有呼叫 AI。
三步驟做出一張不漏氣的分享卡片
步驟 1：填標題和描述，四個平台都切一輪
先填標題和描述。填的時候不要只看一個平台，把上方四個分頁都點一遍，看紅綠燈的變化。
重點看 LINE。因為 LINE 的字數上限最短，只要你的東西主要靠 LINE 群或 LINE 官方帳號推，就以 LINE 的綠燈為準來寫。把最重要的賣點、數字、活動關鍵字塞在標題前 20 個字，就算被截斷也還讀得懂。
不知道怎麼下手可以先點右上角「載入範例」，它會帶入一組手作蠟燭的完整資料，照著改成你自己的最快。
步驟 2：補上圖片網址、網址、網站名稱
og:image 是分享卡片最搶眼的部分。填一個已經上線、公開可存取的圖片網址，建議 1200 × 630 的比例，太小或比例不對，平台會裁切或乾脆不顯示。圖片還沒做好的話，範例裡那串 ecom.atmarketing.tw/api/og 的網址就是一個動態生成 OG 圖的做法，可以參考。
網址填商品頁或活動頁的完整網址，網站名稱填你的品牌名，這兩個會讓卡片看起來更像正規來源，而不是可疑連結。
步驟 3：確認預覽、複製 meta tags 貼進網頁
右邊四個平台的卡片都確認過、標題描述都是綠燈之後，找到 meta tags 那一區，按複製，貼進你網頁的 <head> 裡（如果是 Shopify、Shopline 這類平台，就貼進後台的 SEO 或自訂 header 欄位）。
貼完部署上線後，用各平台的官方偵錯工具強制刷新一次快取（Facebook 分享偵錯工具、LINE 也有類似的），因為平台會把舊的卡片存起來，不刷新它會一直顯示舊樣子。
幾個讓卡片點擊率更高的細節
標題把品牌名放後面。 「有機手作蠟燭 | 溫暖生活」比「溫暖生活 | 有機手作蠟燭」好，因為被截斷時，前面的商品關鍵字比品牌名重要，也對 Google 搜尋結果的點擊更有利。
描述不要重複標題。 標題已經講過的東西，描述就別再說一次。描述拿來補上標題塞不下的資訊：規格、活動、限時優惠、或一句勾起好奇的話。
以 LINE 為底線寫，其他平台自然過關。 因為 LINE 字數最短，只要標題描述在 LINE 是綠燈，貼到 Facebook、Twitter/X 幾乎一定安全。反過來以 Twitter 為準寫就會在 LINE 爆掉。
og:image 一定要是絕對網址。 要用 https:// 開頭的完整網址，不能用 /images/xxx.jpg 這種相對路徑，平台抓不到相對路徑，卡片就沒圖。
同一張圖在不同平台會有不同裁切。 Twitter 的 summary_large_image 和 Facebook 的比例略有差異，重要文字和主體不要壓在圖的最邊緣，留一點安全邊界，四個平台看起來才都完整。
三個實際用得到的情境
情境 A：新商品上架前先驗一次分享卡片
商品頁做好、還沒開始推之前，把標題、描述、商品主圖網址填進來，切到 LINE 分頁確認描述沒被切、切到 Facebook 確認圖有出來。全綠再複製 meta tags 貼進商品頁。這樣第一批貼到社群的連結就是漂亮的，不會白白浪費第一波觸及。
情境 B：檔期活動頁，同一條連結要發四個平台
雙 11 活動頁要同時發 FB 貼文、LINE 群、Twitter/X。用這個工具把四個平台的卡片一次看完，確認每個平台的活動關鍵字（例如「全館 5 折」）都在被截斷之前就出現。一條連結四個平台都好看，省下各平台分開測的時間。
情境 C：舊頁面分享出去很醜，來抓問題
有人回報你的連結貼到 LINE 沒有圖。把那個頁面現有的標題、描述、圖片網址填進來重現一次，通常會發現兩種問題之一：og:image 填的是相對路徑（換成絕對網址就好），或是描述在 LINE 上限之內卻在別的地方被截。用預覽對照就能快速定位，改完再複製新的 meta tags 覆蓋上去。
卡片做好之後，接著做這些
分享卡片是連結的門面，但門面只負責讓人願意點。點進去之後能不能轉換、點擊有沒有被追蹤到，是另外兩件事。
標題還想再打磨的話，把它丟進商品標題 SEO 評分器，看關鍵字布局和字數結構在搜尋端有沒有加分空間，跟這裡的分享卡片相輔相成，一個顧搜尋、一個顧社群。
四個平台的貼文本體還沒寫的話，用社群貼文產生器一次生出四平台版本，貼文配上這裡調好的分享卡片，整套推廣素材就齊了。
連結發出去之後想知道哪個平台帶來的點擊最多，把網址先過一次短連結追蹤器再發，就能看到即時點擊統計，回頭驗證哪個平台的卡片真的比較會被點。