Open Graph 生成器
寫好標題和描述，預覽分享卡片，複製元標籤。
更多選項
填寫任意欄位，標籤就會出現在下方——沒有「生成」按鈕。
使用方法
- 填寫標題、描述、圖片與頁面網址。分享卡片預覽和 <meta> 標籤會隨輸入即時更新——沒有生成按鈕。
- 展開「更多選項」可補充站點名稱、區域或 Twitter 賬號。只要 Open Graph，可關閉 Twitter Card。
- 複製標籤並貼上到頁面的 <head> 中。下載則把同樣的程式碼塊存成一份 .html 檔案。
示例
欄位
標題「如何烤出完美的酸麵糰」· 型別 article · 圖片網址 · 頁面網址 · 站點名「烘焙部落格」· 區域 zh_CN · Twitter @bakeryblog
標籤
<meta property="og:title" content="如何烤出完美的酸麵糰"> <meta property="og:type" content="article"> <meta property="og:image" content="https://example.com/zh/og-image.png"> <meta property="og:url" content="https://example.com/zh/blog/sourdough"> <meta property="og:description" content="從養護酵頭到烤出酥脆開口組織的全程指南。"> <meta property="og:site_name" content="烘焙部落格"> <meta property="og:locale" content="zh_CN"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@bakeryblog"> <meta name="twitter:title" content="如何烤出完美的酸麵糰"> <meta name="twitter:description" content="從養護酵頭到烤出酥脆開口組織的全程指南。"> <meta name="twitter:image" content="https://example.com/zh/og-image.png">
標籤按固定順序生成，同一組欄位始終產出同一段程式碼。空欄位會被跳過——不會生成 content="" 的空標籤。
範圍、侷限與常見問題
- 不抓取網址：本工具無法讀取其他站點已有的標籤，也無法檢查你部署後的頁面是否被抓取。部署後可把網址貼上進 Facebook 分享偵錯程式或 X 卡片驗證器確認。
- 空欄位會被跳過。描述留空就不會生成 og:description——不會編造佔位值。
- 網址檢查只是警告，不是阻斷。相對路徑或漏寫 https:// 仍會生成對應標籤；若某平臺拒絕，請自行修正。
- 只生成 summary 與 summary_large_image 兩種 Twitter 卡片。App / Player 卡片需要額外的 app:id / player: 欄位，多數頁面用不到。
- 預覽圖直接載入你填寫的 og:image 網址，與社交平臺抓取方式一致，不會發往本站伺服器；若主機不可達則顯示佔位。
- 不上傳、不儲存、不寫入頁面網址。重新整理回到示例，清空欄位則回到空態。
相關工具
標籤就位後，人們通常還會用到這些。