OpenGraph.xyz：快速生成 Open Graph 標籤，提升社群網站預覽效果

OpenGraph.xyz 是一個快速預覽、生成 Open Graph（OG）元標籤的線上工具，簡單來說，這些 Meta 標籤主要用於描述網站在社群媒體或即時通訊軟體上顯示的預覽樣貌，包括略縮圖、標題和說明等資訊，雖然說沒有額外設定一樣會自動抓取網頁內容，但是產生的預覽可能就沒那麼好看，如果花點時間設計好 Open Graph 標籤也有提升網頁吸引力、提升點擊和閱讀量等效果。

之前我有介紹過一些 OG 標籤產生器，例如：

• Open Graph Meta 標籤產生器，最佳化網頁連結在社群平台預覽效果
• Meta Tag Generator 網站資訊標籤產生器，為搜尋媒體和社群網路最佳化
• Metatags.io 線上預覽、編輯產生對應的 Meta 標籤
• Mega Tags 最完整社群媒體 META 標籤產生器，Facebook 社群經營必備

目前大多數內容管理系統應該都有內建 Open Graph 標籤的設定選項，就不用額外加入 HTML 原始碼，若你想生成相關標籤或是預覽網頁在社群網站上的顯示效果，利用 OpenGraph.xyz 就能輕鬆做到。

產生的 Open Graph 標籤不僅適用於 Facebook、X（舊稱 Twitter）、LinkedIn、Discord，在各社群平台或通訊軟體也都有效果，只要是會顯示鏈結預覽的服務應該都支援從 OG 標籤抓取網頁資料，有需要為網頁加入標籤的開發者可以直接使用 OpenGraph.xyz 生成，速度更快，最終將產生的 HTML 原始碼複製到網頁即可。

使用教學

操作步驟

輸入網址並檢查

首先，開啟 OpenGraph.xyz 後輸入要檢查的網頁鏈結，接著點選「Check Website」。

即時編輯與調整

結果頁面就會顯示該網頁在 Facebook、X、LinkedIn 和 Discord 連結預覽樣式，因為免費資源網路社群已經有預先設定好 OG 標籤，在這些社群服務上看起來效果就會很不錯。

從「Edit」欄位可以編輯標題、描述和上傳縮圖（建議尺寸 1200x630px），調整後會即時更新預覽。

複製並應用到網頁上

最後從中間點選「Copy To Clipboard」將生成的 OG Meta 標籤複製剪貼簿，再將原始碼貼上網頁 區塊內即可，產生的標籤會有 Facebook、Twitter 適用的標記，確保在不同服務上都能正確顯示，若有需要也可以自行手動調整一下。

如果設定後發現社群網站的鏈結預覽沒有更新，通常是因為鏈結之前有被分享過，使用以下工具重新抓取鏈結就會更新：

• Facebook: https://developers.facebook.com/tools/debug/
• X（Twitter）: https://cards-dev.x.com/validator
• LinkedIn: https://www.linkedin.com/post-inspector/
• Pinterest: https://developers.pinterest.com/tools/url-debugger/