meta description需精准匹配内容且唯一，限155–160字符；lang必须置于html标签并正确声明如zh-cn；charset与viewport须紧随head之后；data-*用于结构化传参，非meta承载业务状态。
meta name="description" 和 content 的匹配逻辑必须精准
搜索引擎只取 content 值的前 155–160 字符作摘要，超出部分会被截断且不补全。如果你写的是泛泛而谈的“欢迎访问我们的网站”，不如直接留空——空 description 比低质 description 更容易被忽略。
常见错误是把 description 当成 SEO 堆砌关键词的入口，比如：<meta name="description" content="HTML meta 标签 HTML meta 标签 HTML meta 标签">。这不仅无效，还可能触发搜索算法降权。
- 每页必须唯一，不能复用模板文案；商品页就写具体型号+核心卖点，文章页就提炼首段结论
- 避免使用“本网站”“本页面”这类无意义主语，直接说“iPhone 15 Pro 钛金属机身，A17 Pro 芯片，支持 USB-C 传输与 ProRes 视频录制”
- 不要包含标点堆砌、电话号码、邮箱或 URL（除非是品牌官网域名本身）
lang 属性不是可选装饰，而是可访问性硬性依赖
lang 写错或缺失，屏幕阅读器会按默认语言（通常是英语）朗读中文内容，导致声调错乱、停顿失当，对视障用户构成实质性障碍。
它必须出现在 标签上，而不是某个 div 或 p 里。子元素若语言切换（如引一段英文文献），才用局部 lang="en" 覆盖。
- 中国大陆简体中文用
lang="zh-CN"，不是zh或zh-cn（大小写敏感） - 繁体中文站点用
lang="zh-TW"或lang="zh-HK"，不能混用 - 如果页面含多语言混合内容（如中英双语菜单），每个语言片段都应单独标注
lang
charset 和 viewport 必须放在 head 最前面
浏览器解析 HTML 是流式进行的。如果 <meta charset="UTF-8"> 不在 开头几行，前面的标签（比如 <title></title>）可能已被按错误编码渲染，造成标题乱码——此时再声明 charset 也晚了。
同理，<meta name="viewport" content="width=device-width, initial-scale=1.0"> 若靠后，iOS Safari 可能在识别 viewport 前已按默认缩放渲染一次，导致闪屏或布局错位。
- 这两条
<meta>应紧接在之后，早于<title></title>、<link>、<script></script> - 不要用
http-equiv="Content-Type"替代charset属性——后者是 HTML5 标准且更可靠 - viewport 中别加
user-scalable=no，它违反 WCAG 可访问性原则，且 iOS 14+ 已部分无视该设置
data-* 属性才是跨页面传递上下文的实际载体
很多人误以为 meta 标签能承载业务状态，比如存个用户 ID 或订单号。但 meta 是静态元数据，只供外部服务（如爬虫、社交平台）读取，JS 无法靠它驱动交互逻辑。
真正需要关联维度时，应该用 data- 属性挂载结构化信息，再由 JS 解析并参与流程。比如跳转到详情页前，在按钮上写：@#@#@#@#@#@#@#@#@#@0。
- 接收页用
document.currentScript?.dataset或location.href解析参数，而非试图从<meta>里读 -
data-值建议 JSON 序列化后存储复杂结构，比如data-context='{"source":"search","query":"ssd"}' - 避免用
data-存敏感字段（token、密码），它暴露在 DOM 中，任何脚本都可读取
实际项目里最容易被忽略的，是 lang 和 charset 的位置与时序——它们不像功能代码那样报错，但一旦出问题，影响的是真实用户的可访问性体验，且难以被自动化工具覆盖检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
