前端 meta 標籤與 SEO 效能的完整優化指南 v1

2026-05-26 4 次瀏覽

前端 Meta 標籤與 SEO 效能完整優化指南

搜尋引擎最佳化（SEO）不只是關鍵字堆砌，HTML <head> 裡的 meta 標籤配置往往才是決定能見度的關鍵。本文整理了一套可直接套用的完整方案，涵蓋基礎設定、社群分享、結構化資料到效能預載，讓你的頁面在搜尋結果與社群平台都能有最佳表現。

一、基礎 Meta 標籤

最核心的三個標籤是 <title>、description、canonical，缺一不可。

<head>
  <!-- 字符集與視窗 -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- 核心 SEO -->
  <title>頁面標題（50–60 字元）| 品牌名稱</title>
  <meta name="description" content="頁面描述，150–160 字元，包含主要關鍵字，吸引用戶點擊。" />
  <meta name="keywords" content="關鍵字1, 關鍵字2, 關鍵字3" />
  <link rel="canonical" href="https://yourdomain.com/page" />

  <!-- 語言與地區 -->
  <meta name="language" content="zh-TW" />
  <link rel="alternate" hreflang="zh-TW" href="https://yourdomain.com/zh-tw/page" />
  <link rel="alternate" hreflang="en" href="https://yourdomain.com/en/page" />
</head>

重點說明：

<title> 控制搜尋結果的藍色標題，每頁必須唯一，建議格式為「頁面主題 | 品牌名」
description 雖然不直接影響排名，但影響點擊率（CTR）甚大
canonical 告訴 Google「這是本頁的正式 URL」，避免重複內容被分散排名
hreflang 是多語系網站的必備設定，讓 Google 正確對應語言與地區

二、Open Graph：社群分享優化

Open Graph 協定（OGP）是 Facebook 制定的標準，現已被 LINE、Slack 等各大平台採用。設定後，分享連結時才會出現標題、圖片與描述的預覽卡片。

<meta property="og:type" content="website" />
<meta property="og:title" content="頁面標題" />
<meta property="og:description" content="社群分享描述，約 100–200 字元。" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:image" content="https://yourdomain.com/images/og-cover.jpg" />
<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="品牌名稱" />

OG 圖片規格：

尺寸建議 1200 × 630px（16:9 比例）
檔案大小控制在 1MB 以內
必須使用絕對路徑，不能用相對路徑

三、Twitter Cards

Twitter 有自己的卡片系統，需要額外設定才能在推文中顯示豐富預覽。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_twitter_handle" />
<meta name="twitter:title" content="頁面標題" />
<meta name="twitter:description" content="Twitter 分享描述。" />
<meta name="twitter:image" content="https://yourdomain.com/images/twitter-cover.jpg" />

twitter:card 有四種類型：summary、summary_large_image、app、player，一般內容頁建議用 summary_large_image。

四、結構化資料（JSON-LD）

結構化資料讓 Google 更理解頁面內容，有機會在搜尋結果出現「精選摘要」、星星評分、FAQ 展開等富媒體搜尋結果（Rich Results），大幅提升版面佔比與點擊率。

建議使用 JSON-LD 格式（相較於 Microdata，更易維護且不污染 HTML 結構）：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "頁面名稱",
  "description": "頁面描述",
  "url": "https://yourdomain.com/page",
  "publisher": {
    "@type": "Organization",
    "name": "品牌名稱",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yourdomain.com/logo.png"
    }
  }
}
</script>

常見 Schema 類型對照：

頁面類型 @type 一般網頁 WebPage 文章 / 部落格 Article 電商商品 Product 常見問題 FAQPage 麵包屑導覽 BreadcrumbList 在地商家 LocalBusiness

五、效能相關資源提示

這部分常被忽略，卻對 Core Web Vitals 影響顯著。

<!-- 預載關鍵資源（字型、首屏圖片） -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/images/hero.webp" as="image" />

<!-- DNS 預解析與預連線（降低第三方資源延遲） -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />

<!-- Favicon 完整配置 -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />

提示差異說明：

preload：強制預載，適合當前頁面一定會用到的關鍵資源
preconnect：預先建立連線（DNS + TCP + TLS），適合第三方 CDN
dns-prefetch：僅做 DNS 查詢，比 preconnect 更輕量，適合不確定是否用到的資源

六、爬蟲控制（Robots Meta）

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

<!-- 不希望被索引的頁面（登入頁、感謝頁、測試頁） -->
<meta name="robots" content="noindex, nofollow" />

<!-- 進階控制：限制摘要長度與圖片預覽 -->
<meta name="robots" content="max-snippet:160, max-image-preview:large" />

注意： noindex 只防止「出現在搜尋結果」，並不阻止爬蟲抵達頁面。若要完全封鎖，需搭配 robots.txt。

七、完整 `<head>` 範本

將以上所有設定整合成一份可直接使用的樣板：

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

  <title>頁面標題 | 品牌名稱</title>
  <meta name="description" content="150–160 字元的頁面描述。" />
  <link rel="canonical" href="https://yourdomain.com/page" />
  <meta name="robots" content="index, follow" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="頁面標題" />
  <meta property="og:description" content="社群分享描述。" />
  <meta property="og:url" content="https://yourdomain.com/page" />
  <meta property="og:image" content="https://yourdomain.com/images/og-cover.jpg" />
  <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="品牌名稱" />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="頁面標題" />
  <meta name="twitter:description" content="Twitter 分享描述。" />
  <meta name="twitter:image" content="https://yourdomain.com/images/twitter-cover.jpg" />

  <!-- 效能提示 -->
  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
  <link rel="dns-prefetch" href="//fonts.googleapis.com" />

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#ffffff" />

  <!-- 結構化資料 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "頁面名稱",
    "url": "https://yourdomain.com/page"
  }
  </script>
</head>

八、上線前檢查清單

項目標準 <title> 長度 50–60 字元，每頁唯一 description 長度 150–160 字元，含主要關鍵字 canonical 每頁必須設定 OG 圖片尺寸 1200 × 630px，< 1MB hreflang 多語系網站必備結構化資料驗證通過 Rich Results Test LCP < 2.5 秒 INP < 200 毫秒 CLS < 0.1