meta标签是浏览器和搜索引擎解析页面的关键配置，必须正确设置charset、viewport、description、robots等核心属性，否则会导致乱码、响应式失效、SEO归零等问题。
meta 标签不是装饰品，它不显示，但浏览器和搜索引擎靠它做关键决策。用错或漏掉核心属性，轻则页面乱码、移动端布局崩塌，重则 SEO 排名归零、缓存策略失效。
charset 属性：字符编码必须显式声明
不写 charset，浏览器可能按系统默认编码（如 Windows-1252）解析 UTF-8 页面，导致中文变问号、符号错位。HTML5 只支持一种写法：<meta charset="UTF-8">，不能写成 http-equiv="Content-Type" 形式。
常见错误现象：
- 页面中中文显示为 或方块
- 表单提交后后端收到乱码字符串
- 开发者工具 Network 面板显示“Failed to load response data”
注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须放在
<head>最前面（越早越好），否则前面的标签可能已被错误编码解析 - 值只能是
UTF-8（全大写，带短横线），不要写utf8、utf-8（小写）、UTF8 - 服务器响应头中的
Content-Type与该标签应一致，否则以响应头为准
name="viewport"：移动端适配的硬性门槛
没有它，手机浏览器会以桌面宽度（通常 980px）渲染页面，文字小得看不清，用户必须双指放大——等于放弃移动体验。
最简可用写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">
关键参数说明：
-
width=device-width：视口宽度 = 设备物理宽度（非像素数，是 CSS 像素） -
initial-scale=1.0：初始缩放为 1，禁用自动缩放 -
maximum-scale=1.0, user-scalable=no：慎用，会破坏可访问性（如视力障碍者无法放大）
容易踩的坑：
- 写成
width=375这类固定值，导致在 iPad 或折叠屏上严重错位 - 遗漏
initial-scale，iOS Safari 仍可能触发双击缩放逻辑 - 多个
viewportmeta 同时存在（比如框架注入了另一个），后者会覆盖前者
name="description" 和 name="robots"：影响搜索结果呈现的关键组合
搜索引擎结果页（SERP）中显示的摘要，几乎只来自 name="description"；而是否收录、是否追踪外链，则由 name="robots" 控制。
实操建议：
-
description内容长度控制在 120–155 字符之间，过短不展示，过长被截断。避免堆砌关键词，要自然陈述页面核心价值 -
robots常见合法值组合：index, follow（默认，可省略）、noindex, follow（不索引但允许爬取外链）、noindex, nofollow（彻底屏蔽） - 不要写
content="all"或content="none"，这些是非标准值，部分爬虫忽略 -
noarchive和nosnippet是独立指令，如需隐藏快照，应显式写出：content="noarchive, nosnippet"
注意：description 不影响排名权重，但显著影响点击率；robots 写错会导致整站消失在搜索结果里，且恢复周期长达数周。
http-equiv 属性：模拟 HTTP 头，但多数已过时或受限
现代浏览器对多数 http-equiv 值采取宽松或忽略策略。真正还有效的只有几个：
-
http-equiv="refresh"：仅限跳转用途，如content="0;url=https://example.com"。禁止用于倒计时刷新（SEO 惩罚+用户体验差） -
http-equiv="content-security-policy"：CSP 策略可在此声明，但更推荐通过 HTTP 响应头设置，优先级更高 -
http-equiv="X-UA-Compatible"：仅 IE 有效，现代项目可直接移除
已失效或危险的用法：
-
http-equiv="expires"、http-equiv="pragma"：缓存行为由 HTTP 响应头和Cache-Control决定，meta 无效 -
http-equiv="set-cookie"：现代浏览器完全忽略，且存在安全风险 -
http-equiv="default-style"：CSS 预加载机制已取代该功能
真实项目中，除非维护遗留系统，否则 http-equiv 应尽量少用——它的行为不可靠，调试困难，且容易与服务端配置冲突。
