必须唯一且置于最前，否则致乱码；为响应式必需，最简写法是content="width=device-width, initial-scale=1"，禁用user-scalable=no以保可访问性。
HTML4/5混用时
浏览器不会因 标签缺失或写法老旧直接崩溃，但现代构建工具（如 Webpack、Vite）、Lighthouse 审计、SEO 工具会报 Missing charset declaration、Viewport not configured 或 no description meta 等警告；更实际的影响是：移动端页面缩放失控、搜索引擎摘要截断、社交媒体分享图/标题不显示。
HTML5 废弃了 这种冗余写法。新标准强制使用简短、无歧义的 ，且必须出现在 最前面（在任何 之前）。
- 若同时存在旧写法和新写法，部分浏览器会忽略后者
- 若
charset声明位置靠后（比如在 - 值必须是
UTF-8（全大写），写成utf-8或UTF8在某些旧版 IE 中可能失效
<meta charset="UTF-8"><title>页面标题</title><meta name="description" content="页面描述">
没有该标签，移动端 Safari、Chrome 会以桌面视口宽度（通常约 980px）渲染页面，导致内容被压缩、字体过小、点击区域难操作。HTML5 文档中它已成事实标准，虽未写入规范正文，但所有现代浏览器强制依赖。
SEO全流程：诊断、页面优化、技术SEO、内容策略、外链建设；触发关键词包括SEO、搜索排名、网站优化、关键词、标题描述、结构化数据、Core Web Vitals、sitemap、robots.txt、SEO审计等。
- 最简可用写法：
- 避免使用
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 风格的 只能服务搜索引擎摘要；微信、微博、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 动态缩放逻辑冲突——这些地方一出错，问题往往延迟暴露，等上线后才从用户反馈里发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
