<meta charset="UTF-8">必须是<head>内第一个标签，紧随其后是viewport标签，二者缺一不可且不可被注释、空格或脚本阻塞；title应紧接viewport之后，所有link和script须置于其后以保障解析顺序与渲染一致性。
meta charset 必须放在最前面
浏览器解析 HTML 时，一旦遇到非 UTF-8 编码的字节就会触发重排或乱码，而 meta charset 是唯一能提前“锁住”编码解析的方式。如果它被放在 title 或其他 meta 后面，某些旧版 IE 或移动端 WebView 可能已开始按默认编码（如 ISO-8859-1）解析，导致标题、脚本甚至 CSS 文件名出现乱码。
正确顺序只有一条铁律：<meta charset="UTF-8"> 必须是 <head> 内第一个标签，且不能有任何注释、空格或换行前置。
- ✅ 正确：
<head> <meta charset="UTF-8"> <title>Page</title> ...
- ❌ 错误：
<head> <!-- SEO meta --> <meta charset="UTF-8">
（注释会干扰早期解析） - ❌ 错误：
<head> <p><meta charset="UTF-8">
（空白行也可能触发部分解析器 fallback）
viewport meta 紧跟 charset 之后
meta viewport 影响页面初始缩放和布局视口宽度，它的作用在 DOM 构建前就已生效。若它延迟加载（比如被 JS 动态注入），iOS Safari 可能已完成首屏渲染并锁定缩放行为，导致响应式失效。
立即学习“前端免费学习笔记（深入）”；
把它紧接在 meta charset 后，能确保浏览器在解析 HTML 初期就获取视口策略，避免重绘或强制重排。
- 推荐顺序：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 不要混入其他
meta（如description或author）中间 —— 它们不影响渲染流程，但 viewport 必须早于任何可能触发布局的资源声明。 - 注意：某些 CMS 模板会把
viewport放在title后，这虽不报错，但在低端 Android WebView 上曾观察到首屏横向滚动残留问题。
title 标签位置影响 SEO 和可访问性
title 不参与渲染，但它是浏览器标签页显示、书签保存、屏幕阅读器朗读的第一内容。搜索引擎抓取时，通常只读取 <head> 前 2KB，若 title 太靠后，可能被截断或忽略。
实际测试中，Googlebot 在 2023 年更新后对 title 位置容忍度提高，但 Bing 和 DuckDuckGo 仍倾向优先提取靠前的 title；更重要的是，辅助技术（如 NVDA）在 DOM 加载初期就缓存 title，延迟设置会导致朗读为空或旧值。
- 最佳实践：在
meta charset和meta viewport之后、所有link和script之前放置title。 - 避免动态改写：
document.title = "New"虽可行，但对 SEO 无效，且可能触发屏幕阅读器二次播报，造成干扰。 - 注意大小写与空格：
<title> My Site </title>开头结尾空格会被修剪，但中间多个空格会保留 —— 这会影响语音朗读节奏，建议用单空格分隔关键词。
link rel="stylesheet" 和 script 的位置陷阱
虽然严格来说它们不属于“元数据”，但它们插入 <head> 的位置会直接影响元数据的实际效果。例如，一个内联 style 块若依赖 prefers-color-scheme，而 CSS 文件尚未加载完成，就可能错判用户偏好。
更常见的是：第三方分析脚本（如 Google Analytics 的 <script async>）若放在 meta description 前，可能因执行时机过早，抓取不到已设置的 title 或 og:title。
- 原则：所有阻塞渲染的
link rel="stylesheet"应放在title后、meta name="description"前；这样既保证样式可用，又不拖慢元数据提取。 - 异步脚本（
async或defer）建议统一移到<body>底部 —— 放在<head>里即使加了async，仍可能因 DNS 预读或 preconnect 干扰元数据解析顺序。 - 特别注意：
link rel="canonical"和 Open Graph 标签（如og:url）应尽可能靠近title，因为社交媒体爬虫（如 Facebook Sharing Debugger）只扫描前几行，靠后容易遗漏。
实际项目里最容易被忽略的不是顺序本身，而是构建工具自动注入的标签 —— 比如 Webpack 的 HtmlWebpackPlugin 默认把 meta 插在 title 后，但若你手动在模板里加了 charset，又忘了删插件默认生成的那一个，就变成两个 charset，触发浏览器兼容性降级。
