正确书写 标签需确保：① 必须置于 内且 charset 为首个标签；② http-equiv 与 name 不可混用；③ viewport 紧随 charset 或 title 后；④ description 仍有效但须精准简练；⑤ Open Graph/Twitter Card 需用绝对 URL 并校验参数。
怎么写 <meta> 才不被浏览器忽略
很多 <meta> 标签写了但没效果，根本原因是位置或属性不合法。浏览器只在 内解析 <meta>，且必须在 <title></title> 之前（尤其 charset）；http-equiv 和 name 不能混用同一标签——比如写成 <meta http-equiv="description" name="description"> 就会被直接跳过。
常见错误现象：viewport 不生效、中文乱码、SEO 描述未被爬虫抓取。
-
<meta charset="UTF-8">必须是中第一个标签（无条件） -
<meta name="viewport" content="width=device-width, initial-scale=1">要紧随<title></title>或<meta charset>之后，否则 iOS Safari 可能忽略 -
http-equiv类（如refresh、X-UA-Compatible）本质是模拟 HTTP 响应头，仅对老 IE 或特定场景有效，现代浏览器基本不处理http-equiv="expires"这类
name="description" 和 name="keywords" 还有必要写吗
Google 官方明确表示不使用 keywords，Bing 也早已弃用；description 仍被搜索结果摘要采用，但前提是内容与页面主体强相关、长度控制在 155 字符内（超长会被截断），且不能堆砌关键词。
使用场景：SEO 基础露出、社交分享卡片 fallback（当 Open Graph 缺失时）。
立即学习“前端免费学习笔记（深入）”；
- 别复制正文第一段充数——搜索引擎会识别并降权
- 避免用「网站名称 | 关键词1 | 关键词2」这种模板，语义断裂，点击率低
- 动态页面建议服务端渲染真实描述，而不是所有页面共用同一段
<meta name="description">
Open Graph 和 Twitter Card 元标签怎么配才不出错
社交平台分享时显示异常（图挂了、标题错乱、描述为空），90% 是因为 og: 或 twitter: 属性值缺失、路径错误或协议不匹配。
关键参数差异：og:image 必须是绝对 URL（https:// 开头），且图片尺寸建议 ≥ 1200×630px；twitter:card 必须设为 summary_large_image 才能展示大图，仅设 summary 会强制降级为小图+文字。
-
og:url应指向规范的 canonical 地址（带 trailing slash 或不带，需全站统一） -
og:type别乱填，website和article行为差异很大（后者触发发布时间、作者等字段校验） - 调试用：
https://developers.facebook.com/tools/debug/和https://cards-dev.twitter.com/validator，不是“保存就生效”，要主动抓取刷新
哪些 <meta> 会影响首屏性能或兼容性
<meta http-equiv="refresh"> 会强制跳转或重载，打断用户操作，且无法被 Chrome 93+ 的 <code>document.visibilityState 拦截；<meta name="robots"> 设为 <code>noindex 会让页面从搜索结果消失，但不会阻止爬虫抓取资源（JS/CSS 仍会加载）。
移动端特别注意：<meta name="format-detection"> 在 iOS 上默认启用电话/邮箱自动识别，若页面有数字编号（如订单号 1800-123-4567），可能被误转为可点击电话链接。
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">对 IE11 以下有效，现代项目可安全删除 -
<meta name="apple-mobile-web-app-capable" content="yes">配合manifest.json使用才有意义，单独写只是个开关信号 - 所有
<meta>都不参与 CSSOM 构建，但过多冗余标签会略微增加 HTML 解析时间（微秒级，但审计工具会标红）
最容易被忽略的是：不同环境（开发/测试/生产）下 og:url、canonical、robots 的值必须动态切换，硬编码本地地址或测试域名会导致 SEO 泄露或索引混乱。
