HTML <meta> 参数详解

HTML <meta> 标签参数对照表

参数表

参数	值/示例	用途	引用来源
charset	UTF-8, GB2312, BIG5, ISO-8859-1	定义文档字符编码，防止乱码	[citation:2][5]
name		定义标准元数据类型（需配合content使用）
↳ viewport	width=device-width, initial-scale=1.0	移动端视口适配（宽度=设备宽度，初始缩放=1.0）	[citation:2][3][5]
↳ description	"网页描述内容"	搜索引擎结果显示的页面摘要（建议≤160字符）	[citation:3][4]
↳ keywords	"关键词1,关键词2"	页面关键词（SEO辅助，现代搜索引擎权重较低）	[citation:1][6]
↳ robots	index,follow, noindex,nofollow	控制搜索引擎索引与链接跟踪行为	[citation:3][6]
↳ theme-color	"#4285f4"	设置浏览器地址栏/系统UI主题色	[citation:3]
↳ author	"作者名"	声明页面作者信息	[citation:2][4]
↳ generator	"WordPress"	声明网站生成工具	[citation:1][4]
↳ format-detection	telephone=no, email=no	禁用自动识别电话号码/邮箱	[citation:7]
http-equiv		模拟HTTP响应头行为（需配合content使用）
↳ refresh	"5; url=https://example.com"	页面自动刷新或重定向（数字=秒数）	[citation:1][4]
↳ X-UA-Compatible	"IE=edge", "IE=edge,chrome=1"	强制IE使用最新渲染引擎	[citation:3][7]
↳ content-security-policy	"default-src 'self'"	内容安全策略（防XSS攻击）	[citation:3]
↳ expires	"Mon, 12 May 2025 00:00:00 GMT"	设置页面过期时间（GMT格式）	[citation:1][4]
↳ cache-control	"no-cache", "no-store"	禁止浏览器缓存页面	[citation:3][6]
property	og:title, og:image, twitter:card	Open Graph/Twitter协议元数据
↳ og:title	"分享标题"	社交媒体分享时显示的标题	[citation:3][5]
↳ og:image	"https://image-url"	社交媒体分享缩略图	[citation:3][7]
↳ twitter:card	"summary_large_image"	Twitter卡片样式（大图/摘要）	[citation:3][5]
移动端专用
↳ apple-mobile-web-app-capable	"yes"	iOS全屏模式（隐藏浏览器UI）	[citation:3][7]
↳ screen-orientation	"portrait"	UC浏览器强制竖屏显示	[citation:7]
↳ full-screen	"yes"	UC浏览器强制全屏	[citation:7]
其他
↳ itemprop	name, image, description	微数据结构化数据（需配合itemscope）
↳ scheme	❌已废弃	早期定义元数据格式（HTML5废弃）	[citation:2][4]

---

示例代码

1. 基础元数据

<!-- 字符编码 -->
<meta charset="UTF-8">

<!-- 页面描述与关键词 -->
<meta name="description" content="网站描述内容">
<meta name="keywords" content="关键词1,关键词2">

<!-- 作者声明 -->
<meta name="author" content="作者名">

2. 移动端适配

<!-- 视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- iOS全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- 禁用电话/邮箱识别 -->
<meta name="format-detection" content="telephone=no, email=no">

3. 搜索引擎控制

<!-- 爬虫指令 -->
<meta name="robots" content="index,follow">

<!-- 禁止缓存 -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

4. 浏览器兼容性

<!-- IE渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 页面自动刷新 -->
<meta http-equiv="refresh" content="5">

<!-- 重定向 -->
<meta http-equiv="refresh" content="0; url=https://newdomain.com">

5. 社交媒体优化

<!-- Open Graph协议 -->
<meta property="og:title" content="分享标题">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

<!-- Twitter卡片 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">

6. 高级功能

<!-- 内容安全策略 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- 微数据结构 -->
<div itemscope itemtype="https://schema.org/Product">
  <meta itemprop="name" content="产品名称">
  <meta itemprop="image" content="product.jpg">
</div>

<!-- 主题颜色 -->
<meta name="theme-color" content="#4285f4">

7. Windows专属

<!-- 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#da532c">

<!-- 浏览器配置 -->
<meta name="msapplication-config" content="/browserconfig.xml">

参考实践模板