Meta Tag 產生器

輸入參數
標籤輸出

瀏覽器端運行的 Meta 標籤產生工具，支援 title、description、keywords、canonical、Open Graph、Twitter Card、robots 等標籤產生，自動 HTML 實體跳脫、即時字數提示（含顏色狀態）、一鍵複製與下載功能。

相關推薦

Sitemap 產生器

QR Code/條碼產生器

TS 壓縮

十六進位轉換器

SHA-256 雜湊

Base64 解碼

適用場景

  • 新網站上線前，快速生成首頁、列表頁、詳情頁的完整 Meta 標籤，快速完成 SEO 基礎設定
  • 部落格文章發布前設定 article 類型 Open Graph 標籤與 summary_large_image 類型 Twitter Card，提升社群平台分享效果
  • 電商產品頁設定 product 類型 og:type，搭配 og:image、og:price:amount 等結構化資訊，最佳化社群平台商品呈現
  • 網站改版或更換網域後重新產生 canonical 標籤，統一 URL 規範，避免重複內容造成權重分散
  • 為行動版網頁設定 theme-color 主題色，讓 Chrome、Safari 手機版網址列與品牌色統一
  • 使用 Next.js、Nuxt.js、Gatsby 等 SSR/SSG 框架開發時快速產生 head 設定所需的完整 Meta 標籤程式碼
  • WordPress、Shopify 等 CMS 系統中，手動為自訂頁面模板設定 Meta 標籤，無需依賴 SEO 外掛
  • 網站收錄問題排查時，快速產生正確的 robots meta 標籤組合（如 stage 環境用 noindex,nofollow）
  • 社群媒體營運人員設定活動 landing page 分享卡片，確保 Facebook、Twitter/X、LinkedIn、WhatsApp、Slack、Discord 分享時預覽正確顯示
  • 前端開發者在編寫 HTML 頁面模板時，自動完成 Meta 標籤的實體跳脫處理，避免特殊字元造成 HTML 語法錯誤

使用方法

  1. 在「基本 SEO 標籤」區塊填入頁面 title（標題，建議 50-60 字）、meta description（說明，建議 120-160 字）、keywords（關鍵字，逗號分隔）、canonical URL（標準連結）、author（作者）
  2. 在「robots 爬蟲指令」區塊選擇合適的索引與追蹤規則：index/noindex（是否收錄）、follow/nofollow（是否追蹤連結），可勾選 noarchive、nosnippet 等進階選項
  3. 在「主題色設定」區塊輸入或選擇 theme-color 的十六進位色值，用於行動瀏覽器網址列著色
  4. 切換到「Open Graph 標籤」區塊，選擇 og:type（website/article/product/profile 四選一），填入 og:title、og:description、og:image（分享圖片 URL，建議 1200×630 像素）、og:url、og:site_name、og:locale
  5. 切換到「Twitter Card 標籤」區塊，選擇 twitter:card 類型（summary/summary_large_image/app/player 四選一），填入 twitter:site @帳號、twitter:title、twitter:description、twitter:image
  6. 所有輸入過程中可在右側即時預覽區塊與字數計數顏色提示確認：綠色為最佳長度，橘色表示接近臨界值，灰色表示過短或過長需要調整
  7. 確認標籤無誤後點擊「複製到剪貼簿」按鈕將完整程式碼複製貼入 HTML 的 head 區域，或點擊「下載 HTML 檔案」儲存為 meta-tags.html

