必须置于最开头，否则浏览器用默认编码解析导致中文乱码；需紧随其后，缺失或错误将致移动端显示异常；description影响点击率而非排名；robots和keywords标签已基本废弃。
charset 必须放在 head 最前面，否则中文会乱码
浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文、emoji），就依赖 <meta charset="UTF-8"> 来确定解码方式。如果这行不在 最开头——哪怕只在 <title></title> 后面，浏览器就会用默认编码（通常是 ISO-8859-1 或系统 locale）先解析前面的内容，导致标题、description 甚至 script 标签里的字符串直接变成 或方块。
常见错误包括：
- 构建工具（如 Webpack/Vite）输出 HTML 时自动插入了
<title></title>在前，把<meta charset>挤到后面 - CMS 模板里混入了注释或空格，让
<meta charset>实际位置偏移 - 本地开发用 UTF-8，但 Nginx 或 CDN 缓存返回了未声明编码的响应头，浏览器 fallback 到错误编码
验证方法：打开 DevTools → Elements → 查看 开头是否严格为 <meta charset="UTF-8">，且无任何字符（包括 BOM、空格、换行）在其之前。
viewport 缺失或参数错，页面在手机上直接缩成一团
不加 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 和多数 Android 浏览器会按 980px 宽度渲染页面，再整体缩放进屏幕——结果是文字小得看不清，按钮点不准，Google 也判定为“移动端不友好”，影响移动优先索引。
关键细节：
-
width=device-width是核心，它让 CSS 像素宽度匹配设备逻辑宽度（如 iPhone 14 的 390px），不是物理像素，也不是固定值 375 -
initial-scale=1.0必须配对；单独写width=device-width在旧版 UC 或 iOS Safari 中仍可能触发默认缩放 - 禁止加
user-scalable=no或maximum-scale=1：既无法真正禁用双指缩放（新版 iOS 已忽略），又违反 WCAG 可访问性要求，会让视力障碍用户无法放大阅读 - 动态插入、塞在
里、或被 CMS 多次注入都会失效
调试命令：document.querySelector('meta[name="viewport"]')，确认取到的 content 值是你写的那个。
description 不影响排名，但决定用户点不点你
Google 和 Bing 都不拿 <meta name="description" content=""> 当排名因子，但它出现在搜索结果页（SERP）的摘要位置，直接影响点击率（CTR）。而 CTR 是搜索引擎判断内容质量的重要行为信号——低 CTR 的页面，后续曝光会被悄悄压低。
实操要点：
- 长度控制在 120–160 个字符（中文），超长会被截断，前 20 字最易被扫读，要放关键信息
- 每页唯一，精准概括本页内容，别套模板；例如商品页写“iPhone 15 Pro 256GB 深空灰色｜A17 Pro 芯片｜官网直发｜支持 24 期免息”，而不是“欢迎光临我们的商城”
- 避免堆砌关键词，更别和
<title></title>完全重复；用户看到两个一模一样的字段，会怀疑是垃圾站 - 没写 description 时，搜索引擎会从正文“猜”摘要，常截取代码块、导航栏或页脚，效果不可控
robots 和 keywords 标签现在基本可以省略
<meta name="robots" content="index, follow"> 是默认行为，显式声明毫无意义；只有当你需要 noindex（不让收录）或 nofollow（不传递权重）时才写。
<meta name="keywords" content=""> 自 2010 年起就被 Google 官方弃用，Bing 也基本忽略。保留它除了增加 HTML 体积、误导新人以为“写了就能提升排名”，没有实际价值。部分 CMS 或 SEO 插件会自动生成，建议直接关掉该功能。
真正该关注的是：<link rel="canonical" href="">（防重复内容）、<meta property="og:title">（微信/微博分享卡片）、<meta name="theme-color">（PWA 安装后状态栏颜色）——这些才是当前生效的元数据重点。
最容易被忽略的其实是顺序和唯一性：<meta charset> 必须是 第一个标签，<meta name="viewport"> 紧随其后，所有其他 name 类 meta 标签都只能出现一次。多写、错位、混用 http-equiv 和 name 属性，都会让爬虫或浏览器选择性忽略——不是报错，而是静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
