meta标签仅合法使用charset、name和http-equiv三类；charset必须为且置于最前，早于，否则中文乱码、SEO失效；description影响搜索摘要展示，需每页唯一、150–160字符、含核心关键词；viewport缺失将导致移动端无法被Google收录。
meta 标签本身没有“所有属性”可穷举，它只有两类合法用法：charset、name 和 http-equiv —— 其他任意写法（比如 property、scheme、itemprop）要么是无效的，要么属于其他规范（如 Open Graph、Schema），不能混为一谈。
必须放 charset 声明
只允许一种写法：</meta charset="UTF-8">。它必须是 中第一个标签，早于 <title></title>、任何 <meta name> 或 <link>。
- 位置错位会导致浏览器按默认编码（如 ISO-8859-1）解析开头字节，中文立即乱码，后续
description内容爬虫根本读不到 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">：HTML5 已废弃该用法，现代浏览器只认charset属性，且该写法在某些 CDN 缓存策略下可能被忽略 - 文件保存编码必须和声明一致；编辑器里存成 GBK 却声明 UTF-8，一样会出乱码
name="description" 是唯一影响 SERP 展示的 SEO meta
Google、Bing、百度均不使用 keywords，但 description 仍被用于搜索结果摘要（尽管不参与排名）。
- 长度控制在 150–160 字符内，超长会被截断，前 20 字需含核心关键词（用户扫视时最先看到）
- 不要堆砌关键词，也不要照抄
<h1></h1>；它本质是面向用户的“广告文案”，要能激发点击 - 没写
description时，搜索引擎会从正文中自动摘取片段，但不可控——可能截到代码块、导航栏或无关段落 - 动态页面（如 Vue/React SSR）容易漏掉这个标签，构建时需确保每个路由都注入对应描述
name="viewport" 不是 SEO 标签，但决定移动索引资格
Google 自 2019 年起实行移动优先索引（Mobile-First Indexing），viewport 配置错误等于主动放弃移动端收录权重。
立即学习“前端免费学习笔记（深入）”；
- 最简安全写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 加
user-scalable=no或maximum-scale=1会损害可访问性，部分国家法律（如 ADA、EN 301 549）可能认定为合规风险 - 缺失该标签时，iOS Safari 默认以 980px 渲染，文字小到无法阅读，用户跳出率飙升——而跳出率是 Google 判定页面质量的隐式信号
- 不要用
viewport模拟设备像素比（如target-densitydpi），Android 4.4+ 已彻底弃用
http-equiv 多数已过时，别滥用
除 refresh 和 X-UA-Compatible（仅 IE11 及更旧）外，其余 http-equiv 值基本失效或应由 HTTP 响应头替代。
-
<meta http-equiv="refresh" content="5; url=...">：触发跳转时无 301 状态码，SEO 权重不传递，且破坏浏览器后退栈；应改用服务端 301/302 -
<meta http-equiv="Content-Security-Policy">：不被任何主流浏览器支持，CSP 必须通过 HTTP 响应头设置 -
<meta http-equiv="Cache-Control">或Expires：前端无法覆盖服务端缓存策略，写了也无效；CDN 和反向代理优先读响应头 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">：仅对已停止支持的 IE 有效；2026 年起 Microsoft Edge 完全移除 IE 兼容模式，此标签可删除
真正关键的不是“写多少 meta”，而是确保 charset 位置绝对正确、description 每页唯一且人工撰写、viewport 不缺失——这三者出错，其他所有优化都会打折扣。尤其注意构建工具（Vite、Webpack、Next.js）常会覆盖或遗漏静态 meta，上线前务必检查生成的 HTML 源码。
