<meta>标签至关重要：charset必须置于<head>最前以防乱码；viewport必需配置以保障移动端正常交互；description需精准控制长度并动态更新，三者顺序与写法错误均会导致严重问题。
<meta> 标签不是装饰品，它直接决定页面能不能被正确读取、在手机上能不能点准按钮、搜索结果里会不会被用户忽略。
为什么 <meta charset="UTF-8"> 必须放在 <head> 最前面
浏览器是边下载边解析 HTML 的。一旦遇到中文、emoji 或其他非 ASCII 字符，而此时还没读到 <meta charset="UTF-8">，就会用默认编码（比如 ISO-8859-1）硬解——结果就是乱码，甚至让后续的 <script> 报 Uncaught SyntaxError: Invalid or unexpected token。
- 必须紧接
<head>开始标签之后，不能在<title>前面，也不能在<title>后面拖太远 - 只写一次，重复写多个
charset会导致部分浏览器全部忽略 - 即使服务端已返回
Content-Type: text/html; charset=UTF-8，仍要保留该标签——HTML 规范要求“双保险” - 别用旧式写法
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，它在 Safari 和某些 WebView 中可能失效
<meta name="viewport"> 不配，移动端就等于没做
不加这行，iOS Safari 和多数安卓浏览器会按 980px 宽度渲染页面，再整体缩放显示——文字小得看不清，fixed 元素错位，横向滚动条意外出现，不是“不好看”，是根本没法交互。
- 标准写法是
<meta name="viewport" content="width=device-width, initial-scale=1"> - 别写死
width=375或user-scalable=no，这会破坏响应式逻辑，也违反 WCAG 可访问性要求 - 老版 UC/QQ 浏览器若需兼容，可追加
minimal-ui（已废弃，仅兜底），但不要作为默认配置 - 这个标签不能靠 JS 动态注入，iOS WebView 对运行时插入的
viewport元标签基本不识别
<meta name="description"> 写不好，等于把点击率白送别人
它不参与 SEO 排名，但 Google、Bing 等引擎会直接把它当搜索结果摘要展示。写空洞、堆砌关键词、超长或与正文无关，用户一眼划走。
立即学习“前端免费学习笔记（深入）”；
- 长度严格控制在 120–155 字符（含空格），超出会被截断，末尾不自动加省略号
- 开头嵌入页面核心关键词，比如商品页写
无线蓝牙耳机|主动降噪|30h续航| - 避免模板化内容，CMS 里所有页面共用同一段 description 是常见雷区
- SPA 场景下必须用框架专用方案（如
useHead、React Helmet）动态更新，静态写死无效
最容易被忽略的是顺序和上下文：一个 charset 放错位置，整页 JS 都可能崩；一个 viewport 被 JS 动态覆盖，移动端就彻底失能；description 里混进不可见字符或 BOM，长度计算就全乱了。
