标签无强制必填属性,但 name 或 http-equiv 必须其一才能生效;charset 是唯一可独立使用的属性,且须置于 最前。

HTML <meta> 标签的必填属性有哪些
没有“必填”属性,但不写 name 或 http-equiv,<meta> 就几乎没用——浏览器和爬虫只靠这两个字段识别元数据意图。
常见错误是只写 content,比如:<meta content="en">,这行代码完全被忽略,因为没告诉浏览器“这是语言声明”还是“这是作者名”。
-
name用于页面级描述(如description、keywords、author),配合content使用 -
http-equiv模拟 HTTP 响应头(如Content-Type、Refresh),此时content值需符合对应协议规范 -
charset是唯一可单独存在的属性:<meta charset="UTF-8">,它不依赖name,且必须放在最前面
SEO 相关 <meta name> 哪些还有效
Google 已明确不使用 keywords,Bing 也基本忽略;description 仍是搜索结果摘要的主要来源,但仅当它比页面正文更贴切时才会被采用。
容易踩的坑:堆砌关键词、超长(建议 ≤155 字符)、与页面内容无关。实际中,很多 CMS 自动生成的 description 是空值或模板占位符,反而让搜索引擎 fallback 到截取正文。
立即学习“前端免费学习笔记(深入)”;
- 有效且推荐:
<meta name="description" content="简明概括本页核心内容"> - 已失效:
<meta name="keywords" content="seo,优化,关键词">(纯冗余) - 有条件有效:
<meta name="robots" content="noindex, nofollow">,但优先级低于X-Robots-TagHTTP 头或robots.txt
<meta http-equiv> 还有哪些真正在用的场景
绝大多数 http-equiv 已被淘汰(如 Expires、Cache-Control 应由服务器头控制),目前真正被广泛支持且有实际价值的只剩两个:
-
Content-Type:已被<meta charset>取代,仅在无法修改 HTML 开头时作为兼容方案(不推荐) -
Refresh:仍被支持,但仅限跳转用途,例如<meta http-equiv="Refresh" content="0; url=https://example.com/">;禁止用于页面内定时刷新(影响可访问性和 SEO) - 注意:
<meta http-equiv="X-UA-Compatible" content="IE=edge">在 IE 停服后已无意义,现代项目应直接移除
移动端适配和 Open Graph 元数据怎么写才不白写
不加 <meta name="viewport">,响应式 CSS 就等于没写;不加 Open Graph 标签,分享到微信、微博、Discord 时就只能显示标题+默认图,控制权全交给平台自动抓取。
关键点在于:Open Graph 属性名必须带 og: 前缀,且 og:url、og:title、og:type 是基础三件套;图片 og:image 推荐尺寸 ≥1200×630px,否则可能被裁切或降质。
- 必备视口:
<meta name="viewport" content="width=device-width, initial-scale=1"> - 基础 Open Graph:
<meta property="og:url" content="https://example.com/page">、<meta property="og:title" content="页面标题">、<meta property="og:image" content="/thumb.jpg"> - 注意:
property不是name,混用会导致社交平台完全读不到
复杂点在于动态页面:URL、标题、图片往往来自 CMS 或前端状态,硬编码 <meta> 会失效。这时候得靠服务端渲染注入,或用 JS 在 document.head 中动态写入——但后者对爬虫不友好,得权衡。











