charset、viewport 和 description 是唯一需手写的三个 meta 标签：charset 必须紧贴 开头，否则旧版 ie 等会乱码；viewport 必须唯一且置于 最前、早于所有其他标签，content 须为 width=device-width, initial-scale=1.0；description 需每页唯一、120–155 字符、含核心关键词。
只写 charset、viewport 和 description 这三个，其他基本不用动。
为什么 charset 必须放在
它不是“建议放前面”，而是位置错了就直接乱码：如果 <meta charset="UTF-8"> 出现在 <title></title> 后面，旧版 IE 或某些 WebView 会先用 GBK 解析 HTML，中文标题、JS 字符串全变成问号或方块。它必须紧贴 开始，前面不能有空格、注释或任何内容。
viewport 写了也不生效的常见原因
不是 content 写错，而是被覆盖或没进最终 HTML：
-
<meta name="viewport">必须在最前，早于所有<link rel="stylesheet">和<script></script>—— 放在<title></title>后面都可能被忽略 - 不能存在两个
<meta name="viewport">，哪怕只是空格差异，后一个会静默覆盖前一个 - Next.js、Nuxt 等 SSR 框架默认注入 viewport，你手写的那行可能根本没进最终 HTML，得用浏览器“查看页面源代码”（不是开发者工具 Elements 面板）确认真实输出
- 错误写法：
<meta name="viewport" content="width=375, initial-scale=1">—— 在非 375px 宽设备上强制缩放，触发横向滚动条
description 怎么写才不白写
它不提升排名，但决定 Google 搜索结果页是否显示摘要、显示哪一段：
- 每页必须单独写，不能所有页面共用同一段
content；CMS 中要确保模板用了{{ page.description }}而非硬编码 - 长度控制在 120–155 个 Unicode 字符（含中文、空格），Chrome 实际截断约在第 155 个字符，超长会被省略
- 开头 60 字内塞入核心关键词，但必须自然通顺，比如产品页写
"iPhone 15 Pro 256GB 深空黑|A17 Pro 芯片|Pro 级摄像头|官网直供"，别写"iPhone, 手机, 苹果, 15 Pro, 256GB, 深空黑" - 如果没写
<meta name="description">，Google 可能从正文中抽一段，但不可控；抽到 admin 后台路径或 JS 注释里的字符串也常见
容易被忽略的是：框架生成的静态页（如 Hugo、Jekyll）和 SSR 页面（如 Next.js）中，description 很容易被模板变量漏掉或复用默认值，导致大量页面 description 相同——这会让 Google 认为内容重复，降低摘要展示概率。检查时别只看本地开发环境，一定要查部署后的真实 HTML 源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
