meta charset 和 http-equiv 的顺序会影响浏览器解析吗
会，而且影响很实际：如果 <meta charset> 不在文档前 1024 字节内，某些旧版 IE 或移动端 WebView 可能按默认编码（如 ISO-8859-1）解码后续 HTML，导致中文乱码或脚本加载失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">必须放在最开头，紧随标签之后，前面不能有注释、空格或任何其他标签 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">等兼容性声明可以放它后面，但不要前置 - 避免用
http-equiv="Content-Type"替代charset—— 它已被废弃，且不被所有浏览器识别
viewport meta 的常见写法错误和响应式失效原因
写错一个参数，整个页面在手机上就可能缩放错乱或禁止缩放。最典型的是把 initial-scale 设为 1.0 却漏掉 width=device-width，结果浏览器按桌面宽度渲染，文字小到看不清。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时包含
width=device-width和initial-scale=1，缺一不可 - 不要加
user-scalable=no—— 它违反 WCAG 可访问性要求，iOS Safari 13+ 已部分忽略该指令 - 避免
maximum-scale=1，它会锁死缩放，对视力障碍用户不友好，也常被现代浏览器降级处理 - 示例正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1">
SEO 相关的 meta name 如何避免被搜索引擎忽略
不是写了 description 或 keywords 就会被收录。Google 已完全忽略 keywords，而 description 超过 155 字符会被截断，含重复词或堆砌关键词反而降低可信度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="description" content="...">控制在 120–155 字符之间，用自然语言描述页面核心内容，开头就点明主题 - 彻底删掉
<meta name="keywords">—— 百度也已多年不使用它，留着只增体积 - 如果页面是文章类，可加
<meta property="og:title">等 Open Graph 标签，但注意这些属于property，不是name，需配合prefix声明或服务端支持 - 确保
description与<title></title>不重复，也不照抄正文第一段
robots meta 和 X-Robots-Tag 的优先级冲突怎么处理
当 HTML 里写了 <meta name="robots" content="noindex">，但 HTTP 响应头里又带了 X-Robots-Tag: index，搜索引擎以响应头为准 —— 头部声明优先级永远高于 HTML meta。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 静态页用
<meta name="robots">足够；动态页或需精细控制（比如仅禁止图片索引），优先用 HTTP 响应头X-Robots-Tag - 不要两者混用同一策略，例如既在 header 发
X-Robots-Tag: noindex，又在 HTML 写noindex—— 多余且易维护错位 - 测试是否生效，别只看源码，用 curl 查响应头：
curl -I https://example.com/page，确认X-Robots-Tag存在且拼写正确 -
noindex, follow是常见合理组合；noindex, nofollow通常没必要，除非页面完全无关且不想传递权重
最容易被忽略的是：所有 meta 标签都依赖文档解析时机。如果 JS 动态插入 <meta>，多数爬虫和预渲染服务根本看不到 —— 它们不执行 JS，只读取初始 HTML 字符流。
