必须放在中且只能出现一次的是字符集声明和视口设置：须为第一个标签，不可缺失。
meta 标签不控制页面样式或行为，它只向浏览器、爬虫和第三方服务传递元信息。用错位置、重复声明、滥用 keywords 或写死过期时间，反而会干扰解析或触发缓存异常。
哪些 meta 必须放在
字符集声明和视口设置是硬性要求，漏掉或放错位置会导致页面乱码或移动端布局崩溃：
-
<meta charset="utf-8">必须是中第一个标签（部分旧浏览器依赖此顺序）；不能写成<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已被普遍视为反模式，会打断用户操作、破坏前进/后退栈，且对无障碍不友好；跳转逻辑应改用 JavaScriptwindow.location.href或服务端 301/302 -
content-security-policy可以用，但强烈建议通过 HTTP 响应头设置，<meta http-equiv="Content-Security-Policy">无法覆盖内联脚本白名单等关键策略 -
pragma和expires对缓存控制基本失效——浏览器现在主要依赖Cache-Control响应头；写这些 meta 可能让你误以为缓存被禁用，实则无效
容易被忽略但影响真实的细节
meta 标签不是“写了就起作用”，它的实际效果高度依赖上下文：
- 多个同名
namemeta（如两个description）时，浏览器和爬虫通常只取第一个，后面被静默丢弃 -
author和copyright纯属可选，不参与 SEO，也不被任何主流工具读取；如果需要版权信息，应在页面底部用语义化 HTML（如<footer></footer>）呈现 - 移动端微信内置浏览器对
viewport的解析有轻微差异，若发现缩放异常，尝试补上maximum-scale=1，但不要锁死user-scalable
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