功能特點

  • HTML 實體自動跳脫：&、<、>、"、' 五種特殊字元安全跳脫，確保產生的標籤不出現 HTML 語法錯誤
  • title 字數智慧提示：50-60 字最佳範圍內顯示綠色（最佳），超出或不足時以橘色/灰色狀態提示，即時字數統計
  • meta description 字數智慧提示：120-160 字最佳範圍內顯示綠色（最佳顯示區間），過長或過短時即時顏色狀態變化
  • 4 種 og:type 選項支援：website（一般網站）、article（文章/部落格）、product（產品頁）、profile（個人頁），對應不同頁面類型
  • 4 種 twitter:card 類型支援：summary（小圖摘要）、summary_large_image（大圖摘要）、app（應用程式卡片）、player（影片/播放器卡片）
  • robots 指令組合設定：index/noindex、follow/nofollow、noarchive、nosnippet、noimageindex 等多種爬蟲指令自由組合
  • author 作者標籤：支援 content-author、article:author 等作者署名標籤設定，適用部落格與新聞網站
  • theme-color 主題色設定：設定手機瀏覽器網址列主題顏色，提供顏色選擇器與色值輸入
  • og:site_name 網站名稱設定：專屬設定 Open Graph 協定中的網站名稱欄位，社群分享時正確顯示網站名
  • twitter:site @帳號設定：支援填入 Twitter/X 平台官方 @handle 帳號，分享卡片與官方帳號連動
  • 3 區塊結構化輸出：Primary SEO、Open Graph、Twitter Card 三個清晰分區展示產生結果，結構一目了然
  • 一鍵複製到剪貼簿：無需手動選取即可一鍵複製全部程式碼，支援多種瀏覽器環境
  • 下載為 meta-tags.html：可將產生的標籤下載為完整 HTML 檔案，方便儲存或直接匯入專案
  • 即時產生與預覽：輸入內容即時生成標籤程式碼，同步預覽 SERP 搜尋結果呈現與社群分享卡片樣式

常見問題

Meta Tag 產生器產生的程式碼可以直接用到網站上嗎？需要修改嗎？

可以直接複製使用，產生的程式碼是標準格式的 HTML Meta 標籤，且已自動完成 HTML 實體跳脫，直接貼入頁面的 &lt;head&gt; 與 &lt;/head&gt; 之間即可使用。注意確認你填入的 URL（canonical、og:image、og:url、twitter:image）是真實可線上存取的位址。若使用 Next.js、Nuxt.js、React Helmet、Vue Meta 等框架，可能需要根據 JSX/Vue 模板語法做些微調整。

為什麼 og:image 圖片輸入是必填的？沒有圖片會怎麼樣？

og:image 直接影響社群分享卡片的視覺效果與點擊率。沒有 og:image 的連結在分享時會顯示為無圖的純文字連結，或平台隨機抓取頁面中的小圖示（如 Logo、頭像、廣告圖等），呈現效果非常差，點擊率通常比有正確預覽圖的分享低 50% 以上。og:image 建議尺寸為 1200×630 像素（1.91:1 比例）、公開可存取的絕對 URL、檔案大小 5MB 以下。

Open Graph 和 Twitter Card 標籤需要都設定嗎？只設定 OG 可以嗎？

Twitter/X 會 fallback 讀取 Open Graph 標籤，但專屬設定 Twitter Card 有以下好處：①可以選擇最合適的 twitter:card 類型（特別是 summary_large_image 大圖類型）；②可以設定 twitter:site 關聯官方 Twitter 帳號，增加追蹤轉化；③可以針對 Twitter 單獨最佳化標題與說明長度。建議兩者都設定。

title 或 meta description 超過建議字數會怎樣？會被懲罰嗎？

超過字數不會被搜尋引擎懲罰，但會被截斷。Google 搜尋結果中 title 超過約 600 像素寬度就會被截斷顯示省略號，meta description 超過約 920 像素寬度也會被截斷。過短則浪費展示空間，無法充分傳達頁面價值吸引點擊。注意這是像素寬度限制，全形字元、大寫字母、W/M 等較寬的字元、emoji 都會佔用更多寬度。

HTML 實體跳脫是什麼意思？為什麼工具要自動處理？

HTML 中有部分字元具有特殊語法意義，直接出現在屬性值中會破壞 HTML 結構：雙引號 " 是屬性值結束符、& 是實體跳脫起始符、< 和 > 是標籤起止符。這些字元要正確顯示必須寫成實體形式：&→&amp;、<→&lt;、>→&gt;、"→&quot;、'→&#x27;。包含特殊字元的 title 或 description 若未跳脫直接寫入會造成 HTML 語法錯誤，導致後續標籤全部失效，因此本工具自動處理此跳脫。

為什麼 Facebook/Twitter 爬蟲抓不到 React/Vue 寫的頁面 Meta 標籤？

