為什麼 Meta Tags 很重要？

Meta Tags（元標籤）是 HTML <head> 中的隱藏資訊，雖然使用者在網頁上看不到它們，但它們直接影響三件關鍵事項：

  1. 搜尋引擎排名：Google 會參考 title 和 description 來理解網頁內容，決定你的頁面與搜尋查詢的相關性
  2. 搜尋結果呈現：title 和 description 決定你的網頁在 Google 搜尋結果頁面（SERP）中的展示樣貌
  3. 社群分享預覽：Open Graph 和 Twitter Card 標籤決定連結在 Facebook、LINE、X（Twitter）等社群平台上分享時的預覽卡片外觀

根據 Backlinko 的研究，搜尋結果第一頁的平均點擊率約為 27.6%，但一個經過優化的 title 和 description 可以將點擊率提升 30-50%。正確設定 Meta Tags 是 SEO 的基本功，也是成本最低、效果最直接的優化手段——不需要修改網站架構，只需要幾行 HTML 就能顯著提升搜尋流量。

Meta Tags 的歷史演進

早期的搜尋引擎（如 AltaVista、Yahoo）高度依賴 <meta name="keywords"> 標籤來理解網頁內容。然而由於被大量濫用（關鍵字堆砌），Google 早在 2009 年就公開宣布不再將 meta keywords 作為排名因素。現在真正影響 SEO 的 Meta Tags 只有 title tag 和 meta description，以及一些控制性標籤（如 robots、canonical）。

Title Tag — 最重要的 SEO 標籤

Title Tag（標題標籤）是搜尋引擎最重視的排名因素之一，它同時出現在三個關鍵位置：搜尋結果的第一行（藍色連結文字）、瀏覽器分頁的標題、社群分享時的後備標題（當沒有設定 OG title 時）。

語法

<title>JSON 格式化工具 — 免費線上 JSON 美化與驗證 | Super Tools</title>

Title Tag 撰寫公式

經過驗證有效的 title 撰寫公式：

公式一：主關鍵字 — 補充描述 | 品牌名

JSON 格式化工具 — 免費線上美化與驗證 | Super Tools

公式二：主關鍵字：副關鍵字與補充資訊 | 品牌名

Base64 編碼解碼器：線上免費轉換工具 | Super Tools

公式三：[年份] 主關鍵字 — 完整教學/指南

[2026] SEO Meta Tags 完整指南 — 從入門到精通 | Super Tools

撰寫原則

  • 長度控制在 30-60 個字元（中文約 15-30 字）。Google 通常只顯示約 580 像素寬度的標題，超出的部分會被截斷為省略號。使用 Super Tools 的 Meta 分析工具 可以即時預覽截斷效果
  • 主要關鍵字放在最前面：搜尋引擎對前幾個字元給予更高權重。JSON 格式化工具 比 Super Tools 的 JSON 格式化工具 更有效
  • 每個頁面的 title 必須唯一：重複的 title 會被 Google 視為低品質訊號，可能導致某些頁面被降級或忽略
  • 加入品牌名：放在後面，用 | 或 — 分隔，建立品牌認知度
  • 避免關鍵字堆砌：JSON 工具 JSON 格式化 JSON 美化 JSON 驗證 這種寫法不僅無效，還可能被 Google 懲罰
  • 加入情感觸發詞：「免費」、「完整」、「最新」、「實用」等詞彙能有效提升點擊率

好的 Title 範例

JSON 格式化工具 — 免費線上美化與驗證 | Super Tools
Base64 編碼解碼器：線上免費轉換工具 | Super Tools
密碼強度檢測工具 — 產生安全隨機密碼 | Super Tools
[2026] 網站 SEO 完整檢查清單 — 20 個必做項目 | Super Tools

壞的 Title 範例

Super Tools（品牌名放前面，浪費了最寶貴的前幾個字元）
首頁 - 歡迎來到我們的網站（毫無資訊量，使用者和搜尋引擎都無法理解頁面內容）
JSON JSON格式化 JSON美化 JSON壓縮 線上JSON（關鍵字堆砌，可能被懲罰）
untitled（忘記設定 title，常見於 SPA 應用）

Google 改寫你的 Title 怎麼辦？

自 2021 年起，Google 會自動改寫它認為不夠好的 title tag。常見被改寫的情況包括：

  • Title 過長被截斷
  • Title 與頁面內容不一致
  • Title 中有過多重複的模板文字（如每個頁面都有相同的長前綴）
  • Title 太短或太籠統

降低被改寫風險的方法：確保 title 準確描述頁面內容、長度適中、H1 標籤與 title 語意一致但不需完全相同。

Meta Description — 搜尋結果的銷售文案

Meta Description 顯示在搜尋結果的標題下方，是使用者在點擊之前看到的第二行資訊。雖然 Google 官方表示它不直接影響排名演算法，但它會極大地影響點擊率（CTR），而 CTR 是 Google 評估搜尋結果品質的重要行為訊號。

