<meta charset="UTF-8">必须置于<head>最前面，因浏览器解析HTML时会提前扫描前1024字节寻找编码声明，若未及时发现则按默认编码（如ISO-8859-1）解码，导致中文乱码、DOM异常或脚本错误。

charset 必须放在 <head> 最前面，否则浏览器可能已按错误编码解析后续标签，导致乱码或解析中断。

为什么 meta charset 位置不能错

浏览器在解析 HTML 时，一旦遇到第一个非 ASCII 字符（比如中文标题里的“页”），就会回退到默认编码（通常是 ISO-8859-1）；如果 <meta charset="UTF-8"> 写在 <title> 后面，<title> 中的中文就很可能被截断或显示为 。W3C 明确要求该标签必须是 <head> 中**首个可执行元数据标签**。

• 正确顺序：<meta charset="UTF-8"> → <title> → 其他 <meta>
• 错误写法：<title>首页</title><meta charset="UTF-8">（已晚）
• 不推荐用 http-equiv="Content-Type" 替代，兼容性差且易被忽略

viewport 配置里哪些值真不能删

width=device-width 和 initial-scale=1.0 是响应式底线，缺一不可；而 user-scalable=no、maximum-scale=1.0 这类限制项，在 WCAG 2.2 及 Google Search Console 2026 年新规中已被明确标记为「无障碍风险项」，会降低页面评级。

• 最小安全配置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 禁用缩放（user-scalable=no）会导致 iOS VoiceOver 失效、Android TalkBack 缩放异常
• minimum-scale 和 maximum-scale 建议留空，交由用户控制

title 和 description 的长度与 SEO 实际影响

Google 搜索结果目前截断 <title> 为约 60 字符（含空格），<meta name="description"> 为约 155 字符；但实际索引权重更看重前 30 字是否精准匹配搜索意图，而非堆砌关键词。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

• <title> 应以核心业务词开头，例如：<title>React 组件通信｜前端开发指南</title>，而非“首页｜xxx公司”
• description 不是 SEO 关键词仓库，它是用户点击前看到的摘要，需自然陈述价值
• 多个页面共用同一 description 会被 Google 视为低质内容，影响收录

favicon 和 Open Graph 标签容易被忽略的路径细节

<link rel="icon"> 默认只对根路径生效；社交分享卡片（og:image）若用相对路径，Facebook 或微信内置浏览器可能因 referer 域名不同而 404。

• favicon 推荐同时提供两种格式：<link rel="icon" href="/favicon.ico" sizes="32x32"> + <link rel="icon" href="/favicon.svg" type="image/svg+xml">
• Open Graph 图片必须用绝对 URL，例如：<meta property="og:image" content="https://example.com/assets/share.jpg">
• og:image:width 和 og:image:height 建议显式声明，避免平台拉伸失真

真正难的不是写对某一行标签，而是理解每个 <meta> 背后被谁读取、在什么时机触发、出错时表现为何种现象——比如 robots.txt 和 meta robots 冲突时以哪个为准，这类边界情况几乎从不在文档首页写明。