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

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 標籤,只要將產生的標籤複製、貼回到網站即可帶入使用。

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

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

使用教學

STEP 1

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

Open Graph Meta Tag Generator

STEP 2

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

Open Graph Meta Tag Generator

STEP 3

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

Open Graph Meta Tag Generator

值得一試的三個理由:

  1. 依照使用者輸入的內容產生 Open Graph 標籤,複製貼上即可使用
  2. 讓網頁在社群網站或即時通訊軟體獲得更好的預覽效果
  3. 對應的 Meta 標籤亦可使用於 X(舊稱 Twitter)
分享本文