有一回面试前端，面试官问我：”你说一下 <meta> 标签有哪些用法？”

我当时心想，这还不简单——“charset、keywords、description、viewport……” 然后我说了四个之后卡住了。

面试官微微一笑：”那你知不知道 theme-color 和 color-scheme？”

我说我确实不知道。那次面试我挂了，但那之后我花了一个下午把 MDN 上关于 meta 的文档全部过了一遍，整理了一份清单。这个习惯我一直保留到现在——任何时候觉得自己”知道”，就去翻一遍 MDN，总有你没见过的 tag。

一句话理解： <meta> 是网页的”元数据层”，它告诉浏览器、搜索引擎、和各种第三方工具”这个页面是谁、该怎么对待它”。

怎么分组理解 Meta 标签

Meta 标签看起来多，其实可以分成 6 组，每组 2-5 个标签。分组记忆法比死记硬背好用得多。

1. 基础元数据（每页必加）

1
2
3
4
5
6
7
8
<!-- 字符编码：一定要在 head 的第一行 -->
<meta charset="utf-8">

<!-- 页面标题——居然不是 meta，是 title 标签 -->
<title>我的网站 - 一个关于...的博客</title>

<!-- 视口控制：移动端必备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这三项基本是强制要求了。缺少 charset 可能导致中文乱码，缺少 viewport 会导致移动端缩放出问题。

经验之谈： 我见过一个项目 charset 写在了 title 之后——然后页面在部分浏览器上渲染出了乱码。charset 必须放在 head 的前 1024 字节内，这是 HTML 规范的要求。

2. SEO 相关（搜索引擎怎么看你的页面）

1
2
3
4
5
6
7
8
9
10
11
<!-- 页面描述：搜索结果里显示的那段小字 -->
<meta name="description" content="一个关于前端开发和工具效率的个人博客，分享真实踩坑经验">

<!-- 关键词：搜索引擎已经不怎么参考了，但加上没坏处 -->
<meta name="keywords" content="前端开发,HTML5,CSS,JavaScript,效率工具">

<!-- 搜索引擎抓取控制 -->
<meta name="robots" content="index, follow">

<!-- 作者 -->
<meta name="author" content="飞鲤">

关于 description 有个容易被忽略的细节——它也是社交分享时默认的描述。比如你的页面没有 OG 标签，微信、Twitter 在抓取时就会 fallback 到 description。

3. 社交分享（被看见的 meta）

社交分享是很多人会忽略的一块。如果你的页面要被分享到微信、Twitter、Facebook，就需要这些：

1
2
3
4
5
6
7
8
9
10
11
<!-- Open Graph（Facebook、微信、众多社交平台使用） -->
<meta property="og:title" content="文章标题">
<meta property="og:description" content="文章描述">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章标题">
<meta name="twitter:description" content="文章描述">
<meta name="twitter:image" content="https://example.com/cover.jpg">

关于 OG 标签的具体用法，我在另一篇文章里有详细介绍，这里不展开了。

4. 浏览器行为控制

1
2
3
4
5
6
7
8
9
10
11
<!-- IE 兼容模式：优先使用最新引擎 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 缓存控制 -->
<meta http-equiv="cache-control" content="no-cache">

<!-- 国内双核浏览器强制使用 webkit 内核 -->
<meta name="renderer" content="webkit">

<!-- 禁止百度移动搜索转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp">

X-UA-Compatible 现在已经不太需要了——IE 已经退役，Edge 默认就是 Chromium 内核。不过如果你要支持老旧系统，加上它也没坏处。

5. 移动端与 PWA（2026 年最重要的 meta 们）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- iOS 添加到主屏后全屏显示 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- iOS 状态栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- iOS 添加到主屏的标题 -->
<meta name="apple-mobile-web-app-title" content="飞鲤的自留地">

<!-- 自动识别电话号码和邮箱（不想让数字变链接就用这个） -->
<meta name="format-detection" content="telephone=no, email=no">

<!-- Android Chrome 主题色——非常实用 -->
<meta name="theme-color" content="#2d8cf0" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">

<!-- 颜色方案：告诉浏览器这个页面支持浅色和深色 -->
<meta name="color-scheme" content="light dark">

theme-color 是我近几年最喜欢的一个 meta 标签。它让手机浏览器顶部栏的颜色和你的网站融为一体——视觉上非常统一。而且现在支持 dark mode 了！

6. 安全与引用

1
2
3
4
5
<!-- 控制 HTTP Referer 的发送策略 -->
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- Content Security Policy：最强大的安全头之一 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

关于 referrer，我分享一个真实的经验：之前我网站的外链统计一直不准，排查了两天才发现是因为 referrer 策略太严格，很多第三方站点不发送 referer 信息。最后调整成 strict-origin-when-cross-origin——既保护隐私又不影响统计。

2026 年 Meta 标签清单速查表

分类 标签名 是否必加 说明
基础 charset ✅ 强制 UTF-8 是唯一选择
基础 viewport ✅ 强制 移动端必备
SEO description ✅ 推荐 搜索结果摘要
SEO robots 🟡 按需 默认是 index,follow
社交 og:title ✅ 推荐 分享标题
社交 twitter:card 🟡 按需 Twitter 专用
平台 theme-color ✅ 推荐 提升视觉统一感
平台 apple-mobile-web-app-capable 🟡 按需 PWA 场景
安全 referrer ✅ 推荐 隐私保护
安全 CSP 🟡 按需 高级安全需求

META 里有两个容易被忽略的细节

第一，http-equiv 等价于 HTTP 头部。大多数 http-equiv 的作用和直接在服务端配置 HTTP 头部是一样的。区别在于 HTTP 头部的优先级更高。

1
2
3
<!-- 以下两种写法效果接近，但 HTTP 头部优先级更高 -->
<meta http-equiv="refresh" content="5; url=https://example.com/">
<!-- 等价于 HTTP 头：Refresh: 5; url=https://example.com/ -->

第二，meta 标签的顺序确实有影响。浏览器解析 HTML 时是从上到下的，charset 必须出现在前 1024 字节以内。其他 meta 的顺序虽然没有硬性要求，但习惯上把基础 meta 放在前面，社交 meta 放在后面。

相关推荐

P.S. 写完这篇文章之后我又去翻了一遍 MDN，果然发现了一个之前没注意到的 meta——<meta name="google" content="notranslate">，用来禁止 Google 翻译对页面进行自动翻译。说实话，这些 meta 标签就像武功秘籍，你以为你练完了，翻到下一页发现还有新招式。