Meta 標籤產生器

這個工具做什麼

Meta 標籤產生器產生放在 HTML 頁面 <head> 裡的標籤：<title>、meta 描述、關鍵字和作者、robots 指令、canonical 標準連結、主題色、viewport 和字元集宣告、完整的 Open Graph 標籤（og:title、og:description、og:image、og:url、og:type、og:site_name、og:locale），以及 X / Twitter 卡片標籤。

輸入時它會即時預覽頁面在搜尋結果和社群卡片中的大致樣子，並檢查常見問題：標題超過約 60 個字元，描述缺少、太短或超過約 160 個字元，標準網址不是完整網址，分享圖片沒有完整網址，語言地區或顏色格式不正確。全部在瀏覽器裡完成，預覽也刻意不載入你的圖片，所以本頁面不會發出任何網路請求。

使用方法

1. 填寫頁面資訊。標題和描述最重要，計數器會顯示它們相對常見顯示上限的長度。點範例可以看到完整的例子。
2. 填寫頁面的標準網址和分享圖片。/images/cover.jpg 這樣的相對路徑會依標準網址解析成完整網址。
3. 在選項裡選擇 Open Graph 類型（多數頁面用 website，部落格文章用 article）、卡片尺寸、是否允許搜尋引擎索引和追蹤連結，以及要包含哪幾組標籤。
4. 查看 HTML 下方的提示和預覽，然後把 HTML 複製到頁面範本裡。

選項儲存在頁面網址裡，表單內容儲存在瀏覽器中，之後回來可以繼續編輯，也可以分享帶相同設定的連結。

範例

範例頁面產生的標籤大致如下（有刪節）：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

所有值都會做 HTML 跳脫，標題裡的引號和 & 不會破壞標籤；語言地區 en-US 會規範成 Open Graph 要求的 en_US 形式。

小提示

• 每個頁面都寫獨立的標題和描述；全站重複會讓搜尋結果難以區分。
• 把最重要的詞放在標題前面，過長的標題會從結尾被截斷。
• 標準網址應是你希望被索引的確切位址，包括通訊協定以及帶不帶 www 的首選寫法。
• robots 設為 noindex 可讓頁面不出現在搜尋結果中，但前提是爬蟲仍能抓取它：不要同時在 robots.txt 裡封鎖這個頁面。