網頁與驗證

OG 元標籤預覽

免費線上 Open Graph 元標籤預覽工具。釋出前預覽你的頁面在 Google、Facebook、Twitter 和 LinkedIn 上的顯示效果。

免費使用無需註冊在瀏覽器中執行

og:title

og:url

og:description

og:image

Generated meta tags

<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="This is a great description of the page that will appear in search results and social media previews.">
<meta property="og:url" content="https://example.com/my-page">
<meta property="og:image" content="https://placehold.co/1200x630/3b82f6/white?text=OG+Image">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="This is a great description of the page that will appear in search results and social media previews.">
<meta name="twitter:image" content="https://placehold.co/1200x630/3b82f6/white?text=OG+Image">

Google Search Preview

example.com/my-page

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

Facebook / LinkedIn Preview

example.com/my-page

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

Twitter Card Preview

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

example.com/my-page

什麼是 OG 元標籤預覽工具？

Open Graph（OG）元標籤是 HTML 中的 meta 元素，用於控制網頁在 Facebook、Twitter、LinkedIn 和各種即時通訊應用等社交媒體平臺上分享時的展示方式。它們定義了連結預覽中顯示的標題、描述、圖片和網址。本工具允許你輸入 OG 元標籤的值，即時預覽頁面在 Google 搜尋結果、Facebook/LinkedIn 分享卡片和 Twitter 卡片中的顯示效果——無需釋出或部署頁面。正確設定這些預覽對於最大化點選率以及確保內容在分享時呈現專業外觀至關重要。

如何使用 OG 元標籤預覽工具

1在 'og:title' 欄位中輸入頁面標題。建議不超過 60 個字元，以確保在所有平臺上完整顯示。
2在 'og:url' 欄位中新增頁面網址。這是將在預覽中顯示的規範網址。
3在 'og:description' 欄位中編寫吸引人的描述。建議不超過 155 個字元以獲得最佳顯示效果。
4在 'og:image' 欄位中貼上 OG 圖片網址。推薦尺寸為 1200×630 畫素，在各平臺上效果最佳。
5檢視下方的即時預覽，瞭解你的頁面在 Google、Facebook/LinkedIn 和 Twitter 上的顯示效果。