viewport和description是唯二必须手写且写对的meta标签；viewport须置于head最前、content为width=device-width,initial-scale=1.0，禁用缩放会损害可访问性；description须每页唯一、120–155字符、含核心关键词。
viewport 和 description 是唯二值得手写、且必须写对的 meta 标签；charset 要写，但位置错了会直接导致乱码；keywords 和 robots 默认值以外的写法，90% 场景都是多余甚至有害的。
viewport 标签为什么写了也不生效
不是 content 写错，而是被覆盖或加载时机不对：
-
<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 宽设备上强制缩放，触发横向滚动条
标准写法只有一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。加 maximum-scale=1.0 或 user-scalable=no 会破坏可访问性，除非产品明确要求禁用缩放。
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 注释里的字符串也常见
charset 标签位置错了会怎样
<meta charset="UTF-8"> 必须是 内第一个标签，紧贴 开始，前面不能有任何空白或注释：
- 如果它出现在
<title></title>后面，部分浏览器（尤其旧版 IE 和某些移动端 WebView）会先按系统默认编码（如 GBK）解析 HTML，导致中文标题、JS 字符串全乱码 - 它比
<meta http-equiv="Content-Type">更简洁、更可靠，HTML5 推荐只用前者 - 和
<meta name="viewport">一样，它不参与 SEO 排名，但影响页面能否正确渲染——错位等于埋雷，出问题时很难定位
真正影响 SEO 的只有 <title></title>、语义化标签（<h1></h1>、<article></article> 等）和页面实际文本质量；viewport 和 description 是交付底线，不是优化上限。写错一个，用户看到的就是错位布局或乱码标题，没有“再优化”的机会。
