直接在<head>中写<meta name="key" content="value">即可定义自定义元数据，浏览器不校验name是否标准，但建议用短横线分隔的扁平键名（如app-version），避免斜杠或点；content需HTML编码；JS应使用带引号的选择器读取，如document.querySelector('meta[name="app-version"]')。
如何用 <meta name> 定义自定义元数据
直接在 <head> 中写 <meta name="your-key" content="your-value"> 就行，浏览器不校验 name 值是否“标准”，只要符合 HTML5 语法（非空字符串、不包含双引号或大于号），就可被解析和读取。
常见错误是把 name 写成带斜杠或点的路径形式（如 name="app/config/version"），这虽不会报错，但部分工具（如某些 SEO 分析器或爬虫）会忽略它；更稳妥的做法是用短横线分隔的扁平键名，例如 name="app-version" 或 name="build-timestamp"。
-
name值建议只含 ASCII 字母、数字、短横线（-）和下划线（_），避免空格、斜杠、点、冒号 -
content值若含特殊字符（如&、"），需 HTML 实体编码（&、"） - 多个同名
<meta name>标签会被全部保留，JavaScript 可通过document.querySelectorAll('meta[name="your-key"]')拿到全部
哪些 name 值会被浏览器或工具识别
不是所有 name 都“有效”——这里的“有效”指被浏览器原生支持或被主流工具（如 Google Search Console、Facebook Sharing Debugger）主动提取。真正有语义的只有少数几个，比如 description、keywords、author、viewport（注意：viewport 实际上是 name，但它是 <meta> 的特例，不走通用元数据机制）。
自定义 name 不会被搜索引擎用于排名，也不会触发浏览器行为，但它对前端 JS 和构建流程很有用。例如：
-
<meta name="build-id" content="a1b2c3">→ 供 JS 上报埋点时附带构建标识 -
<meta name="env" content="staging">→ 运行时判断环境，避免硬编码 -
<meta name="i18n-locale" content="zh-CN">→ 初始化 i18n 库前读取语言偏好
用 JavaScript 读取自定义 <meta name> 的正确方式
别用 document.querySelector('meta[name=xxx]') 不加引号——如果 name 含短横线（如 app-version），CSS 选择器会误判为减法运算，必须加引号： document.querySelector('meta[name="app-version"]')。
更健壮的写法是封装一个安全读取函数：
function getMeta(name) {
const el = document.querySelector(`meta[name="${name}"]`);
return el ? el.getAttribute('content') : null;
}
// 使用
const buildId = getMeta('build-id'); // 返回字符串或 null
- 若
name来自不可信输入（如 URL 参数拼进选择器），必须先白名单过滤或正则校验，防止 XSS - 服务端渲染（SSR）页面中，该 meta 标签需在首屏 HTML 中存在，否则客户端 JS 读不到
- 注意 DOM 加载时机：确保在
DOMContentLoaded后或<script>放在</body>前执行
与 <meta property>（Open Graph）混用时的注意事项
property 是 RDFa 属性，和 name 并存不冲突，但语义不同：name 是通用元数据，property 主要用于社交平台分享（如 og:title）。两者可以共存于同一页面，但不能混用属性——<meta name="og:title" content="..."> 是无效的，必须写成 <meta property="og:title" content="...">。
容易踩的坑：
- 误以为
name="og:xxx"能被 Facebook 解析 —— 实际必须用property - 用构建工具自动注入
<meta name>时，模板引擎未转义双引号，导致生成的 HTML 标签提前闭合（如content='v1.2.3 "beta"'缺少实体编码） - 某些 CMS 或静态站点生成器（如 Jekyll、Hugo）会过滤未知
name值，需查文档确认是否支持自定义字段透出
自定义 <meta name> 最大的限制不在语法，而在于“谁会读它”——你得明确这个标签是给人看的（开发者调试）、给 JS 读的（运行时配置），还是给某个内部工具链消费的。没有统一规范，也就没有统一解析逻辑，所以键名约定和文档同步比技术实现更重要。
