您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

HTML5 Meta 標籤完整指南：Viewport、SEO、瀏覽器相容與行動裝置適配

編輯：程式設計綜合問答

Meta 標籤基礎認知

<meta> 提供文件層級的中繼資料，不顯示在頁面上，供瀏覽器、搜尋引擎、社群分享爬蟲等解析。HTML5 未強制預定義 name 值，但業界形成了事實標準。

核心分類與常用屬性

1. 檔案編碼與相容模式（HTTP-Equiv 類）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 強制 IE 使用最新渲染引擎 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

http-equiv 模擬 HTTP 回應標頭，瀏覽器解析時生效。
charset 建議改用 <meta charset="UTF-8"> (HTML5 簡寫)。

2. SEO 關鍵標籤（Name 類）

<meta name="description" content="頁面描述，150-160 字元，搜尋結果摘要">
<meta name="keywords" content="關鍵字1,關鍵字2,關鍵字3"> <!-- 現代搜尋引擎權重極低 -->
<meta name="author" content="作者名稱">
<meta name="robots" content="index, follow"> <!-- all | none | noindex | nofollow -->

3. 行動裝置 Viewport（響應式核心）

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">

屬性	說明	建議值
width	虛擬視窗寬度	device-width (裝置螢幕寬度)
height	虛擬視窗高度	device-height (較少用)
initial-scale	初始縮放比例	1.0 (100%)
minimum-scale	最小縮放	1.0 (防止過度縮小)
maximum-scale	最大縮放	5.0 (允許放大，無障礙需求)
user-scalable	是否允許使用者縮放	yes (無障礙建議)，App 介面可設 no
target-densitydpi	目標螢幕密度 (Android 專屬，已棄用)	device-dpi / high-dpi / medium-dpi / low-dpi / 值

最佳實務：width=device-width, initial-scale=1 滿足 90%+ 場景，避免 user-scalable=no 違反無障礙規範。

4. 社群分享優化 (Open Graph / Twitter Card)

<meta property="og:title" content="分享標題">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://example.com/thumb.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter 標題">
<meta name="twitter:description" content="Twitter 描述">
<meta name="twitter:image" content="https://example.com/thumb.jpg">

5. 瀏覽器廠商專屬

<meta name="renderer" content="webkit"> <!-- 360 瀏覽器強制 WebKit 核心 -->
<meta name="force-rendering" content="webkit"> <!-- QQ 瀏覽器 -->
<meta name="format-detection" content="telephone=no, email=no, address=no"> <!-- iOS Safari 禁用自動偵測電話/信箱 -->

PC 與行動端差異總結

PC 端：重 charset、X-UA-Compatible、SEO 標籤、Open Graph。
行動端：必須宣告 viewport，否則瀏覽器預設 980px 寬度導致內容縮小難讀；加強 format-detection、apple-mobile-web-app-capable (PWA) 等。

完整範本（建議放在 <head> 最前）

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="頁面描述">
    <meta property="og:title" content="標題">
    <meta property="og:description" content="描述">
    <meta property="og:image" content="圖片網址">
    <title>頁面標題</title>
</head>

掌握 Meta 標籤分類與核心屬性，即可針對 SEO、行動適配、社群分享、瀏覽器相容精準配置，提升網站專業度與使用者體驗。