Open Graph（分享預覽）

Open Graph標籤要放哪些內容？

Open Graph標籤是寫在頁面head區塊的簡短說明表，基本的四項是標題・類型・代表圖片・網址。Open Graph通訊協定官方文件（ogp.me）把這四項定為每個頁面都需要的屬性。

再加上說明・網站名稱・語言・圖片說明，預覽會更完整。客人看到的主要是標題・說明・圖片，但其他值也會被服務用來正確理解連結。

這些標籤寫在客人看不到的地方。所以實際傳送連結之前，很難發現有沒有漏掉，最好一定列入上線前的檢查清單。

分享預覽圖片要做多大？怎麼構圖？

最常見的是橫向長方形，比例約1.91:1（例如1200×630）。Meta（Facebook）開發者文件建議使用寬度1080像素以上的圖片，以便在高解析度螢幕上清楚顯示，並建議用標籤一併寫明圖片的寬・高。

每個服務裁切圖片的比例都略有不同。所以店名或重點文字最好避開邊緣，集中在中間比較保險。

在圖片中加文字時，一句十個字左右的短標語就夠了。在群組聊天室裡，預覽看起來比手掌還小，請直接在手機畫面上確認。

圖片檔案也不要太大。分享服務抓取圖片太久的話，預覽可能會缺少圖片。

每個頁面的分享預覽都要不一樣嗎？

是的，常傳給客人的頁面，最好每頁分別設定。所有連結都顯示同一張Logo圖片的話，收到的人點開前根本不知道內容是什麼。

至少首頁、菜單・價格頁、預約頁、活動頁要各自設定。標題寫客人在該頁能得到的內容，圖片挑最能呈現那個內容的畫面即可。

經常發布新文章或商品的店家，很難一一設定。設定成以文章第一張照片或商品主圖自動作為預覽圖片，會很方便。

• 咖啡廳：新品介紹連結使用新品照片，標題「秋季限定栗子拿鐵上市」。
• 美髮店：活動連結使用標題「首次來店客人護髮方案」和店內照片。
• 工作室：課程招生連結使用成品照片，標題「11月週末課程招生中」。
• 網路銷售：商品連結直接顯示該商品照片和商品名稱。

分享預覽的標題和說明要怎麼寫？

分享預覽標題要讓收到的人在點開前就知道能得到什麼。可以和搜尋結果中的頁面標題相同，但考慮到這是在聊天室裡被閱讀的文字，稍微改得像在對人說話也不錯。

說明就像Open Graph官方文件說的，一兩句就夠了。把營業時間・地點・預約方式這類收到的人會想知道的資訊放在前面。預覽中長句容易被截斷。

決定好代表圖片後，也一併寫上圖片說明（og:image:alt）。Open Graph文件也建議這麼做，使用螢幕報讀軟體的人也能知道圖片內容。

比起只重複店名的標題，能讓收到連結的人看出要做什麼的標題，更能給出點開的理由。例如與其寫「〇〇工作室」，不如寫「〇〇工作室・11月課程時間表」。

• 標題範例：「咖啡廳〇〇・延南洞手沖，每天10點~22點」
• 說明範例：「窗邊座位寬敞的手沖咖啡廳。咖啡豆也可以在店內購買。」
• 不理想的範例：標題「首頁」、說明「歡迎光臨」這種看不出是什麼店的文字

分享預覽沒更新或顯示異常時，要依什麼順序檢查？

大多是標籤漏掉、圖片網址有問題，或服務還記著舊的預覽。依照以下順序檢查，就容易找到原因。

Meta（Facebook）說明，用分享偵錯工具重新抓取，就不必等預設的更新週期（約24小時）。KakaoTalk也可以在Kakao開發者網站的分享偵錯工具做同樣的事。

如果同一個連結要傳到多個服務，請在每個服務各確認一次。即使讀取同樣的標籤，各服務裁切圖片的方式和顯示字數也可能不同。

1. 01確認該頁面是否真的有og:title・og:image標籤。
2. 02確認圖片網址是否是以「https://」開頭的完整網址。
3. 03把圖片網址直接貼到瀏覽器，確認不用登入就能打開。
4. 04確認圖片檔案不會過大。
5. 05把網址貼到Meta分享偵錯工具或Kakao分享偵錯工具，重新抓取預覽。
6. 06用KakaoTalk「傳給自己」再傳一次，確認結果。

Open Graph最常犯的錯誤有哪些？

最常見的錯誤，是每個頁面都放同樣的標題和Logo圖片。雖然有設定，但每個連結都沒有差別，分享時無法給人點開的理由。

換了圖片卻沒改檔名，服務有時會繼續顯示舊圖片。重新製作圖片時，連檔名也一起改掉比較保險。

分享預覽不只用在老闆傳的連結，客人傳給朋友的連結也一樣會用到。那是客人幫您宣傳的時刻，至少首頁和預約頁一定要設定好。

關於Open Graph，要問製作公司什麼？

分享預覽在上線後修改很麻煩，建議在設計稿階段就問以下四件事。

• 每個頁面可以分別設定標題・說明・圖片嗎？
• 發布新文章或商品時，預覽圖片會自動設定嗎？
• 會直接在KakaoTalk上確認分享預覽嗎？
• 之後老闆可以在管理後台自己更換預覽嗎？