HTML头部元信息meta标签全攻略（面试必问）-html教程-PHP中文网

必须置于最顶部，紧贴起始标签后，前1024字节内无其他内容（含注释、空格、），否则浏览器将回退至iso-8859-1等默认编码导致乱码。

html头部元信息meta标签全攻略（面试必问）

HTML 的 <meta> 标签没有“全攻略”这种东西——它只是按需使用的声明工具，不是功能模块。面试问得多，是因为容易混淆语义、滥用或忽略兼容性细节。

charset 声明必须放在最前面

浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文），而 <meta charset> 又没在前 1024 字节内出现，就可能触发编码回退（如 ISO-8859-1），导致乱码。这不是“偶尔出错”，是确定性行为。

<meta charset="UTF-8"> 必须写在最顶部，紧贴开始标签之后，前面不能有任何内容（包括注释、空格、<title></title>）
不要写 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> —— 这是旧写法，且解析优先级更低，现代 HTML5 只认 charset 属性
服务端 HTTP Header 中的 Content-Type: text/html; charset=utf-8 优先级高于 <meta>，但不能依赖它覆盖前端缺失声明

viewport 设置不等于响应式，但写错会直接失效

<meta name="viewport"> 控制移动端缩放行为，但它的参数组合稍有偏差，页面就会“不缩放”或“不可缩放”，和设计稿完全对不上。

墨见

一款AI图像与设计工具，主要用于MockingBot 推出的一人公司 AI 智能体，24 小时陪伴你的全栈虚拟团队，适合需要提升相关任务效率的用户。

下载

最基本可用组合：<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 是关键——它让布局视口宽度等于设备物理像素宽度除以 devicePixelRatio 后的 CSS 像素数；写成 width=375 或 width=1024 会导致横滚或缩放异常
禁止用户缩放（user-scalable=no）已被 iOS Safari 10+ 忽略，安卓部分浏览器也逐步弃用，别再当“防作弊手段”用
如果项目用 rem/vw 布局，还要注意 initial-scale=1.0 和 maximum-scale=1.0 的组合是否影响调试时的手动缩放

SEO 相关 meta 多数已失效，但 description 仍被 Google 用

Google 在 2019 年后明确表示：keywords 完全不参与排名；author、generator 等只用于内部日志，不影响索引。唯一还起实际作用的是 description，但它不是关键词堆砌区。

<meta name="description" content="..."> 内容会被 Google 搜索结果摘要直接采用，长度建议控制在 155–160 字符（含空格），超长会被截断
不要重复标题文字，也不要写“本站提供XX服务”，要描述页面核心价值，比如：“React 18 useTransition 实战：如何避免 UI 卡顿并保留用户输入”
robots 仍有用：<meta name="robots" content="noindex, nofollow"> 可阻止收录，但仅适用于无法配置服务器头或 robots.txt 的临时页面
Open Graph 和 Twitter Card 使用 property 或 name（如 <meta property="og:title" content="...">），它们不属于传统 SEO meta，但分享到社交平台时必须存在

HTTP-Equiv 不是 JS 替代品，滥用会阻塞渲染

http-equiv 模拟 HTTP 响应头，但浏览器执行它时，会同步处理、可能中断解析流程。尤其 refresh 和 set-cookie 已被主流浏览器限制或废弃。

<meta http-equiv="refresh" content="5; url=/new"> 是跳转兜底方案，但会触发完整页面重载，且无状态传递能力；现代应用应优先用 JS window.location.replace()
http-equiv="X-UA-Compatible" 只对 IE 有效，且仅在 IE8–IE11 生效；content="ie=edge" 已无意义，可安全删除
http-equiv="Content-Security-Policy" 虽支持，但 CSP 应优先通过 HTTP Header 发送；用 <meta> 设置时，无法设置 report-uri 或 report-to，且策略生效时机晚于 Header 版本

真正难的不是记住所有 name 值，而是判断某个 <meta> 是否真被当前目标环境（浏览器、爬虫、微信 WebView、iOS WKWebView）识别和执行。比如微信内置浏览器对 apple-mobile-web-app-capable 的支持程度，就和 Safari 不完全一致——这种差异不会写在 MDN 上，得靠实测。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！