HTML文档结构的规范化与SEO权重分配逻辑

多个<h1>会降低页面可信度，因搜索引擎用其唯一标识主主题，出现多个则标记为“结构混乱”并降级内容可信度评分。

为什么多个 <h1> 会降低页面可信度

搜索引擎不靠数量计分，而是用 <h1> 定位页面唯一主主题。CMS 模板、Header 组件复用、SSR 渲染遗漏清理，都容易导致 DOM 中出现两个甚至更多 <h1>——比如页头一个「XX 博客」，正文又一个「Vue 3 响应式原理详解」。Google 不会把它们加权平均，而是标记为“结构混乱”，触发内容可信度降级。

实操建议：
- 打开浏览器开发者工具 → Elements 面板 → 输入 document.querySelectorAll('h1') 快速验证
- Next.js / Nuxt 等框架中，确保每个页面的 <h1> 是动态注入的真实标题，而非模板里未赋值的 <h1>{{ title }}</h1>
- 避免用 CSS 隐藏冗余 <h1>（如 display: none 或 visibility: hidden），这属于明确的隐藏文本风险行为

<title> 和 <h1> 内容不一致的实际影响

两者语义冲突时，Google 优先采信 <title>，但会记录该页面“标题与主体脱节”，影响内容质量评分。典型表现是：Lighthouse SEO audit 明确报出 “<h1> does not match page title”；搜索结果中点击率下降，因为用户看到标题和落地页首屏不匹配。

常见错误：
- <title> 是「React Server Components 实战｜CodeCraft」，<h1> 却是「欢迎来到我的前端小站」
- <h1> 塞满修饰词（“史上最全！2025终极版！！！”），而 <title> 是干净的技术短语
- 多语言站点中，中文页 <title> 含「zh-CN」，但 <h1> 是英文原文

<main> 缺失或重复对 SEO 的隐性打击

<main> 是搜索引擎识别“页面核心内容”的关键锚点。缺失时，爬虫可能将导航栏、侧边栏甚至页脚文本误判为主体；重复则让算法无法确定哪一块才是真实正文，尤其在 SPA 首屏渲染不完整、或 SSR 输出被 JS 覆盖的场景下，极易导致关键段落不被索引。

实操建议：
- 每个 HTML 文档必须且仅有一个 <main>，包裹真正面向用户的主体内容（如文章正文、产品参数表）
- <section> 不可替代 <main>：它用于同一主题下的逻辑分块（如「安装步骤」「配置说明」），不是主体容器
- 在 SSR/SSG 构建后，用 curl -s URL | grep '<main>' 或 Lighthouse 检查生成 HTML 是否含有效 <main>

DOM 树过深如何让 <h2> 以下内容失效

当嵌套超过 6 层且无语义标签中断（例如纯 <div class="wrapper"><div class="inner"><div class="content">…），部分爬虫会在解析中途截断，导致 <h2> 及其后续段落完全不进索引库。这不是理论风险，而是实测现象：某技术文档页 DOM 深度达 9 层，<h2> 下所有 <p> 和代码块均未出现在 Google 缓存快照中。

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

解决路径：
- 浏览器 Elements 面板按 Ctrl+Shift+P 输入 “Show DOM tree depth” 插件辅助检查（或手动数层级）
- 用 <header>、<nav>、<section> 替代纯 CSS 类嵌套，自然压平深度
- 动态渲染内容务必在首屏加载完成 500ms 内注入到浅层节点，避免延迟插入到深层 <div> 中

最易被忽略的点是：SEO 结构问题往往不出现在模板文件里，而出现在运行时实际输出的 HTML 中。JS 注入、服务端条件渲染、CDN 缓存旧版本 DOM，都可能让本地开发看着正常，线上却已失效。上线前必查生产环境的源码视图，而不是只信组件逻辑。