React、Vue、Angular 等框架預設是客戶端渲染（CSR），HTML 原始碼是空的或只有容器 div，Meta 標籤是瀏覽器執行 JavaScript 後才動態插入 DOM 的。但 facebookexternalhit、Twitterbot、LinkedInBot 等大部分社群爬蟲不執行 JavaScript（或執行能力非常有限），它們抓取的原始 HTML 中沒有 Meta 標籤因此無法生成分享卡片。解決方案：①使用 Next.js、Nuxt.js、Gatsby、Astro 等 SSR/SSG 框架；②使用 prerender.io、Rendertron 等預渲染服務；③使用專門的 OG 圖片產生服務。

同一頁面的 canonical 和 og:url 要填一樣的嗎？

是的，應保持一致。canonical 是告訴搜尋引擎首選 URL，og:url 是告訴社群平台這篇內容的唯一 URL 以便按讚、留言、分享數聚合。兩者指向同一個 URL 是最佳實務，可避免權重分散與社群計數碎片化。注意兩者都應該是完整絕對 URL（包含 https://、網域、完整路徑），不能使用相對路徑。帶 UTM 等參數的 URL 應統一 canonical 和 og:url 到無參數的乾淨 URL。

設定了 noindex 的頁面，爬蟲還會爬嗎？連結權重還傳遞嗎？

noindex 的含義是「不索引此頁面」，不是「不爬取」也不是「不追蹤連結」。爬蟲會抓取 noindex 頁面（因為要讀到 noindex 標籤才能知道不索引），如果 robots meta 設定了 follow（預設值），頁面中的連結仍會被繼續爬取。但關於權重傳遞，Google 官方說法是 noindex 頁面最終會從索引中移除，頁面中的連結權重不會正常傳遞（因為頁面本身不被索引）。

theme-color 在哪些瀏覽器上有效？iOS Safari 支援嗎？

theme-color 目前支援情況：Android 版 Chrome/Firefox/Edge/Brave 等 Chromium 系瀏覽器很早就支援，效果最明顯。Safari 從 iOS 15 與 macOS Monterey 開始支援 theme-color，但會根據頁面背景色自動調整，也可透過 media 屬性分別設定深色/淺色模式顏色。桌面版 Chrome 部分版本也開始在分頁列等處套用 theme-color。IE 與舊版瀏覽器不支援，但不支援也只是沒有主題色效果，不影響功能。

為什麼 Google 搜尋結果有時顯示的不是我寫的 description？

Google 不保證 100% 使用你寫的 meta description。當它認為你寫的 description 與使用者搜尋查詢不夠相關，或 description 品質不佳（如關鍵字堆砌、全站重複、內容不符），Google 會從頁面內容中擷取它認為與搜尋詞最相關的片段顯示在搜尋結果中，這是 Google 的正常行為不是 bug。提高 description 被採用機率的方法：①為每個頁面寫獨特、準確描述內容的 description；②自然包含核心關鍵字而不堆砌；③控制長度在合適範圍；④確保 description 內容在頁面正文中有對應體現。

設定好標籤後，如何確認是否正確生效？有什麼確認工具？

Meta 標籤確認流程與工具：①用瀏覽器「檢視網頁原始碼」在原始 HTML（不是 Elements 面板）中搜尋確認 title、description、og: 標籤存在且內容正確；②用 Facebook Sharing Debugger 驗證 OG 標籤並刷新快取；③用 Twitter Card Validator 驗證 Twitter Card；④用 Google Rich Results Test 確認基本標籤；⑤在 Google Search Console「網址檢查」中查看 Google 實際抓取的頁面與收錄狀態；⑥本機測試可切換 User-Agent 模擬社群爬蟲，或用 curl 指定 Facebook UA 抓取 HTML 確認。

每個頁面都需要單獨設定 Meta 標籤嗎？全站使用相同標籤可以嗎？

絕對不可以！每個頁面都需要獨一無二的 title 和 meta description。全站使用相同 title 和 description 會導致：①搜尋引擎無法區分各頁面內容主題，無法正確排名；②搜尋結果中所有頁面顯示相同標題說明，使用者無法辨識要點擊哪個，CTR 極低；③被判定為低品質網站，可能影響整站權重。OG 與 Twitter Card 原則上也應每頁不同。只有 theme-color、og:site_name、twitter:site 等全站級別設定可全站統一。

現在還需要寫 meta keywords 嗎？寫幾個比較合適？

