<meta charset="UTF-8">必须是<head>内首个标签，否则中文乱码；<html lang="zh-CN">不可缺失，否则影响可访问性与SEO；viewport须紧随charset和title后，避免移动端布局抖动。
charset 必须紧贴 开头，否则中文直接乱码
浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文），但还没读到 <meta charset="UTF-8">，就会按默认编码（通常是 ISO-8859-1）解码，导致已加载的文本变成 或方块。这不是后期 JS 能修复的——解析阶段就错了。
-
<meta charset="UTF-8">必须是<head>内第一个标签，前面不能有任何字符（包括 BOM、空格、注释） - 用 VS Code 打开文件，右下角确认编码显示为 UTF-8 without BOM；若显示 “UTF-8 with BOM”，需另存为无 BOM 版本
- Node.js 模板（如 EJS）里常见错误：
<% if (cond) { %>后换行再写<!DOCTYPE html>，实际会插入不可见换行符，破坏位置要求 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">—— 这是 HTML4 写法，HTML5 只认charset属性
lang 属性缺失会让屏幕阅读器读错声调，Google 降权
没写 lang，屏幕阅读器会按系统默认语言（比如英文引擎读中文）发音，声调全错；Google 也会弱化页面语言识别，导致简体中文内容出现在繁体搜索结果里，或本地化排名掉出前几页。
-
<html lang="zh-CN">是底线要求，不能只写zh；港澳台站点分别用zh-HK、zh-TW - 动态切换语言的 SPA（如 Vue/React），必须同步更新
document.documentElement.lang，否则 i18n 切换后辅助技术仍读旧语言 - 嵌套 iframe 时，子页面也要声明自己的
lang，不继承父级 —— 否则粤语内容可能被普通话引擎朗读 - CSS 中
:lang(zh-CN)、自动引号quotes、字体 fallback 行为都依赖它，漏写会导致样式异常
viewport 放错位置，移动端 LCP 和 CLS 直接恶化
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 若晚于 <link> 或 <script> 加载，iOS Safari 会先以桌面视口渲染一次再重排，触发两次布局，LCP 延迟、CLS 剧烈抖动。
- 它应紧随
<meta charset>和<title>之后，绝对不要放在 CSS/JS 引入之后 - 禁止用 JS 动态注入 viewport —— Safari 15+ 已废弃该行为，且首次渲染无法响应
- content 值中不要加多余空格，如
content=" width=device-width "在某些安卓 WebView 中会被截断 - 避免写
user-scalable=no：不仅违反 WCAG 1.4.4（用户缩放限制），还会让 Google 视为“移动不友好”而降权
description 和 canonical 不前置，SEO 权重被分走
搜索引擎爬虫解析 <head> 时，一旦遇到 <link rel="canonical"> 或 <meta name="description"> 就停止继续扫描后续 meta —— 如果它们靠后，可能根本没被读到。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="description">长度控制在 155–160 字符内，超长会被截断；避免与<title>完全重复 -
<link rel="canonical">必须写绝对 URL（含协议和域名），相对路径或协议相对路径（//example.com）在部分爬虫中失效 - 带参数的 URL（如
/article?id=123&ref=utm）必须指向 clean URL 的 canonical，否则 Google 认为是不同页面，分散权重 - noindex 标签要慎用：一旦生效，该 URL 从索引中彻底消失，连带反向链接权重也归零
真正卡住整站 SEO 和可访问性的，往往不是某一个标签写错，而是几个关键元信息的位置链断裂 —— charset 错位 → 中文乱码 → 页面被跳过；lang 缺失 → 辅助技术失效 → 可访问性审计失败 → 搜索引擎降低信任分；viewport 晚载 → 移动端体验差 → Google Core Web Vitals 不达标 → 排名雪崩。这些不是孤立问题，是环环相扣的解析前提。