語法

<meta name="description" content="免費線上 JSON 格式化工具，支援 JSON 美化排版、語法驗證、壓縮與比對功能。貼上 JSON 即可一鍵格式化，開發者必備工具。">

撰寫原則

  • 長度 120-155 個字元（中文約 60-80 字）。太短浪費了展示空間，太長會被 Google 截斷。桌面版顯示約 920 像素寬度，行動版約 680 像素
  • 包含目標關鍵字：搜尋結果中匹配的關鍵字會被粗體顯示，這能有效吸引使用者的目光
  • 加入行動呼籲（CTA）：「立即使用」、「免費試用」、「馬上檢測」、「一鍵完成」等動詞能促使使用者點擊
  • 精準描述頁面內容：不要為了點擊率而誇大其詞，使用者點進來發現內容不符，會立即離開（高跳出率反而傷害排名）
  • 每個頁面的 description 必須唯一：重複的 description 跟重複的 title 一樣，是低品質訊號
  • 突出差異化優勢：你的頁面與競爭對手相比有什麼獨特之處？免費？更快？更完整？

好的 Description 範例

免費線上 JSON 格式化工具，支援美化排版、語法驗證、壓縮與錯誤偵測。貼上 JSON 即可一鍵格式化，無需安裝，開發者必備。

完整的 SEO Meta Tags 教學指南，涵蓋 title 撰寫公式、description 最佳字數、Open Graph 設定。附實作範例，立即優化你的網站 SEO。

壞的 Description 範例

我們提供很多好用的工具歡迎來使用。（太籠統，無關鍵字，沒有行動呼籲）

JSON格式化工具JSON美化工具JSON壓縮工具JSON驗證工具。（關鍵字堆砌，閱讀體驗差）

什麼情況下不需要設定 Description？

對於內容量大的網站（如電商的商品頁、論壇的文章頁），手動為每個頁面寫 description 並不實際。Google 在沒有 meta description 時，會自動從頁面內容中擷取與搜尋查詢最相關的片段。所以對於大量動態頁面，不設定 description 反而可能讓 Google 展示更相關的摘要。

但對於重要的著陸頁面（首頁、產品頁、工具頁、核心文章），一定要手動撰寫精心優化的 description。

Open Graph — 社群分享的門面

Open Graph（OG）是 Facebook 在 2010 年制定的協議，用於定義網頁在社群平台上分享時的預覽資訊。現在幾乎所有社群平台都支援 OG 標籤，包括 Facebook、LINE、LinkedIn、Telegram、Discord、Slack 等。

必要的 OG 標籤

<meta property="og:title" content="JSON 格式化工具 — 免費線上美化">
<meta property="og:description" content="一鍵格式化 JSON，支援語法驗證與壓縮功能">
<meta property="og:type" content="website">
<meta property="og:url" content="https://supertools.tw/dev/json">
<meta property="og:image" content="https://supertools.tw/static/og/json-tool.png">
<meta property="og:locale" content="zh_TW">
<meta property="og:site_name" content="Super Tools">

OG title 和 OG description 與 SEO 標籤的差異

OG title 和 description 可以與 SEO 的 title tag / meta description 不同。實務上建議：

  • OG title 可以更口語化、更吸引人，因為社群平台的受眾與搜尋引擎的受眾不同
  • OG description 可以更短更精簡，社群卡片的描述區域通常比搜尋結果更小
  • SEO title 需要包含精準的目標關鍵字
  • SEO description 需要包含完整的頁面內容摘要

OG Image 的最佳實踐

OG Image 是社群分享時最醒目的元素，根據 BuzzSumo 的研究，有圖片的社群貼文互動率比純文字高出 2.3 倍：

  • 尺寸：1200 x 630 像素（Facebook / LinkedIn 最佳比例 1.91:1）
  • 格式：PNG 或 JPEG（避免使用 SVG，很多平台不支援渲染 SVG 圖片）
  • 檔案大小：小於 1MB（Facebook 要求不超過 8MB，但較小的檔案載入更快）
  • 內容設計：簡潔的標題文字 + 品牌 Logo + 相關視覺元素，文字不要太小（行動裝置上也要清晰可讀）
  • 安全區域：重要內容放在中間 80% 的區域，因為不同平台可能會裁切邊緣
  • 對比度：確保文字與背景有足夠對比，淺色文字配深色背景或反之
  • 避免放太多文字：OG Image 不是簡報投影片，2-3 行大字就夠了

文章類型的 OG 標籤

如果是部落格文章，type 應設為 article，並加入額外標籤以提供更豐富的結構化資訊：

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-03-26T00:00:00+08:00">
<meta property="article:modified_time" content="2026-03-28T12:00:00+08:00">
<meta property="article:author" content="Super Tools 編輯團隊">
<meta property="article:section" content="SEO教學">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Meta Tags">
<meta property="article:tag" content="Open Graph">

