HTMLmeta标签怎么设置_元数据属性汇总【汇总】

标签无强制必填属性，但 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-Tag HTTP 头或 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 中动态写入——但后者对爬虫不友好，得权衡。