2026 年目前 Google、Bing、百度等主要搜尋引擎都已不將 meta keywords 作為排名因素。寫與不寫對 SEO 基本沒有影響。如果 CMS 或模板中有這個欄位，花幾秒鐘填入 3-5 個真正相關的核心關鍵字即可，不必花時間研究關鍵字選擇和密度。重點是不要填入幾十個關鍵字、同一個詞重複多次、或填入無關的熱門關鍵字——這反而可能被視為垃圾訊號，造成反效果。

robots meta 標籤和 robots.txt 有什麼區別？誰優先？

兩者作用層級與機制不同：①robots.txt 是放在網站根目錄的文字檔，網站或目錄級別控制爬蟲行為（如 Disallow: /admin/），但 robots.txt 是「紳士協定」，被禁止的頁面如果有外部連結仍可能被收錄；②robots meta 是放在每個頁面 HTML head 中的頁面級標籤，可以精確控制單頁的 index/noindex/follow/nofollow 等，優先級高於 robots.txt；③X-Robots-Tag 是 HTTP 回應標頭級別，功能與 robots meta 相同，可用於 PDF、圖片等非 HTML 檔案。要讓頁面完全不被收錄，必須使用 noindex（meta 或 X-Robots-Tag）。

用本工具產生 Meta 標籤後，還需要設定 Schema.org 結構化資料（JSON-LD）嗎？

Meta 標籤與 Schema.org 結構化資料是互補關係，不是替代關係。Meta 標籤主要負責搜尋結果頁標題說明、社群分享卡片、基本爬蟲控制；Schema.org 結構化資料（通常以 JSON-LD 格式嵌入頁面）可以實現產品評分星級、價格、庫存、麵包屑導航、文章發布日期、FAQ 摺疊、活動時間地點等豐富摘要（Rich Snippet）展示，進一步提升 CTR。建議重要頁面兩者都設定：①基本 Meta 標籤（本工具產生）；②對應頁面類型的 Schema.org 結構化資料。兩者不衝突，共同最佳化搜尋展示效果。

故障排查

Facebook/Twitter/LinkedIn 分享時沒有顯示圖片，或顯示的圖片不是設定的 og:image

og:image URL 使用了相對路徑或 localhost/127.0.0.1/內網 IP，爬蟲無法存取 robots.txt 封鎖了圖片或 WAF/CDN/防火牆封鎖了爬蟲 User-Agent（facebookexternalhit/Twitterbot/LinkedInBot） 圖片尺寸不符合要求（og:image 需要至少 200×200 像素） 圖片檔案過大（超過 5-8MB）或格式不支援（僅支援 JPG/PNG/WebP/GIF） JavaScript 客戶端動態渲染，爬蟲不執行 JS（需要 SSR/SSG） og:image URL 返回 404/403/5xx 錯誤或重新導向到登入頁面 平台快取了舊版本，未使用官方除錯工具點擊 Scrape Again

Google 搜尋結果中 title 被截斷，或被 Google 自動改寫了標題

title 超過 50-60 字（約 600 像素寬度），超出部分顯示為省略號 title 包含全形符號或 emoji 佔用額外寬度，導致實際顯示比字數更早截斷 title 關鍵字堆砌或與內容不符，Google 從內容或錨點文字中改寫標題 各頁面 title 重複或高度相似，Google 自動生成不同標題 title 僅有品牌名或品牌名過長 過度使用 |、-、_ 等分隔符 頁面 h1-h6 標題層級混亂或有多個 h1

設定 Meta 標籤後出現亂碼、特殊字元顯示異常、HTML 語法錯誤

未宣告 <meta charset="UTF-8"> 或未放在 head 最前面（title 之前） meta description 等 content 屬性值中包含未跳脫的雙引號（"），導致標籤提前閉合、HTML 結構破壞 內容中有 &、<、> 等特殊字元但未進行 HTML 實體跳脫 HTML 檔案儲存編碼非 UTF-8 伺服器 Content-Type 標頭指定了非 UTF-8 編碼，覆蓋了 meta charset 宣告 使用了錯誤的實體跳脫 CMS 或模板引擎造成雙重跳脫

canonical 標籤不生效，重複 URL 仍被收錄或 canonical 被忽略

