<meta charset="UTF-8">必须唯一且置于<head>最前，否则致乱码；<meta name="viewport">为响应式必需，最简写法是content="width=device-width, initial-scale=1"，禁用user-scalable=no以保可访问性。
HTML4/5混用时 <meta> 常见报错和渲染异常
浏览器不会因 <meta> 标签缺失或写法老旧直接崩溃，但现代构建工具（如 Webpack、Vite）、Lighthouse 审计、SEO 工具会报 Missing charset declaration、Viewport not configured 或 no description meta 等警告；更实际的影响是：移动端页面缩放失控、搜索引擎摘要截断、社交媒体分享图/标题不显示。
<meta charset> 必须声明且只能出现一次
HTML5 废弃了 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 这种冗余写法。新标准强制使用简短、无歧义的 <meta charset="UTF-8">，且必须出现在 <head> 最前面（在任何 <title> 或其他 <meta> 之前）。
- 若同时存在旧写法和新写法，部分浏览器会忽略后者
- 若
charset声明位置靠后（比如在<title>后），可能导致中文乱码或解析中断 - 值必须是
UTF-8（全大写），写成utf-8或UTF8在某些旧版 IE 中可能失效
<head> <meta charset="UTF-8"> <title>页面标题</title> <meta name="description" content="页面描述"> </head>
<meta name="viewport"> 不是可选项，而是响应式基础
没有该标签，移动端 Safari、Chrome 会以桌面视口宽度（通常约 980px）渲染页面，导致内容被压缩、字体过小、点击区域难操作。HTML5 文档中它已成事实标准，虽未写入规范正文，但所有现代浏览器强制依赖。
- 最简可用写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免使用
user-scalable=no—— 会破坏可访问性，WCAG 不合规 - 不要设死
maximum-scale或minimum-scale，影响视力障碍用户缩放 - 若项目需兼容 iOS Safari 旧版本（shrink-to-fit=yes（仅 Safari 识别，无害）
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
SEO 和社交分享依赖的 name / property 元数据不能只靠 description
单纯保留 HTML4 风格的 <meta name="description"> 只能服务搜索引擎摘要；微信、微博、Facebook、Twitter 等平台读取的是 Open Graph（og:）或 Twitter Card（twitter:）协议字段。这些不是 HTML5 新增，但已成为元数据事实子集，漏掉会导致分享时图/标题/描述全为空白。
立即学习“前端免费学习笔记（深入）”；
-
og:title、og:description、og:image是最低三件套，og:url强烈建议补上 -
twitter:card推荐设为summary_large_image（带大图） - 所有
og:image路径必须是绝对 URL（含https://），相对路径会被忽略 - 避免多个
og:image标签堆叠——部分平台只取第一个
<meta name="description" content="这是页面的简短说明"> <meta property="og:title" content="页面标题"> <meta property="og:description" content="这是页面的简短说明"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com/page"> <meta name="twitter:card" content="summary_large_image">
真正容易被忽略的不是“加哪些标签”，而是顺序、编码位置、URL 绝对性、以及 viewport 的 scale 行为是否与 JS 动态缩放逻辑冲突——这些地方一出错，问题往往延迟暴露，等上线后才从用户反馈里发现。
