google移动优先索引硬性要求唯一非空，须带标题且独立建模，需合规格式，lighthouse“document structure”审计直接模拟爬虫校验逻辑。
爬虫只认，不认“看起来像主内容”的div
Google 移动优先索引（2023 年起 100% 启用）不会从 顶部逐行解析，而是直接跳过 <header></header>、<nav></nav>、<footer></footer>，定位第一个合法 <main></main> 开始提取首屏文本、链接和标题层级。这不是“偏好”，是硬性规则。
常见错误现象：<main></main> 为空、嵌套在 <footer></footer> 里、页面存在多个 <main></main>、或用 JS 动态插入后未触发重抓取——全部触发“结构冲突”警告，整块内容权重打折。
-
<main></main>必须唯一，且包裹所有真实可索引的主内容（正文、核心 CTA、关键数据） - SPA 页面中，服务端渲染必须输出非空
<main></main>内容；仅留<div id="root"></div>等同于告诉爬虫“这里没主内容” - 登录弹窗、客服电话、广告位塞进
<main></main>→ 被判为“元信息污染”，主内容可信度下降
不是的替代品，没就等于没写
<section></section> 在爬虫眼里不是“视觉分块”，而是“可独立建模的内容单元”。它必须携带语义锚点，否则会被忽略。
使用场景：单篇博客、商品详情页、FAQ 列表项等需要被单独识别、索引、甚至富摘要展示的内容。
- 每个
<section></section> 必须以 <h2></h2> 或带 aria-labelledby 的元素起始；纯 <section><p>...</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></section> 不参与主题建模
- 新闻列表页中，应为每条新闻包裹独立
<section></section>，而非整个列表套一个 —— 否则爬虫误判为“一篇长文”，而非“10 篇独立报道”
-
<section></section> 与 <article></article> 不可混用：<article></article> 表示可独立分发、复用、被 RSS 抓取的内容；<section></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></article> 内部、<main></main> 中紧邻 <h1></h1>），远离主干的 <time></time> 不被关联为该内容的时间信号
- 页脚备案日期、版权声明中的
<time></time> 对主内容时效性无加成，反而可能稀释信号
Lighthouse 的 “Document structure” 检查项不是摆设
Chrome DevTools 中 Lighthouse 的 “Document structure” 审计项，本质是模拟 Google 爬虫的结构合法性校验逻辑。它不检查样式、不评估文案质量，只验证三件事：<main></main> 是否唯一且非空、每个 <section></section> 是否有标题、<h1></h1>–<h6></h6> 是否形成合理层级。
上线前漏掉这一步，等于主动交出结构解释权给爬虫猜测。
- 运行
lighthouse --view --chrome-flags="--headless" 可批量检测构建产物，重点看 “Document structure” 是否通过
- 若报告提示 “
<main></main> is missing or invalid”，不要只补标签——先确认是否真有服务端渲染的主内容
- 动态路由 SPA 中，每次
pushState 后需手动调用 document.querySelector('main').innerHTML = ... 并确保销毁旧 <main></main> 节点，避免 DOM 中残留多个
最常被忽略的点：语义标签必须包裹真实、静态、可索引的内容。用 <main><div id="app"></div></main> 包一层空容器，再靠 JS 渲染，等于贴了一张机器无法验证的假标签——结构信号彻底失效。
就等于没写
<section></section> 在爬虫眼里不是“视觉分块”，而是“可独立建模的内容单元”。它必须携带语义锚点，否则会被忽略。
使用场景：单篇博客、商品详情页、FAQ 列表项等需要被单独识别、索引、甚至富摘要展示的内容。
- 每个
<section></section>必须以<h2></h2>或带aria-labelledby的元素起始；纯<section><p>...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>不参与主题建模 - 新闻列表页中，应为每条新闻包裹独立
<section></section>，而非整个列表套一个 —— 否则爬虫误判为“一篇长文”，而非“10 篇独立报道” -
<section></section>与<article></article>不可混用：<article></article>表示可独立分发、复用、被 RSS 抓取的内容；<section></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></article>内部、<main></main>中紧邻<h1></h1>），远离主干的<time></time>不被关联为该内容的时间信号 - 页脚备案日期、版权声明中的
<time></time>对主内容时效性无加成，反而可能稀释信号
Lighthouse 的 “Document structure” 检查项不是摆设
Chrome DevTools 中 Lighthouse 的 “Document structure” 审计项，本质是模拟 Google 爬虫的结构合法性校验逻辑。它不检查样式、不评估文案质量，只验证三件事：<main></main> 是否唯一且非空、每个 <section></section> 是否有标题、<h1></h1>–<h6></h6> 是否形成合理层级。
上线前漏掉这一步，等于主动交出结构解释权给爬虫猜测。
- 运行
lighthouse --view --chrome-flags="--headless"可批量检测构建产物，重点看 “Document structure” 是否通过 - 若报告提示 “
<main></main>is missing or invalid”，不要只补标签——先确认是否真有服务端渲染的主内容 - 动态路由 SPA 中，每次
pushState后需手动调用document.querySelector('main').innerHTML = ...并确保销毁旧<main></main>节点，避免 DOM 中残留多个
最常被忽略的点：语义标签必须包裹真实、静态、可索引的内容。用 <main><div id="app"></div></main> 包一层空容器，再靠 JS 渲染，等于贴了一张机器无法验证的假标签——结构信号彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
