必须放在<head>中且只能出现一次的是字符集声明和视口设置：<meta charset="utf-8">须为第一个标签，<meta name="viewport" content="width=device-width, initial-scale=1">不可缺失。

meta 标签不控制页面样式或行为，它只向浏览器、爬虫和第三方服务传递元信息。用错位置、重复声明、滥用 keywords 或写死过期时间，反而会干扰解析或触发缓存异常。

哪些 meta 必须放在 <head> 里且只能出现一次

字符集声明和视口设置是硬性要求，漏掉或放错位置会导致页面乱码或移动端布局崩溃：

• <meta charset="utf-8"> 必须是 <head> 中第一个标签（部分旧浏览器依赖此顺序）；不能写成 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">，后者已过时且可能被忽略
• <meta name="viewport" content="width=device-width, initial-scale=1"> 必须存在，否则 iOS Safari 默认按 980px 渲染，文字极小；user-scalable=no 在现代项目中应避免，影响可访问性
• <meta http-equiv="X-UA-Compatible" content="IE=edge"> 仅在需兼容 IE11 的遗留系统中保留，2026 年起多数项目可直接移除

SEO 相关的 meta 怎么写才不被搜索引擎忽略

Google 已明确表示不使用 keywords，Bing 也基本弃用；真正起作用的是 description 和结构化标记配合：

Google SEO GEO Auto Index

Google索引API工具。用于提交URL以供Google索引。支持两种模式：“auto-index”（获取sitemap，与缓存对比差异并提交...）

下载

• description 内容必须与页面主体强相关，长度控制在 155–160 字符内（超出会被截断），避免堆砌关键词；例如产品页就写具体参数和用途，别写“优质、专业、领先”这类空泛词
• robots 不要全局设 noindex，除非是测试页或登录后页面；静态内容页建议用 <meta name="robots" content="index, follow">（默认值，可省略）
• 想提升搜索结果摘要质量，优先加 <link rel="canonical" href="..."> 去重，比靠 description 更可靠

http-equiv 类型哪些还在实际生效

大多数 http-equiv 是模拟 HTTP 响应头，但现代服务器配置更可控，前端应尽量交由后端或 CDN 处理：

立即学习“前端免费学习笔记（深入）”；

• refresh 已被普遍视为反模式，会打断用户操作、破坏前进/后退栈，且对无障碍不友好；跳转逻辑应改用 JavaScript window.location.href 或服务端 301/302
• content-security-policy 可以用，但强烈建议通过 HTTP 响应头设置，<meta http-equiv="Content-Security-Policy"> 无法覆盖内联脚本白名单等关键策略
• pragma 和 expires 对缓存控制基本失效——浏览器现在主要依赖 Cache-Control 响应头；写这些 meta 可能让你误以为缓存被禁用，实则无效

容易被忽略但影响真实的细节

meta 标签不是“写了就起作用”，它的实际效果高度依赖上下文：

• 多个同名 name meta（如两个 description）时，浏览器和爬虫通常只取第一个，后面被静默丢弃
• author 和 copyright 纯属可选，不参与 SEO，也不被任何主流工具读取；如果需要版权信息，应在页面底部用语义化 HTML（如 <footer>）呈现
• 移动端微信内置浏览器对 viewport 的解析有轻微差异，若发现缩放异常，尝试补上 maximum-scale=1，但不要锁死 user-scalable