canonical 指向的 URL 返回 404/403/5xx 或重新導向到其他頁面 循環 canonical（A→B→A）或連鎖 canonical（A→B→C→D），造成搜尋引擎混淆 canonical 指向內容差異很大的頁面，被判定為設定錯誤而忽略 canonical 使用了相對路徑（需要完整絕對 URL） http/https、www/非www 之間的 301 重新導向未正確設定 將分頁頁面全部 canonical 到第一頁，導致後續頁面內容不被收錄 HTML link 標籤、HTTP 回應標頭、Sitemap 中宣告了不同的 canonical URL 造成衝突

修改 Meta 標籤後重新分享仍顯示舊的標題、說明、圖片

社群平台對 OG/Twitter Card 的快取會保留很長時間（數天到數週） 未使用官方除錯工具執行 Scrape Again/重新抓取來強制刷新快取 CDN 快取了舊的 HTML 頁面 伺服器端快取或 SSR 快取未清除 og:image URL 相同但圖片內容已更新，需要加上 ?v=2 之類版本參數 標籤修改未正確佈署到正式環境 Meta 標籤放在 HTML body 內或透過 JS 動態插入，爬蟲無法讀取

不小心設定了 noindex,nofollow 導致網站或重要頁面未被 Google 收錄

開發/測試環境的 noindex,nofollow 標籤在上線時沒有移除，整站帶著 noindex 發布上線了 WordPress 等 CMS 後台「建議搜尋引擎不要索引這個網站」選項被勾選，自動給所有頁面加上了 noindex robots.txt 同時設定了 Disallow，導致爬蟲連頁面都抓不到更看不到 noindex，但如果有外部連結指向還是可能收錄 HTTP 回應標頭返回了 X-Robots-Tag: noindex（比 meta 標籤優先級高，很多人沒注意回應標頭），例如 Nginx/Apache 設定、CDN 設定導致 CDN/WAF/安全外掛自動給頁面添加了 noindex 標頭（部分安全外掛誤操作或預設設定） 使用了錯誤的組合指令，比如把 noindex 寫成了 index 但其他參數衝突，或者全站模板包含了 noindex 只在首頁移除了內頁還帶著 網站從 staging/測試環境遷移到正式環境時，沒有更新 base URL、canonical、robots 設定，測試環境的 noindex 遺留到正式環境

術語表

Meta tag
HTML 中繼標籤。放置在 head 區域內描述頁面中繼資料，向瀏覽器、搜尋引擎、社群平台傳遞頁面資訊。
title
HTML 標題標籤。定義瀏覽器分頁標題與 SERP 可點擊標題，是 SEO 最重要的標籤，建議 50-60 字。
meta description
頁面描述中繼標籤。顯示在 SERP 標題下方的說明文字，對 CTR 影響大，建議 120-160 字。
meta keywords
關鍵字中繼標籤。Google 自 2009 年起已不使用，目前基本無 SEO 價值。
canonical
標準連結標籤（rel="canonical"）。告知搜尋引擎多個相似 URL 中的首選版本，解決重複內容問題。
Open Graph
Facebook 於 2010 年提出的社群分享協定。使用 og: 前綴標籤控制分享卡片樣式，幾乎所有社群平台都支援。
Twitter Card
Twitter/X 的分享卡片協定。使用 twitter: 前綴標籤，支援 summary/summary_large_image/app/player 四種類型，優先於 OG 標籤。
og:type
Open Graph 頁面類型標籤。指定 website、article、product、profile 其中之一，決定社群平台解讀內容的方式。
og:image
Open Graph 分享圖片標籤。指定分享卡片預覽圖 URL，建議 1200×630 像素、公開可存取的絕對 URL。
twitter:card
Twitter Card 類型指定標籤（必填）。指定 summary、summary_large_image、app、player 其中之一。
robots meta
爬蟲控制中繼標籤。頁面級別控制 index/noindex/follow/nofollow 等，優先級高於 robots.txt。
noindex
robots 指令之一，表示不索引此頁面。用於測試頁、內部頁等不希望被收錄的頁面。
nofollow
robots 指令之一，表示不追蹤此頁面內的所有連結。
theme-color
定義行動瀏覽器網址列/工具列顏色的中繼標籤，提升品牌一致性體驗。
author meta
作者中繼標籤（name="author"），用於宣告內容作者資訊。
HTML entity
HTML 實體跳脫字元。用於安全表示特殊字元，如 &amp; 代表 &、&lt; 代表 < 等。
SERP
Search Engine Results Page（搜尋引擎結果頁），顯示標題、說明、URL 等的搜尋結果頁面。
CTR
Click-Through Rate（點擊率），搜尋結果展示後使用者點擊的比例，是 SEO 核心指標之一。
crawl budget
爬取預算，搜尋引擎分配給網站的爬取次數與頁面數量。
viewport
檢視區中繼標籤（name="viewport"），控制行動裝置頁面渲染寬度與初始縮放，是響應式網頁必備標籤。

