Skip to content
Meta 標籤產生器
Tools

Meta 標籤產生器

產生 SEO、Open Graph 與 Twitter Card meta 標籤,附即時預覽。

Search-engine indexing (robots)
Listing
Links
Extra directives
Google preview
E Example https://example.com › page

Page title

Your meta description preview appears here.

Facebook · Open Graph
1200 × 630
EXAMPLE.COM Page title Your meta description preview appears here.
X · Twitter Card
example.com
Generated <head> tags

Runs entirely in your browser. Nothing is uploaded.

在一個地方產生SEO、Open Graph和Twitter標籤

這個Meta標籤產生器將一個簡短的表單轉化為完整的、可直接複製的SEOOpen GraphTwitter Card Meta標籤集合。填寫標題、說明、URL和預覽圖片,它會為您產生完整的<head>程式碼區塊:標題、Meta說明、canonical、robots、charset和viewport,以及富媒體社群預覽所需的每個og:twitter:標籤。無需安裝,無需註冊,完全在瀏覽器中執行。

當您輸入時,三個即時預覽——Google、Facebook和X——會即時更新,讓您在發佈前就能看到頁面在搜尋結果和社群媒體中的確切顯示效果。當標題或說明過長時,字元計數器會變成琥珀色提示。

真正重要的Meta標籤

現代網頁只需要少量HTML Meta標籤就能為搜尋和分享做好準備。<title><meta name="description">標籤決定了您在Google中的搜尋摘要,是最直接影響點擊率的兩個欄位。viewportcharset標籤確保頁面在行動裝置上正確呈現。canonical連結防止相同內容在多個URL下產生重複內容問題。robots標籤控制頁面是否被索引。

該產生器始終包含必要元素,僅在您填寫時才新增可選的keywordsauthor欄位。keywords標籤自2009年起已被Google忽略,不再影響排名,但產生器仍保留該欄位以相容仍讀取它的內部搜尋引擎。

透過Open Graph和Twitter Card獲得更好的連結預覽

當有人在Facebook、LinkedIn、WhatsApp、Slack、Discord或X上分享您的連結時,這些平台會尋找Open Graphog:)和Twitter Cardtwitter:)標籤來建構富媒體預覽卡片。沒有這些標籤,連結顯示為純文字;有了這些標籤,它會展示您的標題、說明和1200×630的預覽圖。

這裡的Open Graph產生器一次產生完整的og:標籤集和對應的twitter:標籤,包括圖片alt文字。X/Twitter優先讀取自己的標籤,但對缺失內容會退回到og:標籤,因此完整的og:集合加上twitter:card和twitter:site就足以涵蓋兩個平台。

透過robots Meta標籤控制索引

內建的robots Meta標籤產生器讓您只需點擊即可在indexnoindex之間以及follownofollow之間切換。對感謝頁面、測試網站、管理頁面和不希望出現在Google中的薄內容篩選頁使用noindex

當頁面設定為noindex時,Google預覽卡會顯示警告,防止您意外發佈錯誤的robots設定。產生的標籤還支援進階指令,如noarchive(阻止Google顯示快取版本)和nosnippet

與SEMrush、Yoast和Rank Math的比較

大多數替代工具都有依賴性或費用。SEMrush在網站審核中包含Meta標籤分析,但起價為每月129美元。Yoast SEORank Math是WordPress外掛,無法用於Shopify、Webflow、Next.js或手寫HTML。

該產生器涵蓋完整的標籤集——標題、說明、canonical、robots、所有og:欄位、所有twitter:欄位、圖片alt文字——提供即時Google和社群預覽,無需帳號,無需費用,無CMS依賴。

適用於任何技術堆疊的Meta標籤產生器

由於輸出是純HTML,可以整合到任何專案中。將程式碼區塊貼到手寫靜態網站、WordPress佈景主題標頭、Shopify的theme.liquid、Webflow自訂程式碼區段或React/Vue版面配置元件中。在Next.js中,將值新增到layout.tsx中的Metadata匯出。在Astro中,將其作為props傳遞給Layout.astro的head元件。

收藏此工具,每次啟動新頁面、更新標題或希望連結在分享時效果最佳時使用。填寫表單,複製<head>程式碼區塊,貼上,您的頁面就為搜尋引擎和所有主要社群平台做好了準備。

Frequently asked questions

什麼是Meta標籤?

Meta標籤是放置在頁面head中的HTML片段,它們向瀏覽器和搜尋引擎描述頁面內容,但不會在頁面上顯示。最重要的是title標籤和meta說明,它們決定了您在Google中的搜尋摘要。此外還需要viewport標籤控制行動裝置縮放、charset宣告、robots標籤控制索引、canonical URL防止重複內容問題,以及Open Graph和Twitter Card標籤用於富媒體社群預覽。

如何為SEO建立Meta標籤?

在表單中輸入頁面標題、說明、URL和1200×630的預覽圖片,該產生器會寫出完整的標籤集:title、meta description、canonical、robots、Open Graph和Twitter Card。將標題控制在60個字元左右,說明控制在155個字元左右,每個頁面使用唯一的組合,然後將程式碼區塊複製到HTML的head中。

2026年哪些Meta標籤對SEO重要?

仍然有價值的標籤包括:title標籤、meta說明、viewport標籤、charset宣告、robots標籤和canonical連結。此外,Open Graph和Twitter Card標籤控制連結在社群平台上的分享效果。舊的keywords meta標籤自2009年起就被Google忽略,不再影響排名。

標題和說明的理想長度是多少?

標題目標50–60個字元,meta說明目標145–155個字元。Google會在約600像素寬處截斷標題,在約155–160個字元處截斷說明,並新增省略號。這裡的字元計數器會在超過建議長度時變成琥珀色。

什麼是Open Graph標籤?

Open Graph標籤——名稱以'og:'開頭——是Facebook建立的標準,控制連結在社群媒體和聊天應用程式中分享時的顯示效果。核心集合是og:title、og:description、og:image、og:url和og:type。有了這些標籤,分享的連結會顯示帶有您選擇的標題、說明和預覽圖的富媒體卡片,而不是裸露的URL。

在這裡輸入真實頁面資訊安全嗎?

是的。這個Meta標籤產生器完全在您的瀏覽器中使用JavaScript執行——您輸入的標題、說明、URL和圖片URL永遠不會傳送到伺服器,永遠不會被記錄,也永遠不會儲存在任何地方。頁面載入後,該工具可離線工作。

Open Graph圖片應該用什麼尺寸?

使用1200×630像素、1.91:1比例的圖片用於大型社群卡片。這是Facebook、LinkedIn和X在不裁剪的情況下顯示的尺寸,同一檔案適用於og:image和twitter:image。檔案大小保持在5MB以下,使用以https://開頭的絕對URL而非相對路徑。

Related tools

檢視所有工具