meta标签必须放在<head>里，否则无效；浏览器仅在解析<head>时读取<meta>，错放<body>或末尾会导致charset乱码、viewport缩放异常、description被忽略等静默失效问题。
meta 标签必须放在 里，否则无效
浏览器只在解析 <head> 时读取 <meta>，如果错放到 <body> 或文档末尾，charset、viewport 等关键行为会失效——比如页面乱码或移动端缩放异常，但控制台通常不报错，排查起来容易绕弯。
常见错误现象包括：
• 中文显示为方块或问号（charset 失效）
• 手机上页面被缩得很小、文字挤成一团（viewport 未生效）
• SEO 工具提示“缺少 description”（name="description" 被忽略）
- 所有
<meta>必须嵌套在<head>内，且建议紧贴<head>开始位置 -
<meta charset="UTF-8">应该是<head>中第一个标签，避免解析器用默认编码（如 ISO-8859-1）误读后续内容 - HTML5 中
<meta charset="UTF-8">是唯一合法写法，http-equiv="Content-Type"已过时，不要混用
viewport meta 控制移动端显示，参数不能省略
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 不是可选装饰，而是响应式布局的硬性前提。漏掉 initial-scale=1.0 会导致 iOS Safari 自动缩放，文字模糊；漏掉 width=device-width 则页面按桌面宽度渲染，横向滚动不可避免。
真实使用场景中：
• 某些 CMS 模板默认不加 viewport，导致 H5 页面在 iPhone 上无法点击按钮
• 用框架生成的静态页若未显式声明，PWA 安装后启动画面错位
立即学习“前端免费学习笔记（深入）”；
- 必须同时包含
width=device-width和initial-scale=1.0，二者缺一不可 - 避免添加
user-scalable=no——它违反 WCAG 可访问性要求，且 iOS 14+ 已部分忽略该指令 - 不需要写
maximum-scale或minimum-scale，现代移动端浏览器已足够智能
description 和 robots meta 影响 SEO 和爬虫行为
name="description" 不只是给搜索引擎看的，它直接决定搜索结果中的摘要行是否吸引点击；而 name="robots" 决定页面能否被索引——这两项一旦配置错误，流量损失是静默发生的，没有报错提醒。
典型问题：
• 页面上线后几周没自然流量，查发现 content="noindex" 被误保留在测试环境配置中
• 搜索结果摘要全是乱码或截断的 HTML 标签，因为 content 值里混入了未转义的双引号或换行
-
description长度建议控制在 155–160 字符内，超长会被截断，且含关键词但不堆砌 -
robots值区分大小写：noindex, follow合法，NoIndex, Follow可能被部分爬虫忽略 - 不要用
keywords，主流搜索引擎（Google/Bing）已完全忽略该字段，留着反而占用 HTML 体积
Open Graph 和 Twitter Card meta 决定社交分享效果
当用户把链接发到微信、微博、Twitter 或 Slack 时，平台不是靠抓页面正文生成卡片，而是优先读取 property="og:title"、property="og:image" 这类 Open Graph 标签。没配或配错，分享出来就是裸 URL 或默认站标。
容易被忽略的细节：
• og:image 必须是绝对 URL（https://example.com/cover.jpg），相对路径会被忽略
• 微信内置浏览器对 og:description 有长度限制（约 200 字），超长直接截断不显示省略号
• Twitter 的 twitter:card 类型必须匹配图片尺寸，summary_large_image 要求图片宽高比 2:1，否则 fallback 成小图
- 至少配齐
og:title、og:description、og:image、og:url四项，缺一不可 -
og:image推荐尺寸 1200×630 px，格式优先用 JPG 或 PNG，避免 WebP（部分旧版微信不支持） - 调试时用 Facebook Sharing Debugger 或 Twitter Card Validator 直接抓取并反馈缺失项，别只靠本地预览
<meta> 最常出问题的地方不在语法，而在上下文：比如构建工具自动注入的 meta 覆盖了手动写的，或者 SSR 渲染时服务端和客户端生成的 description 不一致导致 SEO 抓取错乱。这类问题不会报错，只能靠人工核对源码或用 curl -s URL | grep meta 查原始响应。 