Twitter Card — X 平台的預覽

Twitter Card 與 OG 類似，但有自己的標籤格式。如果同時設定了 OG 和 Twitter Card，X 平台會優先使用 Twitter Card 的資訊；如果沒有設定 Twitter Card，X 會回退到讀取 OG 標籤。

Summary Card with Large Image

最常見也最推薦的 Twitter Card 類型，會顯示大型預覽圖片：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@supertools_tw">
<meta name="twitter:creator" content="@supertools_tw">
<meta name="twitter:title" content="JSON 格式化工具 — 免費線上美化">
<meta name="twitter:description" content="一鍵格式化 JSON，支援語法驗證與壓縮功能">
<meta name="twitter:image" content="https://supertools.tw/static/og/json-tool.png">
<meta name="twitter:image:alt" content="Super Tools JSON 格式化工具截圖">

Twitter Card 類型比較

類型 用途 圖片呈現 適合場景
summary 一般網頁 小方形縮圖（144x144） 首頁、公司介紹頁
summary_large_image 文章、工具 大型橫幅圖（1200x628） 部落格文章、產品頁
player 影片內容 嵌入式播放器 YouTube 影片、Podcast
app App 下載 App 資訊卡 iOS/Android App 推廣

對大多數網站來說，summary_large_image 是最佳選擇，因為大圖片在動態牆上更加醒目，點擊率也更高。

其他重要的 Meta Tags

Canonical URL — 解決重複內容問題

Canonical 標籤是 SEO 中極為重要的技術標籤，它告訴搜尋引擎「這個頁面的正式版本在這裡」：

<link rel="canonical" href="https://supertools.tw/dev/json">

常見需要設定 canonical 的情況： - http:// vs https:// 版本 - www. vs 非 www 版本 - 有無尾斜線 /page vs /page/ - 帶查詢參數 /page?ref=social vs /page?utm_source=google - 行動版（m.example.com）vs 桌面版 - 分頁頁面（/page?p=2）是否應指向第一頁

Viewport（行動裝置必備）

沒有這個標籤，你的網站在行動裝置上會以桌面版的縮小版呈現：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Robots — 控制搜尋引擎行為

<!-- 允許索引和追蹤連結（預設行為，可省略）-->
<meta name="robots" content="index, follow">

<!-- 禁止索引此頁面，但允許追蹤連結 -->
<meta name="robots" content="noindex, follow">

<!-- 禁止索引也禁止追蹤連結 -->
<meta name="robots" content="noindex, nofollow">

<!-- 禁止顯示快取版本 -->
<meta name="robots" content="noarchive">

<!-- 禁止在搜尋結果中顯示摘要 -->
<meta name="robots" content="nosnippet">

常見使用 noindex 的頁面：登入頁面、後台管理頁面、搜尋結果頁、隱私政策/服務條款（如果不需要被搜尋到的話）、帶篩選條件的分頁。

hreflang — 多語系網站必備

如果你的網站有多語言版本，hreflang 告訴 Google 不同語言版本的對應關係，避免被視為重複內容：

<link rel="alternate" hreflang="zh-TW" href="https://example.com/zh-TW/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">

x-default 表示當使用者的語言不在你提供的版本中時，應該顯示哪個版本。

完整的 Meta Tags 範本

以下是一個工具頁面的完整 Meta Tags 設定，可以直接複製使用：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO 核心標籤 -->
  <title>JSON 格式化工具 — 免費線上美化與驗證 | Super Tools</title>
  <meta name="description" content="免費線上 JSON 格式化工具，支援美化排版、語法驗證、壓縮功能。貼上 JSON 即可一鍵格式化，開發者必備。">
  <link rel="canonical" href="https://supertools.tw/dev/json">

  <!-- Open Graph -->
  <meta property="og:title" content="JSON 格式化工具 — 免費線上美化">
  <meta property="og:description" content="一鍵格式化 JSON，支援語法驗證與壓縮功能">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://supertools.tw/dev/json">
  <meta property="og:image" content="https://supertools.tw/static/og/json-tool.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:locale" content="zh_TW">
  <meta property="og:site_name" content="Super Tools">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="JSON 格式化工具 — 免費線上美化">
  <meta name="twitter:description" content="一鍵格式化 JSON，支援語法驗證與壓縮功能">
  <meta name="twitter:image" content="https://supertools.tw/static/og/json-tool.png">
  <meta name="twitter:image:alt" content="Super Tools JSON 格式化工具介面截圖">

  <!-- 結構化資料 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "JSON 格式化工具",
    "description": "免費線上 JSON 格式化、美化、壓縮與驗證工具",
    "url": "https://supertools.tw/dev/json",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Any",
    "offers": {"@type": "Offer", "price": "0", "priceCurrency": "TWD"}
  }
  </script>
