🏷️

免費Meta 標籤與 Open Graph 產生器

產生 SEO meta 標籤、Open Graph 和 Twitter Card 標記，帶即時谷歌搜尋和社交分享預覽。直接複製到頁面 head 中。

在瀏覽器中執行無需註冊，無彈出式視窗無需登入永久免費

載入後可離線使用

頁面標題0 · 0/580px

頁面 URL

Meta 描述0 · 0/920px

社交圖片 URL

最佳：1200×630 px，小於 5 MB，使用絕對 https:// 連結。

網站名稱

Twitter/X 使用者名稱

Twitter/X 作者帳號

Twitter 卡片型別

Open Graph 型別

同時包含

包含規範連結（使用頁面 URL）字元集和行動裝置視口提醒將 <html lang> 設為 zhog:locale（頁面語言）Favicon 連結主題色（手機上的瀏覽器欄）

搜尋引擎收錄

標題 0/580px （建議 30–60 字元）描述 0/920px （建議 70–160 字元）

Google 搜尋預覽

example.com

您的頁面標題顯示在這裡

您的 Meta 描述顯示在這裡。寫得有吸引力可提高搜尋結果點選率。

寬度只是估算：Google 按畫素而不是字元數截斷。

社交卡片預覽

og:image 預覽

example.com

頁面標題

頁面描述

貼上到 <head> 中

至少填寫上方一個欄位以產生元標籤。

工作原理

所有標籤組裝和 head 解析都直接在你的瀏覽器中進行——不涉及伺服器。工具使用 React 的 useMemo 回應式地建立 HTML 字串，並使用瀏覽器原生的 DOMParser API 讀取現有頁面標記，用於匯入/稽核功能。

1
表單輸入驅動即時組裝
你輸入時，useMemo 鉤子會立即重新組裝完整的標籤塊——標題、meta 描述、Open Graph 屬性和 Twitter Card 屬性——並跳脫特殊字元（&、<、>、"），使輸出可以安全地直接貼上到 HTML 中。
2
透過瀏覽器的 URL 建構函式驗證網址
每個網址欄位（頁面網址、社交分享圖片）都使用瀏覽器內建的 URL 建構函式驗證。只有格式正確、主機名帶點的 http:// 或 https:// 地址才能通過；無效值會停用複製按鈕並顯示內聯錯誤。
3
匯入：DOMParser 讀取現有的 head 標記
如果你貼上現有的 <head> HTML 進行稽核，工具會以惰性模式透過 DOMParser 處理——不執行指令碼，也不發出網路請求。然後在解析後的文件中查詢已知的 meta 選擇器（og:title、twitter:description、canonical 連結等），並用找到的內容預填表單欄位。
4
即時 Google 和社交卡片預覽
工具使用同一表單狀態即時渲染帶樣式的 Google 搜尋結果和 Open Graph 卡片預覽，讓你在複製輸出之前準確看到標題和描述會如何被截斷。