<meta>标签必须严格配置：charset需置于head首位置防乱码；viewport须含width、initial-scale等三参数防缩放异常；description和title需精准控制长度与语义以提升SEO点击率。
<meta> 标签不是“写完就完事”的配置项，它直接影响页面能否正确解码、是否适配移动端、在搜索结果里怎么展示。多数人复制粘贴后发现中文乱码、手机上缩放失常、SEO摘要不出现，问题基本都出在顺序、属性值或缺失关键项上。
字符编码 <meta charset="UTF-8"> 必须放在最前面
浏览器解析 HTML 时，遇到第一个非 ASCII 字符（比如中文）就立刻按当前编码解码。如果 <meta charset="UTF-8"> 没在 <title> 之前，而 <title> 里写了中文，浏览器可能已用默认编码（如 ISO-8859-1）错解了一次，再换 UTF-8 也救不回来。
- 必须是
<head>中第一个标签，紧贴<head>开始标签后 - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是旧写法，兼容性差且延迟生效 - UTF-8 后面不要加横线或空格，比如
"UTF-8 "或"UTF−8"（用了全角减号）都会失效
移动端视口 <meta name="viewport"> 的三个关键参数缺一不可
只写 width=device-width 不够，iOS Safari 和部分安卓 WebView 仍会以 980px 宽度渲染，导致文字小得看不清。常见错误是漏掉 initial-scale=1.0 或误设 user-scalable=yes（实际项目中多数需禁用缩放）。
-
width=device-width：让布局宽度等于设备物理像素宽度（不是 CSS 像素） -
initial-scale=1.0：强制初始缩放为 1:1，否则某些安卓浏览器默认放大 1.2 倍 -
maximum-scale=1.0和user-scalable=no要配套使用；单写user-scalable=no在 iOS 上可能被忽略
<meta name="description"> 决定搜索结果摘要，但长度和语义有硬限制
Google 通常截取前 155–160 个字符显示为搜索摘要，超出部分会被省略。更关键的是：它不参与排名算法，但影响点击率。很多人堆砌关键词，反而触发搜索引擎降权。
立即学习“前端免费学习笔记（深入）”；
- 内容必须与页面正文强相关，比如商品页就写具体型号+核心卖点，别写“最好的产品”这种空话
- 避免重复
<title>内容，两者应互补：标题是“是什么”，描述是“为什么值得点进来” - 不要包含特殊符号（如 ❗、➡️），部分搜索引擎会过滤或截断
- 长度控制在 150 字符内，可用在线工具实时预览截断效果
<title> 不只是浏览器标签页文字，它影响 SEO 和书签行为
用户收藏网页时，默认用 <title> 内容当书签名；搜索引擎把 <title> 当作页面主关键词锚点。但它不是越长越好，也不是越关键词堆砌越有效。
- 建议长度 50–60 个英文字符（约 16–20 个汉字），过长会被截断，且移动端标签页显示空间有限
- 重要关键词前置，比如“iPhone 15 Pro 购买指南｜XX商城”比“XX商城｜iPhone 15 Pro 购买指南”更利于识别主题
- 动态页面（如 CMS 或 SSR）要避免所有页面共用同一个
<title>，否则 Google 会视为重复内容
真正容易被忽略的，是 <meta charset="UTF-8"> 的位置和 <meta name="viewport"> 的缩放组合——这两个看似最简单的配置，一旦出错，后续所有优化都打折扣。其他元数据再完整，也救不回一个乱码或无法触控的页面。