常用 Meta 標籤一覽表

標籤名稱作用屬性/寫法範例注意事項
title頁面標題，瀏覽器分頁與 SERP 標題<title>頁面標題 | 品牌名</title>建議 50-60 字，關鍵字前置，品牌名置後，每頁唯一
meta description頁面說明，SERP 顯示說明文字<meta name="description" content="...">建議 120-160 字，包含關鍵字與 CTA，每頁唯一
meta keywords關鍵字標籤<meta name="keywords" content="...">主要搜尋引擎已不使用
link canonical標準連結，指定首選 URL<link rel="canonical" href="https://example.com/page">填寫完整絕對 URL，避免連鎖設定
meta robots爬蟲控制<meta name="robots" content="index,follow">優先於 robots.txt，noindex 才是真正不收錄
meta charset字元編碼宣告<meta charset="UTF-8">放在 head 最前面
meta viewport行動檢視區控制<meta name="viewport" content="width=device-width, initial-scale=1.0">響應式網頁必備
meta author頁面作者資訊<meta name="author" content="作者名">部落格/新聞網站使用
meta theme-color行動瀏覽器主題色<meta name="theme-color" content="#2563eb">建議使用品牌色
og:titleOpen Graph 分享標題<meta property="og:title" content="...">可與 SEO title 不同
og:descriptionOpen Graph 分享說明<meta property="og:description" content="...">建議 200 字以內
og:imageOpen Graph 分享圖片<meta property="og:image" content="https://.../img.jpg">建議 1200×630 像素、絕對 URL、5MB 以下
og:urlOpen Graph 標準 URL<meta property="og:url" content="https://example.com/page">應與 canonical 一致
og:typeOpen Graph 內容類型<meta property="og:type" content="website">website/article/product/profile
og:site_nameOpen Graph 網站名稱<meta property="og:site_name" content="GeekFormat">填寫網站名稱而非頁面標題
twitter:cardTwitter Card 類型<meta name="twitter:card" content="summary_large_image">summary/summary_large_image/app/player
twitter:siteTwitter 官方帳號<meta name="twitter:site" content="@username">填入品牌 @handle
twitter:imageTwitter Card 圖片<meta name="twitter:image" content="https://.../img.jpg">未設定時 fallback 到 og:image

og:type 用途對照表

og:type 值適用場景建議圖片比例擴充標籤
website網站首頁、一般頁面1.91:1（1200×630）僅需基本 og: 標籤
article部落格文章、新聞、文件1.91:1（1200×630）article:published_time, article:author, article:section, article:tag
product電商產品頁、服務頁1.91:1（1200×630），產品圖建議正方形或 4:3product:price:amount, product:price:currency, product:availability, product:brand
profile個人檔案頁面1:1 大頭照或 1.91:1 封面照profile:first_name, profile:last_name, profile:username

twitter:card 類型對照表

twitter:card 類型卡片樣式圖片要求適用場景必填額外欄位
summary小圖摘要卡，小圖在左/上、文字在右/下最小 144×144 像素，1:1 正方形一般文章、頁面基本標籤即可
summary_large_image大圖摘要卡，上方全寬橫幅大圖最小 300×157 像素，建議 1200×675，約 2:1 比例部落格文章、產品頁、活動頁（推薦預設值）需滿足圖片尺寸要求
app應用程式下載卡，顯示圖示、評分、下載按鈕App Logo 正方形圖 144×144 以上App 下載頁面twitter:app:name/id:url:iphone/ipad/googleplay
player影片/音訊播放器卡，串流內直接嵌入播放播放器封面圖，播放器頁面必須 HTTPS影片內容、Podcast、直播twitter:player, twitter:player:width/height/stream，需 Twitter 白名單審核