meta标签必须精准配置：charset须置于head最前防乱码，viewport必设以保障移动端可用，description需120–155字符且含核心关键词，keywords基本可删除。
meta 标签不是“填满就行”的装饰项，它直接决定页面能否被正确解析、是否在移动端可用、会不会被搜索引擎误判为低质内容。该删的必须删，该放的必须放对位置、用对值。
为什么 meta charset 必须放在
浏览器解析 HTML 是流式进行的，一旦遇到非 ASCII 字符（比如中文、emoji），而此时还没读到 meta charset，就会按默认编码（通常是 ISO-8859-1 或系统 locale）尝试解码——结果就是乱码，甚至导致后续 <script></script> 或 <style></style> 解析失败。
常见错误现象： 大量出现；控制台报 Uncaught SyntaxError: Invalid or unexpected token；Lighthouse 提示 “Document does not have a charset”。
-
meta charset="UTF-8"必须是中第一个标签（或紧随<title></title>后），不能写在<title></title>前面，也不能写成旧式meta http-equiv="Content-Type" - 不要重复写多个
charset，否则部分浏览器会忽略全部 - 服务端响应头中若已声明
Content-Type: text/html; charset=UTF-8，仍需保留该meta标签——HTML 规范要求双保险
meta name="viewport" 不配等于放弃移动流量
不加这行，iOS Safari 和大多数 Android 浏览器会以 980px 宽度渲染页面，再缩放显示，导致文字极小、按钮点不准、横向滚动条意外出现——这不是“看起来不太美”，而是用户根本没法用。
常见错误现象：手机上页面整体缩小、需要双指放大才能阅读；position: fixed 元素错位；Lighthouse 报 “Document doesn’t have a viewport meta tag”。
- 标准写法是：
<meta name="viewport" content="width=device-width, initial-scale=1">，不要加maximum-scale或user-scalable=no（违反 WCAG，且 iOS 10+ 已部分忽略） - 不要写成
content="width=375"这类固定像素值，会破坏响应式逻辑 - 如果项目需适配老版 UC 或 QQ 浏览器，可追加
minimal-ui（已废弃，仅作兼容兜底）
meta name="description" 写不好，等于把点击率让给别人
它不参与排名，但 Google、Bing 等绝大多数引擎会直接把它当搜索结果摘要展示。写得空洞、堆砌、超长或与正文无关，用户一眼划走。
常见错误现象：搜索结果里显示 “欢迎访问XXX官网” 或截断成 “前端开发工具与实战指南|CodeCraft…”；Lighthouse 提示 “Document does not have a meta description”；CMS 模板中所有页面共用同一段 description。
- 长度严格控制在 120–155 字符（含空格），超出会被截断，末尾加省略号
- 开头嵌入页面核心关键词，例如商品页写 “无线蓝牙耳机｜主动降噪｜30h续航｜XX品牌旗舰店”，别写 “我们提供各种耳机…”
- 避免引号、破折号、特殊符号（如 »、•），部分爬虫解析异常；也别用 “专业”“权威”“首选” 这类无效形容词
- 动态生成时注意 URL 参数影响，比如 /product?id=123 和 /product/123 应输出不同 description
meta name="keywords" 现在基本可以删了
Google 自 2009 年起明确忽略它；百度在 2013 年后也不再使用；Bing 同样不依赖。写错反而触发垃圾信号判定——比如逗号后没空格、堆砌 20 个词、复制标题内容。
常见错误现象：SEO 工具报 Warning: keywords meta tag ignored；页面被标记为 keyword stuffing；审计报告里要求“填写”，但实际填了也没用。
- 除非项目强制合规检查（如某些政务内网、军工 CMS），否则直接删除整行
<meta name="keywords" content="..."> - 真要填，只写 3–5 个精准匹配当前页主题的英文词，用英文逗号分隔，无空格，如：
content="html head, viewport config, seo meta" - 千万别从标题或 description 里复制粘贴——这是最典型的误用
最容易被忽略的是顺序和唯一性：charset 和 viewport 的位置错不了，但 title 和 description 的动态生成逻辑常被硬编码覆盖；canonical 的绝对 URL 也常因环境变量缺失变成相对路径——这些细节不出错，头部配置才算真正落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