</head>

使用框架時的 Meta Tags 設定

Next.js（App Router）

// app/tools/json/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'JSON 格式化工具 — 免費線上美化與驗證 | Super Tools',
  description: '免費線上 JSON 格式化工具，支援美化排版、語法驗證、壓縮功能。',
  openGraph: {
    title: 'JSON 格式化工具 — 免費線上美化',
    description: '一鍵格式化 JSON，支援語法驗證與壓縮功能',
    type: 'website',
    url: 'https://supertools.tw/dev/json',
    images: [{ url: '/static/og/json-tool.png', width: 1200, height: 630 }],
    locale: 'zh_TW',
    siteName: 'Super Tools',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'JSON 格式化工具 — 免費線上美化',
    description: '一鍵格式化 JSON，支援語法驗證與壓縮功能',
    images: ['/static/og/json-tool.png'],
  },
  alternates: { canonical: 'https://supertools.tw/dev/json' },
};

Nuxt 3

// pages/tools/json.vue
useHead({
  title: 'JSON 格式化工具 — 免費線上美化與驗證 | Super Tools',
  meta: [
    { name: 'description', content: '免費線上 JSON 格式化工具...' },
    { property: 'og:title', content: 'JSON 格式化工具 — 免費線上美化' },
    { property: 'og:image', content: '/static/og/json-tool.png' },
  ],
});

檢測與驗證工具

設定完 Meta Tags 後，務必使用以下工具驗證效果：

  • Super Tools Meta 分析工具：輸入 URL 即可檢測頁面所有 Meta Tags 是否正確設定，包含 title 長度、description 長度、OG 標籤完整性
  • Super Tools OG 預覽工具：預覽網頁在 Facebook、LINE、X 等平台的社群分享卡片效果
  • Google Search Console：在「網址審查」功能中檢查 Google 實際讀取到的 title 和 description
  • Facebook Sharing Debugger（developers.facebook.com/tools/debug）：強制 Facebook 重新抓取 OG 資訊，清除舊的快取
  • X Card Validator（cards-dev.twitter.com/validator）：預覽 Twitter Card 效果
  • LinkedIn Post Inspector：預覽 LinkedIn 分享效果

常見問題（FAQ）

Q1：meta keywords 標籤還有用嗎？

完全沒有用。Google 自 2009 年起就不再使用 meta keywords 作為排名因素，Bing 也在 2014 年確認不使用它。設定 meta keywords 不會帶來任何 SEO 好處，反而可能讓競爭對手看到你鎖定的關鍵字。建議不要設定。

Q2：OG Image 被社群平台快取了怎麼更新？

Facebook 會快取 OG 資訊。更新 OG Image 後，需要到 Facebook Sharing Debugger 手動「抓取新資訊」來清除快取。LINE 的快取較為頑固，可能需要等待數小時到一天才會更新。一個技巧是更改 OG Image 的檔名或加上版本號參數（如 ?v=2）。

Q3：title tag 和 H1 標籤應該一樣嗎？

不需要完全一樣，但應該語意一致。title tag 要精簡（受字元限制），H1 可以更完整。例如 title 是「JSON 格式化工具 | Super Tools」，H1 可以是「免費線上 JSON 格式化工具 — 美化、驗證、壓縮一站完成」。兩者描述的是同一個主題，但措辭不同。

Q4：一個頁面需要設定多少個 Meta Tags？

核心必備的有 5 個：title、meta description、canonical、og:title、og:image。加上 viewport、charset、og:description、og:type、og:url、twitter:card 等，一個標準頁面通常有 12-15 個 Meta Tags。不需要設定過多標籤，專注在核心標籤的品質上更重要。

Q5：Next.js / Nuxt 等框架會自動處理 Meta Tags 嗎？

框架本身不會自動生成有意義的 Meta Tags，但它們提供了方便的 API 來設定。Next.js 的 metadata export、Nuxt 的 useHead() composable 都能讓你輕鬆為每個頁面設定獨特的 Meta Tags。建議建立一個 generateMetadata 工具函式，統一管理全站的 Meta Tags 格式。

總結

正確設定 Meta Tags 是 SEO 的第一步，也是投資報酬率最高的優化手段。從 title tag 的關鍵字佈局、meta description 的 CTR 優化，到 Open Graph 的社群預覽設定，每一個細節都會影響你的網站在搜尋引擎和社群平台上的表現。

建議立即使用 Super Tools 的 Meta 分析工具 檢測你的網站，找出需要優化的 Meta Tags。同時也推薦閱讀 網站 SEO 檢查清單 了解更全面的 SEO 優化項目，以及使用 OG 預覽工具 確認你的社群分享卡片是否完美呈現。