Open Graph Meta 標籤產生器，最佳化網頁連結在社群平台預覽效果

Open Graph protocol 是 Facebook 制定的協議，在網頁原始碼加入 Meta 標籤，以描述該頁面的相關資訊，例如類型、標題、摘要、網址和縮圖，雖然說有沒有設定 OG 標籤並不會影響到搜尋結果排名（不屬於 SEO 的排序因素），但在社群網站、即時通訊軟體上可以獲得更好的顯示效果，試想當看到的鏈結有完整的標題、說明和圖片時是不是也會提高點擊進入的機會呢？

大部分的建站服務都已經整合 Open Graph Meta 標籤，會自動將相關內容帶入頁面，使用者不需要手動設定，其他像 WordPress 也可以透過外掛程式做到（例如 Rank Math、Yoast SEO），若你想要手動設定 OG 標籤，也可以試試看接下來要介紹的工具。

Open Graph Meta Tag Generator 是 imgsrc 提供的線上工具，主要功能是依照使用者設定的內容來產生對應的網頁 OG 標籤，有助於完善網頁在社交平台的呈現效果，其中還會有針對 X（舊稱 Twitter）提供的 Meta 標籤，如果在製作網頁時需要用到 Open Graph 標籤，只要將產生的標籤複製、貼回到網站即可帶入使用。

其他我曾經介紹過的同類型工具，有需要也可以試試看：

• Meta Tag Generator 網站資訊標籤產生器，為搜尋媒體和社群網路最佳化
• Metatags.io 線上預覽、編輯產生對應的 Meta 標籤

Open Graph Meta Tag Generator
https://imgsrc.io/tools/open-graph-meta-tag-generator

使用教學

STEP 1

開啟 Open Graph Meta 標籤產生器後會看到各項欄位、預設值，將預設資料刪除後輸入自己的資訊，這項工具支援中文內容，可以產生正確的 OG 標籤，在類型部分有像是網站、文章、書籍、個人資料、音樂或影片等等。

STEP 2

例如我選擇的類別是「網站」，依序將網頁標題、描述、網址、縮圖網址、縮圖尺寸大小都輸入產生器，右側就會有對應的 OG Meta 標籤。

STEP 3

點選右上角「複製」將產生的 Open Graph 標籤複製到剪貼簿，返回網頁後將原始碼貼在標籤內即可，透過另一個 Open Graph Debugger 可以進行測試、預覽一下該網頁在社群媒體的顯示樣式。