Google移动优先索引硬性要求唯一非空<main>，<section>须带标题且独立建模，<time datetime>需合规格式，Lighthouse“Document structure”审计直接模拟爬虫校验逻辑。
爬虫只认，不认“看起来像主内容”的div
Google 移动优先索引（2023 年起 100% 启用）不会从 <body> 顶部逐行解析，而是直接跳过 <header>、<nav>、<footer>，定位第一个合法 <main> 开始提取首屏文本、链接和标题层级。这不是“偏好”，是硬性规则。
常见错误现象：<main> 为空、嵌套在 <footer> 里、页面存在多个 <main>、或用 JS 动态插入后未触发重抓取——全部触发“结构冲突”警告，整块内容权重打折。
-
<main>必须唯一，且包裹所有真实可索引的主内容（正文、核心 CTA、关键数据） - SPA 页面中，服务端渲染必须输出非空
<main>内容；仅留<div id="root"></div>等同于告诉爬虫“这里没主内容” - 登录弹窗、客服电话、广告位塞进
<main>→ 被判为“元信息污染”，主内容可信度下降
不是的替代品，没就等于没写
<section> 在爬虫眼里不是“视觉分块”，而是“可独立建模的内容单元”。它必须携带语义锚点，否则会被忽略。
使用场景：单篇博客、商品详情页、FAQ 列表项等需要被单独识别、索引、甚至富摘要展示的内容。
立即学习“前端免费学习笔记（深入）”；
- 每个
<section> 必须以 <h2> 或带 aria-labelledby 的元素起始；纯 <section><p>...</p></section> 不参与主题建模
- 新闻列表页中，应为每条新闻包裹独立
<section>，而非整个列表套一个 —— 否则爬虫误判为“一篇长文”，而非“10 篇独立报道”
-
<section> 与 <article> 不可混用：<article> 表示可独立分发、复用、被 RSS 抓取的内容；<section> 只是逻辑子模块，无此能力
“2024年3月15日”对爬虫只是普通字符串，需靠 NLP 推断；而 <time datetime="2024-03-15">2024年3月15日</time> 自带标准格式的 datetime 属性，Google 新闻/博客类页面会据此提升时效性排序权重。
容易踩的坑集中在格式和上下文：
-
datetime 值必须符合 W3C 标准（如 "2024-03-15"、"2024-03-15T14:30"），写成 "2024/03/15" 或缺失引号会导致解析失败
- 发布时间必须放在主内容附近（如
<article> 内部、<main> 中紧邻 <h1>），远离主干的 <time> 不被关联为该内容的时间信号
- 页脚备案日期、版权声明中的
<time> 对主内容时效性无加成，反而可能稀释信号
Lighthouse 的 “Document structure” 检查项不是摆设
Chrome DevTools 中 Lighthouse 的 “Document structure” 审计项，本质是模拟 Google 爬虫的结构合法性校验逻辑。它不检查样式、不评估文案质量，只验证三件事：<main> 是否唯一且非空、每个 <section> 是否有标题、<h1>–<h6> 是否形成合理层级。
上线前漏掉这一步，等于主动交出结构解释权给爬虫猜测。
- 运行
lighthouse --view --chrome-flags="--headless" 可批量检测构建产物，重点看 “Document structure” 是否通过
- 若报告提示 “
<main> is missing or invalid”，不要只补标签——先确认是否真有服务端渲染的主内容
- 动态路由 SPA 中，每次
pushState 后需手动调用 document.querySelector('main').innerHTML = ... 并确保销毁旧 <main> 节点，避免 DOM 中残留多个
最常被忽略的点：语义标签必须包裹真实、静态、可索引的内容。用 <main><div id="app"></div></main> 包一层空容器，再靠 JS 渲染，等于贴了一张机器无法验证的假标签——结构信号彻底失效。
就等于没写
<section> 在爬虫眼里不是“视觉分块”，而是“可独立建模的内容单元”。它必须携带语义锚点，否则会被忽略。
使用场景：单篇博客、商品详情页、FAQ 列表项等需要被单独识别、索引、甚至富摘要展示的内容。
立即学习“前端免费学习笔记（深入）”；
- 每个
<section>必须以<h2>或带aria-labelledby的元素起始；纯<section><p>...</p></section>不参与主题建模 - 新闻列表页中，应为每条新闻包裹独立
<section>，而非整个列表套一个 —— 否则爬虫误判为“一篇长文”，而非“10 篇独立报道” -
<section>与<article>不可混用：<article>表示可独立分发、复用、被 RSS 抓取的内容；<section>只是逻辑子模块，无此能力
“2024年3月15日”对爬虫只是普通字符串，需靠 NLP 推断；而 <time datetime="2024-03-15">2024年3月15日</time> 自带标准格式的 datetime 属性，Google 新闻/博客类页面会据此提升时效性排序权重。
容易踩的坑集中在格式和上下文：
-
datetime值必须符合 W3C 标准（如"2024-03-15"、"2024-03-15T14:30"），写成"2024/03/15"或缺失引号会导致解析失败 - 发布时间必须放在主内容附近（如
<article>内部、<main>中紧邻<h1>），远离主干的<time>不被关联为该内容的时间信号 - 页脚备案日期、版权声明中的
<time>对主内容时效性无加成，反而可能稀释信号
Lighthouse 的 “Document structure” 检查项不是摆设
Chrome DevTools 中 Lighthouse 的 “Document structure” 审计项，本质是模拟 Google 爬虫的结构合法性校验逻辑。它不检查样式、不评估文案质量，只验证三件事：<main> 是否唯一且非空、每个 <section> 是否有标题、<h1>–<h6> 是否形成合理层级。
上线前漏掉这一步，等于主动交出结构解释权给爬虫猜测。
- 运行
lighthouse --view --chrome-flags="--headless"可批量检测构建产物，重点看 “Document structure” 是否通过 - 若报告提示 “
<main>is missing or invalid”，不要只补标签——先确认是否真有服务端渲染的主内容 - 动态路由 SPA 中，每次
pushState后需手动调用document.querySelector('main').innerHTML = ...并确保销毁旧<main>节点，避免 DOM 中残留多个
最常被忽略的点：语义标签必须包裹真实、静态、可索引的内容。用 <main><div id="app"></div></main> 包一层空容器，再靠 JS 渲染，等于贴了一张机器无法验证的假标签——结构信号彻底失效。
