免費轉換器

OG 標籤 生成器

為Facebook、Twitter和LinkedIn生成Open Graph元標籤。免費OG標籤生成器,附即時社群卡片預覽。

0/95
0/200

Facebook預覽

YOURWEBSITE.COM
頁面標題(最多95個字符)
頁面簡短描述(最多200個字符)

生成的HTML

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

關於此工具

開放圖譜 (OG) 標籤控制頁面在社群平台上分享時的顯示方式。 Facebook、LinkedIn、Slack、Discord 和許多其他公司讀取 OG 標籤來建立預覽卡。如果沒有正確的 OG 標籤,共享連結看起來就會損壞——通用圖示、圖像遺失、標題被截斷。有了它們,分享看起來很精緻,點擊率也顯著提高。

標準 OG 標籤:og:title(預覽中顯示的標題)、og:description(文字片段)、og:image(預覽圖像,理想情況為 1200×630)、og:url(規範 URL)、og:type(通常為「網站」或「文章」)。 Twitter 卡標籤位於頂部:twitter:card、twitter:title、twitter:description、twitter:image。當 Twitter 特定標籤不存在時,大多數工具都會回退到 OG。

此產生器根據您的輸入產生一整套 OG 和 Twitter 卡標籤。將產生的 HTML 貼到頁面的 <head> 中。結果是在所有主要社交平台上正確預覽渲染。

為什麼要使用 OG 標籤產生器

沒有 OG 標籤的頁面在分享時看起來很糟糕。空圖像、通用標題、缺少描述——預覽與提要中正確標記的頁面競爭很差。對於內容行銷和連結分享來說,這直接影響點擊率。

手寫 OG 標籤是重複的。每個頁面都需要自己的集合。從一些輸入產生正確標籤的生成器可以避免破壞社交預覽的拼字錯誤和遺失屬性。

使用方法

填寫輸入,取得標籤。

  1. 輸入標題和描述: 这些是共享预览中显示的内容。 Keep title under 60 characters and description under 200 characters for clean display across platforms.
  2. 提供图像 URL: 1200×630像素是标准尺寸。 Use an absolute URL (https://example.com/og-image.png). Image must be publicly accessible — authenticated images break previews.
  3. 設定規範 URL: 页面本身的 URL。 Used as og:url and helps platforms identify the canonical resource even when shared via redirect URLs.
  4. 选择页面类型: website for general pages, article for blog posts and news, product for e-commerce.影响某些平台呈现预览的方式。
  5. 複製產生的標籤: 該工具會產生 HTML 連結標記,可以貼上到頁面的 <head> 中。透過 CMS、模板引擎或直接在 HTML 中套用。

常見用例

技術細節

OG 標籤使用元屬性(不是名稱):<meta property="og:title" content="..." />。 property屬性是OG所必需的;有些解析器接受名稱作為後備,但屬性是正確的。

圖片需求:視網膜渲染1200×630像素,長寬比1.91:1。 og:image:width 和 og:image:height 標籤可幫助平台正確快取映像。 og:image:alt 提供可訪問性文字。

Twitter 卡標籤使用名稱屬性:<meta name="twitter:title" content="..." />。當 Twitter 特定的內容不存在時,Twitter 會退回到 OG 標籤,因此設定良好的 OG 通常就足夠了。新增 twitter:card 明確選擇卡片類型(summary_large_image 是最常見的)。

最佳實踐

常見問題

我可以自訂生成的輸出嗎?
是的。該工具提供了各種自訂選項,可根據您的特定需求自訂輸出。在生成之前調整設置,或使用不同的選項重新生成。
產生的內容可以免費使用嗎?
是的。您使用此工具產生的所有內容都可以用於個人、教育或商業目的,沒有任何限製或歸屬要求。
這個需要帳號嗎?
不需要。該工具無需註冊、無需電子郵件、無需註冊即可立即使用。只需打開頁面並開始生成。
我的輸入資料是否保密?
是的。所有處理都發生在您的瀏覽器中。您的輸入資料和產生的輸出永遠不會發送到任何外部伺服器。
我可以為每個頁面使用相同的 OG 圖像嗎?
可能但不是最理想的。頁面特定圖像的點擊率優於通用網站範圍圖像。使用預設值進行後備,但為重要內容產生每頁影像。
是否需要聲明圖片尺寸?
有幫助,但不是嚴格要求。 og:image:width 和 og:image:height 讓平台快取映像而無需重新取得以確定尺寸。加速後續分享。
我的數據上傳了嗎?
不會。生成發生在您的瀏覽器中。
如何測試 OG 標籤?
Facebook 共享偵錯器、Twitter 卡驗證器和 LinkedIn Post Inspector 分別進行取得和驗證。部署新的 OG 標籤後使用它們。